CODEWITHSUNDEEP
javascriptjqueryajax
EibergDK
EibergDK

Reputation: 564

Ajax call to complete success, before actually completing the call?

I'm trying to figure out an ajax call... I need the call to hold up and finish loading HTML contents, before going over once again (it is triggered by keyup event)... Otherwise returned HTML is actually loaded multiple times. In my case the ajax call returns HTML which then executes a JS function. But when it gets loaded multiple times, JS function is executed twice = bad.

Here is my code (alert boxes are only for help...):

$(document).ready(function() {

   var isProcessing = false;

   $('#productSearchInput').keyup(function() {

   var productSearchInput = $(this).val();
   var dataString = 'searchInput='+ productSearchInput;
   var script_url = '../ajax/service-search.php';

    if(productSearchInput.length > 3 && isProcessing === false) {
        $.ajax({
        type: 'GET',
        url: script_url,
        data: dataString,
        beforeSend:     
            function() {    
            isProcessing = true;
                            alert('Processing input: ' + productSearchInput;
            },
        success:
            function(server_response)   {
            $('#searchresultdata').html(server_response).show('fast', function() { alert('Currently processing...');  } );  
            },
        error:
            function() {
            alert('ajax call failed...');
            },
        complete: 
            function() {
            isProcessing = false;
                            alert('Processing done');
            }
        });

    }

  return false;
  });
});

What is wrong is, that the "Processing done" alert appears before the "Wait for processing" alert... And then after "Processing done" alert has showed, the "Wait for processing" alert shows.

I need my HTML server_response to show, before completing the call and setting isProcessing = false;...

How do I achieve that?

Upvotes: 2

Views: 19361

Answers (2)

n1ckolas
n1ckolas

Reputation: 4440

Why wouldn't you use jQuery.Deferred object, instead of isProcessing?

Please check the code in this case (something like this):

     var isProcessing = $.Deferred();

     $.ajax({
        type: "GET",
        url: script_url,
        data: dataString,
        beforeSend: function() {    
            alert('Processing input: ' + productSearchInput);
        },
        success: function(server_response) {
            alert('Wait for processing...');
            $('#searchresultdata').html(server_response).show('fast', isProcessing.resolve);                    
        },
        error: function() {
            alert('ajax call failed...');
        }
    });
    $.when(isProcessing).then(function(){alert('Processing done');});

Upvotes: 1

Inferpse
Inferpse

Reputation: 4145

This is normal behavior. Using show method requires some time for animation, so callback is called after complete. Why not to simplify your code to something like this:

$.ajax({
    type: "GET",
    url: script_url,
    data: dataString,
    beforeSend: function() {    
        isProcessing = true;
        alert('Processing input: ' + productSearchInput);
        },
    success: function(server_response)   {
        alert('Wait for processing...');
        $('#searchresultdata').html(server_response).show('fast', function() { 
            alert('Processing done');
            isProcessing = false;
        });                    
    },
    error: function() {
        alert('ajax call failed...');
    }
});

Upvotes: 1

Related Questions