Question

I’m deleting a previously asked question and asking again more succinctly now that I have a bit more understanding of the problem.

I have a page that uses a lot of AJAX and is updated and dynamically populated with content (form elements and div’s with text returned from other form element).

I really need to be able force users to wait until AJAX requests are processed (for example after they have completed a text field that has submitted some values) before they continue. From what I gather using synchronous requests can cause problems with the browser hanging etc…

I also need to have a javascript function that executes multiple AJAX function calls but i also need them to execute one at a time. Currently using asynchronous calls produces unpredictable results… maybe I’m going about this the wrong way. There is a lot of code so it’s hard to provide a short example but I’ll give it a try below:

The from below (which is itself inserted by an Ajax function) dynamically adds more form elements to the page if it is the first time the input has been edited (first time the content is written to the database… subsequently it will just update the existing db entry and I don’t need to add the additional form items)

   <form name='talkItemForm' id='talkItemFrom-<?php print $_POST[talkItemID]; ?>' class='talkItemForm' method='post'>

   <input type='hidden' id='talkItemID' name='talkItemID' value='<?php print $_POST[talkItemID]; ?>'><input type='hidden' id='talkID' name='talkID' value='<?php print $_POST[talkID]; ?>'>

   <input type='text' name='talkItemInput' id='talkItemInput' value='New Topic...'  onblur=" updateTalkItem(this.parentNode, '<?php print $_POST[talkID]; ?>', '<?php print $_POST[talkItemID]; ?>'); isNewTalkItem('<?php print $_POST[talkID]; ?>', '<?php print $_POST[talkItemID]; ?>', '<?php print generateTalkItemID()+1; ?>','<?php print generateNoteID(); ?>'); "/>

   </form>

Invokes:

   function isNewTalkItem (talkID, talkItemID, newTalkItemID, newNoteID){

      var url = "./wp-content/themes/twentyten/addBelowIfNew.php";

      var poststr = "talkItemID=" + talkItemID;

      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
            // set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }

      http_request.onreadystatechange = function(){


           if (http_request.readyState == 4) {
               if (http_request.status == 200 || http_request.status == 0) {

                  result = http_request.responseText;

        //following code will note execute if this is not the first time this field has been edited... 
        if (result) {

                        // call to AJAX function that inserts a new <form>
            newNote(newNoteID, talkItemID);

                        // another call to AJAX function that inserts a new <form>
            newTalkItem(talkItemID, talkID);

        }

               } else {
                  alert('There was a problem with the request.');
               }

           }

      }    

      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", poststr.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(poststr);

Answer 1

When I first stared to answer this question I incorrectly assumed you were using ajax. As Mikhail stated, you should really learn that, it makes things much easier, simpler, and cleaner

I think I can pretty much answer both of your questions with similar answers.

As far as the first question, you’re right, doing synchronous requests will lock up the browser process while it waits for the request to return. What you can do is either make it so the next part of the UI is invisible while you wait for the results to return or make it uneditable. Here is an example of an ajax request that could do that:

$.ajax({ url: “test.html”, context: document.body, success: function(){
// make ui editable
}});

Similarly, for your second question, you can just nest them:

$.ajax({ url: “test.html”, context: document.body, success: function(){

$.ajax({ url: "test.html", context: document.body, success: function(){

      $.ajax({ url: "test.html", context: document.body, success: function(){

          $(this).addClass("done");

      }});

   }});

}});