[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 217
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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