ajax order does not match selection order with async:true

Question

I have this code which is called at an onChange event of an

function group_changed(obj)
{
  $.ajaxSetup({async:false});
  $.post("/medilab/personnel/groups/getGroupRightsAjax",
    { 'group.id': obj.options[obj.selectedIndex].value },
    function(data){
      $("#div_rights").html(data);
    }
  );
}

This works fine but if i set async:true sometimes the result doesnt match the selection... I guess that this is happening because some requests are lost or that the responses dont come in order.

Any idea what to do to keep it asynchronous?

Answer 1

There are a few plugins for jQuery that support queuing and ordering of the ajax requests. John Resig wrote Ajax Queue. From the plugin description:

Ajax Queue is a plugin that helps to manage Ajax race conditions. When multiple Ajax requests are made in rapid succession, the results can be returned out of order. This can cause weird behavior in your application.

This sounds like it may be what you need, there should also be a couple different plugins available that accomplish the same thing (keeping ajax requests ordered). Ajax Manager looks to be more up-to-date. Browse through some of the plugins, you might find something that already does what you are looking to accomplish, saving you time.

Answer 2

try this, it may be a better solution.

$.ajax
({
    type:'post',
    data:'',
    dataType: 'html',
    url: '',
    success: function(data) {
        alert('data');
    },
    error: function()   {
       alert("Error");
    }
});