Returned value from first Ajax call is not shown in the second ajax call

Question

Hi,

I am new to JQuery and Ajax

I am trying to use the value returned from the Ajax call to the another Ajax call. Example:

$.ajax({
    type: "POST",
    url: "http://localhost/FormBuilder/index.php/forms/saveForm/",
    async: false,
    data: "formname="+formname+"&status="+status,
    success: function(msg){
        //alert( "Data Saved: " + msg);                         
        getformid=msg; 
    }//success
});//ajax 

$("#fb_contentarea_col1down21 div").each(function() { 
    alert("Form id "+getformid);//alerts me the Formid returned from the Cakephp controller side
    var checked="false";
    var id=$(this).attr("id");
    var fsize=$("#input"+id+"").width();
    var ftype=$("#input"+id+"").attr('data-attr');
    var finstr=$("#instr"+id+"").text();
    var fname=$("#label"+id+"").clone().html().replace(/<span.*/,'');
    if($("#label"+id+"> span.req").length > 0)
    {
        checked="true";
    }

    $.ajax({
        type: "POST",  
        async: false,
        url: "http://localhost/FormBuilder/index.php/forms/saveField",
        data: "sequence_no="+id+"&name="+fname+"&type="+ftype+"&size="+fsize+"&instr="+finstr+"&formid="+getformid+"&required="+checked,
        success: function(msg){
               //alert( "Data Saved: " + msg);
        }//success
    });//ajax
});//DIV    

The first Ajax call returns the form ID and even alerts it correctly in the div, but the returned value in getformid is not reflected in the second ajax call. Please tell me what's going wrong.

Edit: Resolved the error. The cause is not in my Ajax calls at all its in my Cakephp controller where i return only my form id and not the form instance. I have changed and got the answer. Thanks for every one who helped.

Answer 1

EDIT : I just realized you are doing synchronous (not-A)jax queries ?

I say this because you are using

async: false,

in both your Ajax requests

This means the browser of your users will freeze as long as each request is being done ; you really should think twice about that : if your server is not really really fast, your users will think "this website is crap, it's freezin my browser"

See http://docs.jquery.com/Ajax/jQuery.ajax#options :

By default, all requests are sent asynchronous (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

---

This only applies if doing asynchronous requests :
And, so, is probably not the problem right now ; but it will become relevant if you change your request to asynchronous, so I'm not deleting it.

Ajax means, before anything else, Asynchronous : the Ajax request is done in the background, while the rest of the page/script continues its execution.

This means :

• you start the first Ajax request
• it's done in the background
• while it's being done in the background (as executing a couple of lines of JS code is much faster than doing a request to the server), the JS code continues its execution
  • the first Ajax query probably isn't finished when you start the second one.

What is probably happening, is your case, is that getformid is only set when the first Ajax query is finished -- which is after the second one has already started.

If you want the second Ajax query to be started only when the first one is finished, the second Ajax query must be launched by the function hooked on the "success" event of the first one (instead of assigning "msg" to "getformid") : just putting it "after in the source" will not be enough.