maintain function order in jQuery ajax callback function

Question

I have a jQuery ajax function. the callback function consists of two functions:

1) Take the ajax result (which is an html form) and insert it as an html span's inner html. 2) Submit this form

How can I ensure that the form is loaded before JavaScript tries to submit it?

Code:

$("select").live("change", function(){
  FormUpdate();
})

function FormUpdate() {

  $.ajax({
  type: "POST",
  url: "index.php?UpdateForm=Yes",
  data: $("#Form").serialize(),
  success: function(msg){
    $("span#Content").html(msg);
    $("#Form").submit();
  }
  });

}

My problem comes because javascript tries to submit the form before it has loaded and my data submitted.

Answer 1

DOM manipulations are synchronous so the form wont be submitted until afterwards. Are you having a specific problem with this scenario? Please post tons of code, if so :)

Answer 2

Just simply put the function for taking ajax result and insert into the DOM in front and the form submission function at the back.

Only after insertion is done, the next function will be called.

Example:

$.ajax({
   type: "POST",
   url: "backend.php",
   data: "name=John",
   dataType: "json"
   success: function(msg){
     $("#thediv").html(msg.html);
     $("form#theform").submit();
   }
 });