Dynamic page fetching with AJAX

Question

i have a question regarding partial page loading with AJAX.

Suppose that an user clicks on a button that makes an AJAX call to load part of a page (it can possibly include dynamically loaded JS and/or CSS), and the html content is dropped on some div. Then, before the first load is complete he clicks on another button that makes another AJAX call that drops other content on the same div. How should i prevent this behaviour to create any conflicts? Some possible conflicts might be something like, for example, the first load executes some JS on content that is not found because the second load already changed that div.

Thanks in advance.

Edit: I would appreciate answers based on asynchronous methods. Thanks.

Answer 1

Genesis and Gaurav are right about disabling user interaction. +1 from me to each of them. How you handle the logic is actually quite simple:

$('#my_submit_button').click(function(){
    $.ajax({
        url:'/my_file.php',
        dataType='json',
        beforeSend:function(){
            $('#my_submit_button').prop('disabled',true);
        },
        error: function(jqXHR, status, error){
            // handle status for each: "timeout", "error", "abort", and "parsererror"
            // Show submit button again:
            $('#my_ajax_container').html('Oops we had a hiccup: ' + status);
            $('#my_submit_button').prop('disabled',false);
        },
        success:function(data){
            $('#my_ajax_container').html(data);
            $('#my_submit_button').prop('disabled',false);
        }
    });
});

Answer 2

• make it synchronous (not recommended)
• disable link/button while ajaxing
• do not mind about it

but in your case it won't do any conflicts because when html is replaced, scripts too

Answer 3

只需禁用导致AJAX调用在尚未完成时开始的按钮即可。

Answer 4

I'm not sure this would actually be a problem for you because Javascript is single threaded. When the first ajax response comes in and you execute some javascript, that javascript cannot be interupted by the second ajax response as long as it is one continuous thread of execution (no timers or other asynchronous ajax calls as part of it's processing).

Let's run through a scenario:

1. User clicks button - first ajax call starts.
2. User clicks button - second ajax call starts.
3. First ajax call finishes and the completion code execution starts for what to do with the new data.
4. While code is executing from first ajax call, the second ajax call completes. At this point, the browser puts the second ajax call completion into a queue. It cannot trigger any of your completion code yet because the Javascript engine is still running from the first load.
5. Now the first load completes it's execution and code and returns from it's completion handler.
6. The browser now goes to it's queue and finds the next event to process. It finds the completion of the second ajax call and then starts the completion code for that ajax call.

As you can see from this scenario which has overlapping ajax calls and the second completing in the middle of the processing the first, there still is no conflict because the Javascript engine is single threaded.

Now, as the other answers have suggested, you make not want this user experience of launching a new request while one is still processing, but they won't technically conflict with each other. You have several tools you can choose from if you want to prevent overlapping calls:

• You can prevent starting the second call while the first call is unfinished. You can do this both in the UI and in the actual code.
• When there are multiple calls outstanding, you can decide to drop/ignore the earlier responses and not process them - waiting only for the last response.
• When the second call is initiated, you can cancel the first call.
• You can let the second just replace the first as in the above scenario.

The first two options require you to keep track of some cross ajax-call state so one ajax call can know whether there are others and act accordingly.