• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 223
  • Last Modified:

Ajax Javascript Loop Help

Hello experts,

I have three forms that with a textbox that need to be updated when a form from a first form is clicked.

The problem is that this only works properly when I am testing the values of variables with an alert prompt like so:-

     function getPrice(storage_option_id, product_id)
     {
     var x = storage_option_id;
     arrX = x.split('#')
     storage_option_id = arrX[1];
     
     
     var i = 1 ;
    var running = true ;
    while( running )
    {
        var product_size_id = document.getElementById( 'psID' + i ) ;
          var storage_type_id = document.getElementById( 'z' + i );
          var base_id = document.getElementById( 'b' + i );
        if( product_size_id )
        {
            size_id = product_size_id.value;
               storage_type_id = storage_type_id.value;
               base_id = base_id.value;
               //proceed as normal
               var url="getprice.asp?sid=" + Math.random() + "&o=" + product_id + "&p=" + size_id + "&q=" + storage_type_id + "&r=" + base_id + "&s=" + storage_option_id + "&formCnt=" + i
               alert(url) <-----------------------------------TESTING VALUE OF 'url'
               xmlHttp=GetXmlHttpObject(stateChangedForOpt)
               xmlHttp.open("GET", url , true)
               xmlHttp.send(null)
        }
        else
        {
            running = false ;
        }
        i++ ;
    }
     }
     
     
     
     function stateChangedForOpt()
     {
          if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
          {
               var t = xmlHttp.responseText;
               arrtT = t.split('#')
               var i = 1 ;
               var price = document.getElementById( 'price' + arrtT[1]);
               price.value = '£' + arrtT[2];
          }
     }

But when I remove the alert prompt, only the textbox in the last form gts updated.
0
claracruz
Asked:
claracruz
  • 6
  • 2
1 Solution
 
TimYatesCommented:
It's because the alerts slow things down so each call fires one after the other...

Looks like currently, call 2 is overriding call 1, call 3 is overriding #2, and that's why only the last one gets evaluated...

You haven't declared xmlHttp as global have you?
0
 
claracruzAuthor Commented:
I have xmlHttp declared as global.

So I understand why the problem is occuring, but how do I resolve it
0
 
TimYatesCommented:
Don't declare it as global...

Remove the:

    var xmlHttp ;

line you probably have at the top level of your script, and change you AJAX request code from:

               xmlHttp=GetXmlHttpObject(stateChangedForOpt)
               xmlHttp.open("GET", url , true)
               xmlHttp.send(null)

to:

               var xmlHttp=GetXmlHttpObject( function()
               {
                   if( xmlHttp.readyState == 4 && xmlHttp.status == 200)
                   {
                       var t = xmlHttp.responseText;
                       arrtT = t.split('#')
                       var i = 1 ;
                       var price = document.getElementById( 'price' + arrtT[1]);
                       price.value = '£' + arrtT[2];
                   }
               } )
               xmlHttp.open("GET", url , true)
               xmlHttp.send(null)

That *should* work...

*crosses fingers*

Tim
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
TimYatesCommented:
Sorry...

I meant:

               var xmlHttp=GetXmlHttpObject( function()
               {
                   if( xmlHttp.readyState == 4 && xmlHttp.status == 200 )
                   {
                       var t = xmlHttp.responseText ;
                       arrtT = t.split('#') ;
                       var i = 1 ;
                       var price = document.getElementById( 'price' + arrtT[1]) ;
                       price.value = '£' + arrtT[2] ;
                   }
               } ) ;
               xmlHttp.open("GET", url , true) ;
               xmlHttp.send(null) ;

(added semi-colons)

Tim
0
 
TimYatesCommented:
(you can then get rid of the stateChangedForOpt() function)
0
 
claracruzAuthor Commented:
Its still only updating the text box in the last form....
0
 
TimYatesCommented:
Hmmmm....

One possible solution is to turn off the asynchronous flag on the call:

               xmlHttp.open( "GET", url , false ) ; // get url synchronously...

I will keep searching for a way of doing it asynchronously without each loop overwriting the last :-/

Tim
0
 
TimYatesCommented:
http://www.drakware.com/articles/multijax.php

Shows a method of using an array to keep many simultaneous asynchronous requests going at the same time as well ;-)

Tim
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now