Question

I have some ajax queries that create & manipulate (external) DOM elements during different stages of the AJAX query (beforeSend, success, failure, complete). Multiple queries can be fired while others are still processing, and I’m wondering how to identify the DOM elements for each query to trigger the events for the correct one.

So, does jQuery .ajax provide access to a unique query identifier that I can parse into an ID for each respective DOM element?

$.ajax({
    UNIQUE_ID_NEEDED_HERE = ??? # Need to get unique identifier for this AJAX query
    url: '/my/query',
    data: my_data,
    dataType: "json",
    beforeSend: function (response) {
        $('#ajax_messages').append('<div class="loadingStatus" id="' + UNIQUE_ID_NEEDED_HERE + '">Re-ordering tasks</div>');
    },
    success: (message, text, response) {
        $(UNIQUE_ID_NEEDED_HERE).attr('class', 'successfulStatus');
        $(UNIQUE_ID_NEEDED_HERE).html('Tasks re-ordered');
    }
});

If not, any alternative ideas appreciated.

Answer 1

Have you tried something like this?

    var constructRequest = (function() {
        var startNumber = 0;
        return function() {
            var local = "request_id_"+(++startNumber);
            $.ajax({
              url: "someurl.php",
              cache: false,
              success: function(html){
                /**
                 * Every time on success callback
                 * you will have unique local variable
                 * like this:
                 * request_id_1, request_id_2, request_id_3
                 * and so on.
                 ***/
                 alert(local);
              }
            });
        }
    })();

    $(document).ready(function() {
            constructRequest();
            constructRequest();
    });