CodingForums.com - Ajax call within for loop

CodingForums.com (http://www.codingforums.com/index.php)

- Ajax and Design (http://www.codingforums.com/forumdisplay.php?f=55)

- - Ajax call within for loop (http://www.codingforums.com/showthread.php?t=282589)

Ajax call within for loop

I have an exam (tomorrow) that covers html, javascript, ajax, php, mysql and apache. I have been going over previous exams and one of the q's is to write the code for a program that displays an order form, but I am stuck on is the Ajax to keep the total (prices) box updated as amounts of products are ordered.

I have it working, but only if an amount is typed in once. In my solution if someone goes and changes an amount (say from 1 to 3) then it will add the price of 3 more of that product obviously not an ideal solution. I realise that a loop needs to be added, but after many hours of trying I can't get it to work properly. I realise this exact problem won't be in the exam but I would like to get my head around it as there will be something similar.

In the actual html code the form is created dynamically, according to what is in the database. The text box is generated with the id of the product as the text box id and the name is amt[] so that these can be sent to getTotal.php to work out the cost.

Here is the javascript/ajax that is activated on the onchange of textbox

Code:

function getAmt(txtBox){ //in solution won't need to use this text box



    var xhr = new XMLHttpRequest();

    var id = txtBox.id; //id from the textbox - in solution won't need these two

    var amt = txtBox.val; //value that has been typed into the textbox



    var total = document.getElementById("total").value; //get current total value



    xhr.onreadystate = function(){

        

        if(xhr.readyState==4 && xhr.status == 200)

        {

              var result = xhr.responseText;

              document.getElementById("total").value = result;//place new total in form

         }



    }

    xhr.open("GET", "getTotal.php?amt="+amt+"&id="+id+"&tot="+tot);

    xht.send(null);

}

To get what I want, which is instead of using the current total and only the current text box, is that everytime there is a change to process each text box and overwrite the total with a new total.
To do this I don't have the pass the txtBox value as I need to loop through all of the id's & values from amt[]
This code does that:

Code:

var arrayAmt = document.getElementsByName("amt[]");

var id;

var amt;

for(i=0; i<arrayAmt.length; i++)

{

      id = arrayAmt[i].id;

      amt = arrayAmt[i].value;

}

I am just stumped of where to put the for loop, or what part of the ajax call goes inside the loop.

I tried many different formats yesterday, and lost lots of study time.

I would really appreciate any suggestions on how to make this work

Cheers

First of all, the callback for ajax is .onreadystatechange and not .onreadystate

Then you need to understand the concept of asynchronous requests. The normal Javascript program flow will continue while the request is still running. That also means that you cannot just put a sequence of Ajax calls into a for loop just like that. It would immediately try to create all of the requests (and not one by one!) which would only allow the last one to succeed ... because it's the only one that wouldn't immediately be overwritten by a new one.

Solution: You'll have to "loosen" the loop. So forget about the for loop and keep a separate counter. Then you start the request for the first index value. Only in the callback (for readyState==4) you increase the counter, check if you are already finished with counting and start the next request if necessary.

General approach:

Code:

var counter = 0;

var arrayAmt = document.getElementsByName("amt[]");

var id = arrayAmt[counter].id;

var amt = arrayAmt[counter].value;

var xhr = new XMLHttpRequest();

getAmt(id, amt);



function getAmt(id, amt){ //in solution won't need to use this text box



    var total = document.getElementById("total").value; //get current total value



    xhr.onreadystatechange = function(){

        

        if(xhr.readyState==4 && xhr.status == 200)

        {

              var result = xhr.responseText;

              document.getElementById("total").value = result;//place new total in form

              counter++;

              if(counter<arrayAmt.length) {

                 id = arrayAmt[counter].id;

                 amt = arrayAmt[counter].value;

                 getAmt(id, amt);

              }

         }



    }

    xhr.open("GET", "getTotal.php?amt="+amt+"&id="+id+"&tot="+tot);

    xht.send(null);

}

Thanks for your reply

I tried the code but now it skips over the if statement.

Anyway, we were never shown how to implement something like this (actually we weren't shown much at all) so hopefully it won't be in the exam The past exam we have been give was from 2 years ago.

I think that I'll keep plodding along (750 lecture slides to try to remember) and hopefully there is more PHP than Ajax :)

cheers

Yeah there was (at least) one more problem in your code above:

You stored the current total in "total" but in the parameters for the Ajax call you appended it as "&tot=" + tot

I did fix the problems, but thanks for pointing out.

Cheers