jQuery

17K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Share tech news, updates, or what's on your mind.

Sign up to Post

I have this piece of code where i am trying to validate the jquery based Date of Birth Validation.

is there any JS function which also checks the full date if it falls in a leap year or not, i am trying this but it does seems to be working

function isValidDate(s) {
  var bits = s.split('/');
  var d = new Date(bits[2] + '/' + bits[1] + '/' + bits[0]);
  return !!(d && (d.getMonth() + 1) == bits[1] && d.getDate() == Number(bits[0]));
}

Open in new window


date i tested is: 02/29/1920 - it is giving false (edited)

testing it like this:

    function init_inputOnKeyUp(){
        $('select[name="day"],select[name="year"]').off('change');
        $('select[name="month"],select[name="day"],select[name="year"]').on('change', function(e) {
        if (type == 'select') {
            var newdate = $('select[name="month"]').val() + '/' + $('select[name="day"]').val() + '/' + $('select[name="year"]').val();
                        var results = isValidDate(newdate.toString());
                        console.log(results);
                        console.log(newdate.toString());
        }
        });
}

Open in new window


problem i can't use any extra library like moment.js

the error is it is always giving me false when i try to validate with a full date

i am not sure at this point, if the error is happening on leap year or onchange issue
1
Learn Ruby Fundamentals
LVL 12
Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

getDeals();

    setTimeout(function () {
        timelineController();
    }, 300);

    createDefaultProps();
    loadSocialData();
  
    
    loadLeadData();

    loadActData();
    getJr();
    getJrTimeline();

Open in new window


here is my list of functions which each has a ajax function, how do i tell these functions to wait until ajax is complete ? and run in order
1
Hello everybody,

I have a bunch of AJAX scripts that fetch and give data from and to PHP but the one I'm trying to make, I have no idea how to do it or which is the best way to do it. Here's the scenario:

  1. User selects 1st option form combo box and second combo box gets filled (AJAX)
  2. User selects 2nd option from second combo box and a table with check boxes appears at the bottom (AJAX)
  3. User selects/un-selects options (check boxes), hit SAVE and it supposedly saves the changes into the DB using AJAX and PHP

The problem is that the table rows with its check boxes are generated dynamically. Normally I would iterate through all the check boxes creating variables which would be passed as POST to a PHP function in another page using AJAX but, since in this case the check boxes are created dynamically I can't do that as I don't know the number of variables (check boxes) I will have to deal with or their IDs.

I've made a function in jQuery to fetch all check boxes generated in PHP and sent to the page and got this:

<input type=​"checkbox" data-render=​"switchery" id=​"author-11" name=​"author-11" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-12" name=​"author-12" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-13" name=​"author-13" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" 

Open in new window

0
I'm running in to some difficulty loading an HTML file into a DIV using JQuery 3.x's load() method:

http://api.jquery.com/load/

Although I am successfully able to load and display the HTML file, .. I am getting JavaScript errors, which I'd like to eliminate/suppress.

I have this very simple JS function to trigger the loading of the HTML file:

function loadGoogleMapView(pageurl) {
	$("#myMap").load(pageurl);
}

Open in new window


.. and then I am calling the method by passing the HTML filename to it:

<a href="#" onclick="loadGoogleMapView('map-view.html');">View Map</a>

Open in new window


The contents of the HTML file that I'm trying to load is as follows (note that I have deliberately stripped out my Google Maps API key).

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style>
	#mapView { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
</style>	

</head>

<body>

<div id="mapView"></div>

<script>
function initMap() {
	var broadway = {
		info: '<strong>Chipotle on Broadway</strong><br>\
					5224 N Broadway St<br> Chicago, IL 60640<br>\
					<a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
		lat: 41.976816,
		long: -87.659916
	};
	var belmont = {
		info: '<strong>Chipotle on Belmont</strong><br>\
					1025 W Belmont Ave<br> Chicago, IL 60657<br>\
					<a href="https://goo.gl/maps/PHfsWTvgKa92">Get Directions</a>',
		lat: 41.939670,
		long: -87.655167
	};

Open in new window

0
I'm having a problem with iterating through a class in Jquery...
The $(allmessages).each(function (i, obj) ... is not executing for every <span> with the class of '.encryptedtext'

It hits the first message, decrypts it perfectly, but then doesn't execute the code on the next span.
I verified that the class is present on every span where the encrypted messages exist using 'inspect' feature in Chrome.

            function (data) {


                var ServerResponse = String(data);
                ServerResponse = unescape(ServerResponse);
                //alert(ServerResponse);
               $(".divinner").html(ServerResponse);
               // $(".divinner").append(ServerResponse);
                var allmessages = $('.encryptedtext');
                $(allmessages).each(function (i, obj) {
                    //test
                    var encryptedtext = $(obj).html();
                    encryptedtext = encryptedtext.replace(' ', '+');
                    //alert('message recieved encrypted: ' + encryptedtext);
                    //alert('message unescaped: ' + unescape(encryptedtext));
                    //alert('channel id and key: ' + channelid + key);

                    var decryptmsg = decrypt(encryptedtext, channelid + key);
                    alert('message decrypted:' + decryptmsg.toString(CryptoJS.enc.Utf8));
                    var plaintxt = decryptmsg.toString(CryptoJS.enc.Utf8);
                    var tempobj = obj;
                    

Open in new window

0
I have a checkbox that enables and disables the validation of a textbox when checked. I am doing this on client side and want everything to be on client side.

I am attempting to use jquery to accomplish what I need to do. I have written most of the code already and it works mostly how I want it to, except for when I first activate the textbox it throws up the validation error. I only want it to validate on submission.
textboxval.PNG
Here is my code:
    var idEmail = {
        txtEmailNotification: "<%= txtEmailNotification.ClientID %>"
    }
    var idEmailVal = {
        valRegExpEmailNotification: "<%= valRegExpEmailNotification.ClientID %>"
    }
    var idEmailReqVal = {
        valEmailNotification: "<%= valEmailNotification.ClientID %>"
    }
$(document).ready(function functionCheckEmail() {
    //check if checkbox is checked on page load
    if ($('#chkIsEmailNotices').is(':checked')) {

        $("#" + idEmail.txtEmailNotification).show(); //shows if checked
        ValidatorEnable($("#" + idEmailVal.valRegExpEmailNotification)[0], true); //shows validators
        ValidatorEnable($("#" + idEmailReqVal.valEmailNotification)[0], true); //shows validators

    } else {

        $("#" + idEmail.txtEmailNotification).hide(); //hides if not checked
        ValidatorEnable($("#" + idEmailVal.valRegExpEmailNotification)[0], false); //hides validators
        ValidatorEnable($("#" + idEmailReqVal.valEmailNotification)[0], false); //hides validators
    }

Open in new window

0
I am currently trying to set up a notifications settings page where users can opt in for text message or email notifications.

I have a page where if the user clicks a checkbox, a textbox will appear so they can fill out their contact information. I want the textboxes to validate the information. I want the validations and the checkbox hiding and showing the textbox to be client side.

I am using jquery to hide and show the textboxes, and to check the validations when the checkbox is checked. Currently, most everything is working, except when the checkboxes are unchecked. It shouldn't validate the textbox if it's empty and hidden(checkbox unchecked), but it does.

Here is the jquery I am using:
<script type="text/javascript">
$(document).ready(function () {
    //Must have these for nonstatic ids
    var idText = {
        txtTextNotification: "<%= txtTextNotification.ClientID %>"
    }
    var idTextVal = {
        valTextNotification: "<%= valTextNotification.ClientID %>"
    }
    var idEmail = {
        txtEmailNotification: "<%= txtEmailNotification.ClientID %>"
    }
    var idEmailVal = {
        valRegExpEmailNotification: "<%= valRegExpEmailNotification.ClientID %>"
    }

    //check if checkbox is checked on page load
    if ($("#chkIsTextable").is(':checked')) {

        $("#" + idText.txtTextNotification).show(); //shows if checked
        ValidatorEnable($("#" + idTextVal.valTextNotification)[0], true); //shows validators

    } else {
        

Open in new window

0
Experts,
  I have one js file for dynamic pagination. We did not use any plug in for this code. I would like to implement functionality with css.

  1. Highlight the Active page
  2. Disable the Previous page if we  are one first page.
  3.  Disable the Next Page if we are on last page
 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
   (function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Footer = pagingControl;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

 function pagingControl(ctx) 
 {
    var firstRow = ctx.ListData.FirstRow;
    var lastRow = ctx.ListData.LastRow;
    var prev = ctx.ListData.PrevHref;
    var next = ctx.ListData.NextHref;
    var view = ctx.view;
    var filter = ctx.ListData.FilterLink;
    view =  view.replace(/[{}]/g, "");
console.log(view);
    var totalItems = $('tr#aggWPQ2 td.ms-vb2 b').html();
        totalItems = Number(totalItems.replace('Count=&nbsp;', '') );
    var totalPages = (totalItems / 5) +1;  // Mod function 
	
	
	// "?Paged=TRUE&p_ID=10&PageFirstRow=11&View=f0e50c0f-5f49-46f0-890d-fb6039528edd"

  var html = "";
		 
          html +="<div class='Paging'>";
          html += prev ? "<a href='" + prev + "'><span><&nbsp;Previous Page</span></a>" : "<a href='" + prev + "'>Previous Page</a>";
	
          var pageID =  0;
          var pageFirstRow = pageID + 1;
        

Open in new window

1
I have a web page that has a date input field. This is in html 5. I need a jquery or javascript option to check if a data has been supplied, else add the default date "01/02/1901". This would be an event triggered by the submit button. I just need to update the field before the post.

<input type="date" name="Date Worked" id="add_Date_Worked" />
<input type="submit" value="Save Changes" />

Open in new window

1
Hello everybody, hope you had a wonderful start for 2019.

I'm having problems with a jQuery/AJAX + PHP autofiller. I'm trying to fetch all the posibble results for the users in my DB, no matter what the user search for (could be username, name or last name). So far I've managed to fetch everything from my DB using PHP with the following script:

$sql
=
"
SELECT user_id, apellido, primer_nombre, nombre_usuario
FROM dbo.v3_usuarios
WHERE (nombre_usuario LIKE :parte_usuario)
OR (primer_nombre LIKE :parte_usuario2)
OR (apellido LIKE :parte_usuario3)
"
;

try
{
	
	$parte_usuario = '%' . strval($parte_usuario) . '%';
	
	$core = Core::getInstance();
	$stmt = $core->dbh->prepare($sql);
	$stmt->bindParam(':parte_usuario', $parte_usuario, PDO::PARAM_STR);
	$stmt->bindParam(':parte_usuario2', $parte_usuario, PDO::PARAM_STR);
	$stmt->bindParam(':parte_usuario3', $parte_usuario, PDO::PARAM_STR);
	
	if ($stmt->execute())
	{
		
		$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
		
		$usuarios = array();
		
		foreach ($result as $key => $value) {
			
			array_push($usuarios, $value['user_id'], $value['apellido'], $value['primer_nombre'], $value['nombre_usuario']);
			
		}
		
		echo json_encode($usuarios);
		
	} else { echo 'Couldn\'t connect to DB'; }

	$stmt = null;
	$core = null;

} catch(PDOException $e) { echo $sql . "<br>" . $e->getMessage(); }

Open in new window

And I've managed to fetch it using AJAX with:

$('#usuario-buscar').typeahead({
	source: function (query, result) {
		$.ajax({
			url: "somepage.php",
			data: 'query=' + query,            
			dataType: "json",
			type: "POST",
			success: function (data) {
				// console.log(data);
				result($.map(data, function (item) {
					return item;
					//console.log(item);
				}));
			}
		});
	}
});

Open in new window

This is taken from an example in phppot.com and I can make it work with only one field, but I would like to show the results like "USERNAME - Lastname Fisrtname".

Any chance to get help with this? All the tries I've made repeat tens of times each result in the "dropdown" it creates for the textbox.

BTW the user_id, while I don't want it displayed in the auto fill dropdown, will be used to populate some hidden text box or something for the form to grab.

Thanks in advance!
1
Exploring SharePoint 2016
LVL 12
Exploring SharePoint 2016

Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.

I have an MVC C# Web application. I need a way to check a cookie name ="User_Role", if it = "UR500" then hide a menu object which is included in the layout.cshtml. Where would I place this script?
1
I have an MVC C# web application. I am trying to force a user choose from a drop down; in turn that selection is then used as a parameter to in another dropdown. I have a series of these activities. My first drop down does exactly correct, user chooses a selection, the selection is captured and the controller returns the new list and the user is asked to choose from the second list. My problem is that I cant seem to get the third drop down to get the last selection. I can see the controller is returning the data correctly, but I have something not quite right in the code. Maybe I have a variable or something that is keeping previous values. See my code snips below:

       window.onload = function () {
            document.getElementById("add_Date_Worked").setAttribute("readonly", "readonly");
            document.getElementById("add_Client_ID").onchange = function () {
                if (this.selectedIndex !== 0) {
                    document.getElementById("add_Product_ID").removeAttribute("disabled");

                    /* Client ID Drop Down Parameter Selection Start */
                    $.getJSON("../Home/GetFilteredProducts", { id: jQuery("#add_Client_ID").val() },
                        function (data) {
                            var select = $("#add_Product_ID");
                            select.empty();
                            select.append($('<option/>', {
                                value: 0,
                                text: "Select 

Open in new window

1
I use HTML5 and JS.
I use Bootstrap modal for pop-up.
The modal works on clicks,

How can I show it when page loads. ( without clicking )
this is the script that I use
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})
</script>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Open in new window

1
Is Jquery outdated? what's the new technology that has replaced JQuery? Is it Bootstrap, Angular or React?

FYI, I don't have enough knowledge on Bootstrap, Angular or Reactjs hence am trying to determine what is the latest that I should be using on newer web applications.

Thanks for the info.
1
When I run the html file, it is fine  for the ADD and Remove, But when I run the asp page, the image won't be added. per the code:
 <table>
  <tr>
    <td> 
     
          
   <div class="p">
          <div class="thumbnail">
            <div class="thumbnail-img-<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
        <a href="product.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
          <div class="img-p">
            <img class="thumbnail-img-<%# DataBinder.Eval(Container.DataItem, "idProduct") %>" src="<%=LINK_IMAGES%>small/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg">            
          </div>
        </a>
        
        <p><button class="btn add-remove-btn btn-primary" data-identitfier='4'>Add to List</button>
              </p>
      </div>
    </td>
  </tr>   
    
	
    </table>
    

Open in new window

1
I have an MVC C# Web Application and am using jQuery Bootgrid. The bootgrid is populating fine, the issue is there is a toggle button on the upper right of the grid that allows the user to select which columns in the grid are to be present. This feature is turned on with the following code "columnSelection: true". The issue is the button is not allowing the user to select the fields as it should. I have attached screen shots of how the button is supposed to function. When running through google dev, an error is thrown saying that it cannot find popper.js:1 Failed to load resource; however I have a reference to it (See Script Links below). Maybe it is the order of which I am loading. I have no idea at this point. Thanks.

Grid Snippet ---------------------------------------
    <script>
        var grid = $("#grid-data").bootgrid({
            ajax: false,
            caseSensitive: false,
            columnSelection: true,
            formatters: {
                "commands": function (column, row) {
                    return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.product_id + "," + row.client_id + "," + row.product_name + "," + row.description + "," + row.active + "\"><span class=\"fas fa-pencil-alt\"></span></button> " +
                        "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.product_id + "\"><span class=\"fas fa-trash-alt\"></span></button>";
  …
1
Hi,
 We have SQL database and we created the page and display sql data with Datatable plug in (datatable.js). We also added export to excel button to export data from gridview. We have some performance issue to export all data. is it possible to export what we are displaying on page? Or do we have any other method to export to excel  directly from SQL by client side code?
0
In the compare products, I want to "The remove x "  to show  when images are added. Below is the coding. How to fix it? Thank you!
 <script type="text/javascript">
            function removeParent() {
                this.parentNode.remove();
            }
            var buttons = document.getElementsByClassName('remove');
            Array.prototype.forEach.call(buttons, function(d, i) {
                d.addEventListener('click', removeParent);
            });
        </script>



<div id="compare-box">
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
         <button class="remove">X</button>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
         <button class="remove">X</button>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
         <button class="remove">X</button>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
         <button class="remove">X</button>
      </div>
    </div>
    <div id="compare-box-row" class="col-xs-9">

    </div>
  </div>

Open in new window

1
Hi,

I have this nav looking like this:
 <ul class="top-nav">
             <!-- Actions -->
            <li class="top-nav__item">
                <div class="top-nav__item--icon">
                    <i class="fas fa-toolbox"></i>
                </div>
               
                <div class="top-nav__item--link">
                    <a href="#">Actions</a>
                </div>

                <ul class="top-nav__sub">
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--icon">
                                <i class="fas fa-toolbox"></i>
                        </div>
                        <div class="top-nav__sub-item--link">
                            <a href="#">Print</a>
                        </div>
                    </li>
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--link">
                            <a href="#">E-mail</a>
                        </div>
                    </li>
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--link">
                            <a href="#">Download</a>
                        </div>
                    </li>
                </ul>    
            </li>

            <!-- Fast links -->
            <li class="top-nav__item">
                <div class="top-nav__item--icon">
                    <i class="fas fa-toolbox"></i>
                </div>

Open in new window

1
OWASP Proactive Controls
LVL 12
OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

Hello everybody,

I'm trying to figure out why something has stopped working after I changed from a MySQL DB to a MS-SQL DB. Everything else seems to work fine and it makes no sense, but this just stopped working. In the site, I have a modal that is shown when the user need to add a new tag name. Then it records the tag using AJAX and reloads the page to show the newly added tag name into the list. Here's what I've got:

Modal that is shown:
<div class="modal" id="modal-tag">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Add new Tag</h4>
			</div>
			<div class="modal-body">
				<form id="form-new-tag">
					<fieldset>
						<div class="form-group row">
							<div class="col-md-12">
								<label for="tagNameInput">Tag name:</label><br>
								<input type="text" class="form-control" id="tagNameInput" name="tagNameInput" placeholder="" data-required="false" maxlength="30" />
							</div>
						</div>
						<button id="submittagbutton" name="submit" type="button" class="btn btn-sm btn-primary m-r-5">Save</button>
						<a href="javascript:;" class="btn btn-white" data-dismiss="modal">Cancel</a>
					</fieldset>
				</form>
			</div>
		</div>
	</div>
</div>

Open in new window

Ajax script:
<script>
	
	var division = <?php echo $userData['division']; ?>;
	var uid = <?php echo $userData['user_id']; ?>;
	
	$(document).ready(function() {
		
		$('#submittagbutton').click(function() {
			var newtag = $('#tagNameInput').val();
			if (newtag == "") { 
				return false;
			}
			
			var dataString = 'newtag='+ newtag +'&division='+ division +'&uid='+ uid;
			
			$.ajax({
				type: 'POST',
				url: 'joblog_addtag.php',
				data: dataString,
				success: function(d) {
					if (d.status == 'ok') {
						$('#modal-tag').modal('hide');
						location.reload();
					}
				},
				error: function() {
					alert("Error ! In fetching data.");
				}
			});
		});
	});
	
</script>

Open in new window

PHP page that is called by ajax:
require_once 'functions.php';
sec_session_start();

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {

	header('Content-Type: application/json');
	if (v3AddNewTag($_POST['newtag'], $_POST['division'], $_POST['uid'])) {

		echo json_encode(array('status' => 'ok'));

	} else {

		return false;

	}

} else {

	header('HTTP/1.0 403 Forbidden');
	die('You are not allowed to access this script.');

}

Open in new window

And the PHP function is called:
function v3AddNewTag($tagText, $division, $uid) {

	$sql
	=
	"
	INSERT INTO dbo.v3_joblog_tags (tag, tag_division, tag_active, tag_created_by)
	VALUES (:tag, :tag_division, :tag_created_by, :tag_created_by)
	"
	;
	
	try
	{
		$tag = latinChars($tagText);
		$tag_active= 1;
		
		$core = Core::getInstance();
		$stmt = $core->dbh->prepare($sql);
		$stmt->bindParam(':tag', $tag, PDO::PARAM_STR);
		$stmt->bindParam(':tag_division', $division, PDO::PARAM_INT);
		$stmt->bindParam(':tag_active', $tag_active, PDO::PARAM_INT);
		$stmt->bindParam(':tag_created_by', $uid, PDO::PARAM_INT);
		
		if ($stmt->execute())
		{
			
			return true;
			
		} else { echo 'Couldn\'t connect to DB'; }

	} catch(PDOException $e) { echo $sql . "<br>" . $e->getMessage(); }

}

Open in new window

Now, if I take the v3AddNewTag function and run it alone in a test page with hand-made data, it works so I know the INSERT query works. I've also tested the data sent to AJAX using alerts and it also works. What can be the problem?

Thanks a lot in advance and happy holidays!
0
Hello Experts!

Please what is wrong with my code? No return data in table but when I checked header (developer tool), I got something (attached).
I think the problem is from select option values and how they are being passed through AJAX. I said this because when I used hard-coded value  (1 or 0) in my PHP script and request AJAX call when page loads NOT onchange, the table populated correctly.

The HTML select:
<select name="user_status" id="user_status">
    <option value="">--User Status--</option>
    <option value="1">Active Users</option>
    <option value="0">Inactive Users</option>
</select>

Open in new window

AJAX:
var myTable = 
    $('#lockUsersTable').DataTable({
    "pageLength": 25,
    select: {style: 'multi'},
    columns: [
        { data: 'count' },
        { data: 'initials' },
        { data: 'username' },
        { data: 'user_type' },
        { data: 'status', orderable: false },
        { data: 'lock', orderable: false }
    ]
});

$('#user_status').on('change', function() {
    $('#tableResponse').html('<i class="ace-icon fa fa-spinner fa-spin blue bigger-115"></i> Please wait...');

    $.ajax({
        method : 'post',
        url : '../../lockUsers_Data',
        data : { userStatus : $('#user_status').val() },
        dataType : 'json',
    }).done(function(data) {
        myTable.clear().draw();
        myTable.rows.add(data).draw();

        var statusVal = $('#user_status').val();

        if ( myTable.data().any() ) {
   

Open in new window

1
Hi,
   I would like to have some help to for HTML/ CSS or any jquery plug in  to create some custom paging.  Here is some code i am working on it. I need to add some style to create fancy paging.

paging.PNG
Here is the code.
if(lastRow < count)
 	 {
		 
          var a=(count % lastRow) + 1;
		   html +="<div class='Paging'>";
		    html +="Previous 1 ";
		 
          for(var i=2;i<a;i++)
          {
	  // Dynami paging code		  
            html+= "<a href='" + next + "'>i </a>";
			
          }  
            html += "</div>";		  
 	 }
     else
	{
        console.log("S");
        html +="<div class='Paging'>";
        html += "<a href='1'></a>";
        html += "</div>";

	}
  }  
    
    return html;
}

Open in new window

0
Hello Experts!

I need help on the following:

Currently, I'm using onblur to do client-side validation on DataTable inputs using this:
$("body").on('blur', 'input[name^="cass"]', function() {
	checkCA(10);
});

$("body").on('blur', 'input[name^="exam"]', function() {
	checkExam(70);
});

function checkCA(max) {
	var currentInput = $(event.target);

	if ( currentInput.val() > max) {

		toastr.error('CA Scores cannot be greater than '+max);
		urrentInput.addClass('invalid');
		} else {
		currentInput.removeClass('invalid');
		}
};

function checkExam(max) {
	var currentInput = $(event.target);

	if ( currentInput.val() > max) {

		toastr.error('Exam Scores cannot be greater than '+max);
		currentInput.addClass('invalid');
		} else {
		currentInput.removeClass('invalid');
		}
};

Open in new window

Now, I want to check Zeros but not onblur. User may not click on a particular input so onblur will not work. I want the border highlighted after the submit button is clicked so as to draw user's attention to the Zero value.

Actually, Zeros are allowed but I still want to show them. If they left it on purpose, it's okay. But what if it was a mistake? That's why I want it highlighted. After all, all inputs will still be available after submit.

Thank you
1
I am trying to use toolbar.js in my asp webforms application, however, I noticed the links do not seem to work.

I have tried looking through the js file but am unable to find anything wrong. Has anyone used this or is able to see why the onlclick does not fire. I placed the normal href as a separate line which works fine.

Any help is appreciated.

Thanks
Toolbar-Test.zip
1
The link https://www.experts-exchange.com/questions/29128544/Add-Items-in-the-product-category-page.html is the question I posted a few days ago. It has been perfectly resolved.
Now based on this, I have the  following questions.

1. Add & Remove List button in Modal Window Page per the attached picture.
2. Page A is the category page.
3.  When user clicks the Add to List, the image will be added to My List. My list will be on the Page A and it is hidden till user clicks Add to List button and my list area will be expanded and show the images.

How to add the my list images to Page A from Modal Window?
How to expand the images once the user clicks the button
Sine in Page A, there is an area to  compare images at the bottom, and if add my list at the top of the page, is it possible?

Please give an example!

Thank you!
add-to-list.jpg
0

jQuery

17K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Related Topics