Question

I’m trying to fire an Ajax request with some data being returned by a function call and, as far as I can tell, the Ajax call isn’t waiting for my function call to return.

I’m calling getSelectedMessages to get the values of a variable number of checkboxes before firing an Ajax request with an array of the values returned by getSelectedMessages.

getSelectedMessages looks like this:

var getSelectedMessages = function() {
    var selected = [];
    $('input:checkbox[name=multipleops]:checked').each(function() {
      selected.push($(this).attr('value'));
    });
return selected;
}

And the Ajax request that’s invoking it looks like this:

$.ajax({
   type: "POST",
   url: "/api/messages/",
   data: { ids: getSelectedMessages(), folder: folder },
   cache: false,
   success: function(){ location.reload() }
});

I’ve done a little bit of searching around and all I’m turning up are answers on how to return a value from a call and to it.

Answer 1

use

beforeSend attribute with ajax

try

var getSelectedMessages = function() {
    var selected = [];
    $('input:checkbox[name=multipleops]:checked').each(function() {
      selected.push($(this).attr('value'));
    });
return selected;
}

 $.ajax({
   type: "POST",
   url: "/api/messages/",
   beforeSend : function () { return jQuery.isEmptyObject(getSelectedMessages);  }
   data: { ids: getSelectedMessages(), folder: folder },
   cache: false,
   success: function(){ location.reload() }
});

Reference

beforeSend
isEmptyObject