How to Fix Ajax to Always Fire When Checking Box

How to fix AJAX to always fire when checking box?

This might be the problem with Turbolinks, could you try changing your javascript:

$(document).ready(function()
{
  // ...
}

to look like:

$(document).on("ready page:load", function() {
  // ..
}

Please, let me know if it helped!

Good luck!

jQuery .always() seems to fire before $.get() request is actually complete

The way you have set this up, the .always callback will fire as soon as the last ajax request in the loop completes. This can happen out of order with respect to the others. I can't tell if you want it to fire when all requests in the loop have completed or when the outer request has completed.

For the outer request, it's easy. Just chain a call to .always (or .done, I believe they are the same and the latter is preferred).

If you want it to complete when all the other ajax requests are completed, you can use $.when, which checks when all deferred objects are complete:

var jqxhrs = [];
   ...for loop...
   var jqxhr = $.get( videoDetailsRequest
   ...
   }, 'jsonp');
   jqxhrs.push(jqxhr);
...
$.when.apply(undefined, jqxhrs).always(function () { /* your intended callback */

---

Alternatively, you can use .pipe:

//Create initial deferred object
var jqxhr = $.Deferred();
   ...for loop...
   jqxhr = jqxhr.pipe($.get(...
jqxhr.always(function () { /* callback */

Ajax call on checking a checkbox

you have to change your html slightly with this--

give same class name to both check boxes.

<input class="searchType" type="checkbox" name="emailNotification" id="emailNotification"><label class="searchtype1label">Email Notification</label></input>
 <input class="searchType" type="checkbox" name="SharingNotification" id="SharingNotification"><label class="searchtype2label">File Sharing Notification</label></input>

Now slightly change in jquery part--

$('.searchType').click(function() {
    alert($(this).attr('id'));  //-->this will alert id of checked checkbox.
       if(this.checked){
            $.ajax({
                type: "POST",
                url: 'searchOnType.jsp',
                data: $(this).attr('id'), //--> send id of checked checkbox on other page
                success: function(data) {
                    alert('it worked');
                    alert(data);
                    $('#container').html(data);
                },
                 error: function() {
                    alert('it broke');
                },
                complete: function() {
                    alert('it completed');
                }
            });

            }
      });

AJAX success:function always returning success (and 200 status code), error function not triggering

In Terms of AJAX, as long as a status "200" is returned, this is regarded as "success" and the error function will not fire. It has nothing to do with what you send as response, it's only the http status code.

so adjust your success function:

     success:function(data, textStatus, xhr){

            console.log(xhr.status);
            console.log(data);

            if ( data == "Success" ) // thats what you send in case of a proper login
                 alert("Successful")

     },

How to create delay before ajax call?

setTimeout with clearTimeout will accomplish this. Each click would do

var timeout = null;

$(element).click(function(){
    if(timeout)
    {
        clearTimeout(timeout);
    }

    timeout = setTimeout([some code to call AJAX], 500);
})

On each click, if there is a timeout it is cleared and restarted at 500 milliseconds. That way, the ajax can never fire until the user has stopped clicking for 500 milliseconds.

jQuery ajax request not firing on subsequent events

IE is likely caching the result of the $.get() request. Try adding a timestamp to the URL of the get request, as such:

var myDate = new Date();
var timestamp = myDate.getTime();
$.get("/Tasks/Complete/" + this.id + '?t=' + timestamp);

onclick checkbox + ajax cache html

Depending on what version of jQuery you are using, the onclick event will fire and process before the value of the checkbox has actually changed. I would suggest using an onchange event instead of onclick, as this will ensure that the event will not run until after the checkbox has checked or unchecked.

Additionally, $.html() will not return the status of the checkbox. The actual html in the DOM does not get altered whenever you check the box; the checked status is stored as a property on the input, as opposed to an attributed. You'll need to manually check the checked status of each checkbox and send that information to your .php page. See example Fiddle here.

var checkedStatus = []; // send this array to your php
$(':input', '#list').each(function () {
    checkedStatus.push($(this).prop('checked'));
});

jQuery checkbox checked state changed event

Bind to the change event instead of click. However, you will probably still need to check whether or not the checkbox is checked:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

The main benefit of binding to the change event over the click event is that not all clicks on a checkbox will cause it to change state. If you only want to capture events that cause the checkbox to change state, you want the aptly-named change event. Redacted in comments

Also note that I've used this.checked instead of wrapping the element in a jQuery object and using jQuery methods, simply because it's shorter and faster to access the property of the DOM element directly.

Edit (see comments)

To get all checkboxes you have a couple of options. You can use the :checkbox pseudo-selector:

$(":checkbox")

Or you could use an attribute equals selector:

$("input[type='checkbox']")

Ajax success event not working

The result is probably not in JSON format, so when jQuery tries to parse it as such, it fails. You can catch the error with error: callback function.

You don't seem to need JSON in that function anyways, so you can also take out the dataType: 'json' row.

---

Related Topics