AJAX uses old data in request

Question

I'm using jQuery.ajax and ajaxQueue . I've two events causing AJAX requests, problem is:

• both are using the same data and manipulates them,
• sometimes they can be both launch by one action (on change for input and click for button).

When they are launched together, first should change value of input, and second should use new value in request. Unfortunatelly, in second request I'm getting old data.

Simply code showing this situation (without events, but main problem is the same):

<input id="in" value="x"><br>
<a href="#">click</a>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.ajaxQueue.min.js"></script>

<script>
jQuery.ajaxQueue({
    url: 'ajax.php',
    method: 'POST',
    beforeSend: function() {
        console.log('long ajax start');
    }
}).then(function() {
    $('#in').val('y');
    console.log('long ajax stop');
    console.log('current input value: ' + $('#in').val());
});

jQuery.ajaxQueue({
    url: 'ajax2.php',
    method: 'POST',
    data: $('#in').val(),
    beforeSend: function(xhr, settings) {
        console.log('short ajax start');
        console.log('data in short ajax: ' + settings.data);
    }
}).then(function() {
    console.log('short ajax stop');
});
</script>

In console I get:

long ajax start
long ajax stop
current input value: y
short ajax start
data in short ajax: x
short ajax stop

Of course should be data in short ajax: y . What can I change to get correct value?

Answer 1

Try adding cache: false for both requests, like this:

jQuery.ajaxQueue({
    url: 'ajax2.php',
    cache: false,
    ...

http://api.jquery.com/jQuery.ajax/