Use of variable in the Ajax post

Question

In my application I am using Ajax post like:

$('#fb_contentarea_col3 #fb_contentarea_col1down2 #saveForm').live("click", function() {
  if (!$("#formName").val() == "") {
    if (saveDraft == 'on')
      status = "Incompleted";
    else
      status = "Completed";

    var formname = $("#formName").val();
    $.ajax({
      type: "POST",
      url: "http://localhost/FormBuilder/index.php/forms/saveForm/",
      async: false,
      data: "formname=" + formname + "&status=" + status,
      success: function(msg) {
        getformid = msg;
        //returned FOrm id is saved in the JQuery variable
      }
      //success
    });
    //ajax

    $("#fb_contentarea_col1down21 div").each(function() {
      alert("Form id " + getformid);
      //alerts me the Form id retrieved
      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",
        url: "http://localhost/FormBuilder/index.php/forms/saveField",
        async: false,
        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
    }
    //for each DIv in mu design page i am saving them as Field
  }
  //if formname exists
}
//saveForm

The Form id as returned from the Controller side is saved in the variable getformid correctly, But it is not reflected in the savefield ajax post..And it is saving as 0 only even it alerts as the returned Form id..Please suggest me..

Note ::the question is a reference to

http://stackoverflow.com/questions/1264343/varaibles-inside-success-function-of-ajax-post

In addition I am giving here the Code in my Controller for saveForm

function saveForm()
{
  $this->data['Form']['name']=$this->params['form']['formname'];
  $this->data['Form']['created_by']=$this->Session->read('userId');
  $this->data['Form']['status']=$this->params['form']['status'];
  $this->data['Form']['access']="Private";
  $formId=$this->Form->saveForms($this->data);

  $this->set('formId',$formId);
}

And my Model saveForms is like

function saveForms($data)//design saveForm
{
  $this->data['Form']['name']=$data['Form']['name'];
  $this->data['Form']['created_by']=$data['Form']['created_by'];
  $this->data['Form']['status']=$data['Form']['status'];
  $this->data['Form']['access']=$data['Form']['access'];
  $this->save($this->data);
  return $this->id;//returns the saved Form id to the controller
}

And my save_form.ctp in my views folder is like

<?php echo $formId;?>

Answer 1

You're setting getformid inside the success handler for the AJAX call, but the code that's using getformid is outside that function.

Never forget that the moment you call something like $.ajax, the function returns — immediately, before the AJAX call has completed, and certainly before your success function has run. That's what makes it asynchronous.

Thus, any code you want to have executed after the AJAX request is completed has to go inside that success function (or in another function that's called from inside success, of course).

Answer 2

You can create a function and pass that around like a parameter. For instance:

function param() {
    this.array = new Array(1);
    this.setValue = function(v) { this.array[0] = v; }
    this.getValue = function() { return this.array[0]; }
}

and then in your ajax request. do something like follows:

var formId = new param;
$.ajax({
    type: "POST",
    url: "http://localhost/FormBuilder/index.php/forms/saveForm/",
    async: false,
    data: "formname="+formname+"&status="+status,
    success: function(msg){
          formId.setValue(msg);
    }//success
)};

You can then access the value that was set by calling the getValue() method of the formId variable