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.
LVL 4
claracruzAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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?
claracruzAuthor Commented:
I have xmlHttp declared as global.

So I understand why the problem is occuring, but how do I resolve it
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
TimYatesCommented:
(you can then get rid of the stateChangedForOpt() function)
claracruzAuthor Commented:
Its still only updating the text box in the last form....
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.