Hi guys,

Please refer the code below,
I already set both of the ajax as async : false.
I found out that when the function calling doUpdate2ndAJAX(), the program start executing $(".search").click(); even though doUpdate2ndAJAX() not yet finish executing.

In short current situation:
1. doUpdate2ndAJAX() execute
2. doUpdate2ndAJAX() not yet finish, start execute $(".search").click()
3. doUpdate2ndAJAX() Finish execute and response back

May I know how can I make it as
1. doUpdate2ndAJAX() execute
2. doUpdate2ndAJAX() Finish execute and response back
3. call $(".search").click();

[ Execute in sequence order ]

Thanks.
-fsloke

firstCalled: function() {
             $.ajax({						   
			url: "XXX",
			async: false,
			success: function(response) {

                        doUpdate2ndAJAX();

                        $(".search").click();
                        
                        }
	       });
}				

function  doUpdate2ndAJAX(){
              $.ajax({						   
			url: "YYY",
			async: false,
			success: function(response) {
                            // UPDATE SOMETHING
                        }
               });
              return false;
}

You'll need to put the $(".search").click(); into the callback (success) of the doUpdate2ndAJAX(). If you just put it second in line after an AJAX call, it won't wait for that call to complete to execute.

Hi wayfarer07,

Can coded as below?
But it does not work accordingly.

firstCalled: function() {

               $.ajax({						   
			url: "XXX",
			async: false,
			success: function(response) {
              
              var isCheck;
              $.ajax({						   
			url: "YYY",
			async: false,
			success: function(response) {
                            // UPDATE SOMETHING
                           
                            isCheck = response; // respone either true/ false
                        }
               });

               if(isCheck =="true"){
                     $(".search").click(); 
               }else{
                    alert("ERROR");
               }
 });


}

Thanks

You have a syntax error. I pasted your code into my editing tool, which has automatic error detection, and it said there is a closing bracket missing at the end.

Here is the corrected code:

firstCalled: function() {

    $.ajax({                           
        url: "XXX",
        async: false,
        success: function(response) {

            var isCheck;
            $.ajax({                           
                url: "YYY",
                async: false,
                success: function(response) {
                    // UPDATE SOMETHING

                    isCheck = response; // respone either true/ false
                }
            });

            if(isCheck =="true"){
                $(".search").click(); 
            }else{
                alert("ERROR");
            }
        }
    });
}

I assume this code is a part of an object list? If not, you need to define it some other way. I'm talking about this syntax here:

firstCalled: function() {}

This syntax is only valid when indicating a field in an object. If you're defining a normal function this won't work. So a correct usage would be:

var my_object: {
    firstCalled: function() {/*a bunch of code*/},
    some_property: "string value"
}

then you could call the function like so:

my_object.firstCalled();

but if you just want a normal function name you must do:

function firstCalled() {
    /*code*/
}

or

var firstCalled = function() {
    /*code*/
}

What different between complete and success?

I confuse every method need to be success in order to get return message..... why complete exist?

Thanks

Originally Posted by fsloke

What different between complete and success?

I confuse every method need to be success in order to get return message..... why complete exist?

To understand this, you need to realize that when you make an AJAX call, you are making a complete HTTP request to the server. HTTP protocol, under normal circumstances, requires that the client wait for the transmission of data to be complete before processing it. The "A" in AJAX stands for Asynchronous, which means occurring independently in the main line of logic. Because the time that it takes to receive the result of the HTTP request is non-deterministic, if it it was the opposite (Synchronous), it would lock all other logic while waiting for the results to be transmitted, which is usually not what we want.

So this means, there is always a function defined to deal with the results of an AJAX call, if you need to know the results. In jQuery this is handled by either the success or complete options. The success function only fires if the request is completed successfully, while the complete function will fire when the HTTP request completes, even if it fails. Since there will be no data upon failure, normally you should be using success.

However, I usually use shorthand methods, which are easier to nest, and easier (to me) to read:

$.get('/path/to/script.php',//URL to send to
    {param1: 'somedata', param2: 'somedata'},//data to send
    function(data) {//success function
        if(data) {//only execute next AJAX call if data exists
            $.get('path/to/script2.php'),//second URL to send to
            {param1: data},//second data to send
            function(data) {//second success function
                //do something with resulting data of nested AJAX call
            }
        }
    }
);

$.get is shorthand for making an HTTP GET request. $.post can be used for POST requests. $.get $.post

$.load can be used if you just need to insert something into the DOM: $.load