Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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);
    }
    Last edited by devnull69; 11-20-2012 at 09:47 AM.

  • Users who have thanked devnull69 for this post:

    aussie_flo (11-20-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I did fix the problems, but thanks for pointing out.

    Cheers


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •