Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #22754 > unrolled thread

Wait between different Calls (procedures)

Back to article view | Back to comp.lang.javascript

Contents

  Wait between different Calls (procedures) frank.catry@gmail.com - 2014-01-23 00:20 -0800
    Re: Wait between different Calls (procedures) "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-01-23 11:06 +0100
    Re: Wait between different Calls (procedures) Christoph Michael Becker <cmbecker69@arcor.de> - 2014-01-23 17:26 +0100
      Re: Wait between different Calls (procedures) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-24 02:05 +0100
        Re: Wait between different Calls (procedures) Christoph Michael Becker <cmbecker69@arcor.de> - 2014-01-24 02:44 +0100
          Re: Wait between different Calls (procedures) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-25 12:01 +0100
    Re: Wait between different Calls (procedures) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-24 02:54 +0100
      Re: Wait between different Calls (procedures) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-25 18:03 +0100

#22754 — Wait between different Calls (procedures)

Hi,

i have to populate 3 <select></selects> dom's regarding the content of the database. Wehn the user wish to update a record. In my case Class, Make and model of a car.
However when i try to execute the 3 getContent calls on the bottom of the code it doesn't work. One by one is oké. 
How can i put a WAIT till finished between the getContent calls ?
Frank.

<?
//data from the database;
$oriClasse="Car";
$oriMake="BMW";
$oriModel="118";
?>

<script type="text/javascript">

var domObj="";

function getContent(theDom,theUrl){

ajaxObj = GetXmlHttpObject(); 
domObj=theDom; 
ajaxObj.open("GET", theUrl , true);
ajaxObj.onreadystatechange=updateDom;
ajaxObj.send(null);
}

function updateDom(){
    if (ajaxObj.readyState == 4 || ajaxObj.readyState == "complete"){
        document.getElementById(domObj).innerHTML=ajaxObj.responseText;
    }
}


function GetXmlHttpObject () {
var xmlHttp = null;
 try {
   // Firefox, Opera 8.0+, Safari, IE 7+
   xmlHttp = new XMLHttpRequest();
 } catch (e) {
   // Internet Explorer - old IE - prior to version 7
   try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
 } 
return xmlHttp;
}

getContent('theClasses','getClasses.php?key=<?=$oriClasse?>');
//Wait ??
getContent('theMakes','getMakes.php?key=<?=$oriClasse?>&dbvalue=<?=$oriMake?>');
//Wait ??
getContent('theModels','getModels.php?key=<?=$oriMake?>&dbvalue=<?=$oriModel?>');

</script>

[toc] | [next] | [standalone]

#22755

frank.catry@gmail.com wrote on 23 jan 2014 in comp.lang.javascript:

> Hi,
> 
> i have to populate 3 <select></selects> dom's regarding the content of
> the database. Wehn the user wish to update a record. In my case Class,
> Make and model of a car. However when i try to execute the 3 getContent
> calls on the bottom of the code it doesn't work. One by one is oké. How
> can i put a WAIT till finished between the getContent calls ? Frank.
> 
> <?
> //data from the database;
> $oriClasse="Car";
> $oriMake="BMW";
> $oriModel="118";
> ?>

Please do not use strange languages in this NG,
I for one do not want to understand them.

> 
> <script type="text/javascript">
> 
> var domObj="";
> 
> function getContent(theDom,theUrl){
> 
> ajaxObj = GetXmlHttpObject(); 

The variable ajaxObj gets overwritten by the second call,
before ajaxObj.onreadystatechange=updateDom; materializes.


> domObj=theDom; 

Also this variable gets overwritten.

The solution is to make the 3 calls each have their own functions with 
variables, you need them as globals in function updateDom,
or to call them with suitable timeOuts.

The first solution was tried by me and has theoretical advantages.

> ajaxObj.open("GET", theUrl , true);
> ajaxObj.onreadystatechange=updateDom;
> ajaxObj.send(null);
>}
> 
> function updateDom(){
>     if (ajaxObj.readyState == 4 || ajaxObj.readyState == "complete"){
>         document.getElementById(domObj).innerHTML=ajaxObj.responseText;
>     }
>}
> 
> 
> function GetXmlHttpObject () {
> var xmlHttp = null;
>  try {
>    // Firefox, Opera 8.0+, Safari, IE 7+
>    xmlHttp = new XMLHttpRequest();
> } catch (e) {
>    // Internet Explorer - old IE - prior to version 7
>    try {
>       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
>    } catch (e) {
>       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
>    }
> } 
> return xmlHttp;
>}
> 
> getContent('theClasses','getClasses.php?key=<?=$oriClasse?>');
> //Wait ??
> getContent('theMakes','getMakes.php?key=<?=$oriClasse?>&dbvalue=<?=$oriMa
> ke?>'); //Wait ??
> getContent('theModels','getModels.php?key=<?=$oriMake?>&dbvalue=<?=$oriMo
> del?>'); 
> 
> </script>
> 
> 
> 



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#22761

frank.catry@gmail.com wrote:

> i have to populate 3 <select></selects> dom's regarding the content
> of the database. Wehn the user wish to update a record. In my case
> Class, Make and model of a car. However when i try to execute the 3
> getContent calls on the bottom of the code it doesn't work. One by
> one is oké. How can i put a WAIT till finished between the getContent
> calls ?

Short answer: in a browser environment you can't, cf. "How do I make a
10 second delay?"[1].

In your case you could use synchronous XHR, but that's usually not a
good idea.  Evertjan has already pointed out why your code does not work
as expected, and some ideas on how to fix it.  Yet another alternative
*might* be to trigger only a single XHR which receives the values of
class, make and model in a single JSON object, which can be used to
build up the selects with DOM methods.

[1] <http://pointedears.de/scripts/faq/cljs/#setTimeout>

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#22769

Christoph Michael Becker wrote:

> frank.catry@gmail.com wrote:
>> i have to populate 3 <select></selects> dom's regarding the content
>> of the database. Wehn the user wish to update a record. In my case
>> Class, Make and model of a car. However when i try to execute the 3
>> getContent calls on the bottom of the code it doesn't work. One by
>> one is oké. How can i put a WAIT till finished between the getContent
>> calls ?
> 
> Short answer: in a browser environment you can't, cf. "How do I make a
> 10 second delay?"[1].

Does the FAQ entry really say that?  If yes, it is incomplete, at best.

Any waiting can be implemented by moving all parts of the program that need 
to be waited for into the function body of a function called by 
window.setTimeout().

In this case, however, the next getContent() call simply needs to be placed 
into the success event listener assigned by calling the previous one.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#22770

Thomas 'PointedEars' Lahn wrote:

> Christoph Michael Becker wrote:
> 
>> frank.catry@gmail.com wrote:
>>> i have to populate 3 <select></selects> dom's regarding the content
>>> of the database. Wehn the user wish to update a record. In my case
>>> Class, Make and model of a car. However when i try to execute the 3
>>> getContent calls on the bottom of the code it doesn't work. One by
>>> one is oké. How can i put a WAIT till finished between the getContent
>>> calls ?
>>
>> Short answer: in a browser environment you can't, cf. "How do I make a
>> 10 second delay?"[1].
> 
> Does the FAQ entry really say that?  If yes, it is incomplete, at best.

No.  Actually, the FAQ says what you're explaining in the following
paragraph.  However, I was referring to the last "paragraph" of the OP
(which I had quickly reformatted to get rid of the flowed format --
Google Groups, sigh), and the code that was posted there (which I had
snipped for the same reasons):

| How can i put a WAIT till finished between the getContent calls ?

| getContent('theClasses','getClasses.php?key=<?=$oriClasse?>');
| //Wait ??
| getContent('theMakes',
|    'getMakes.php?key=<?=$oriClasse?>&dbvalue=<?=$oriMake?>');

I should have added a caveat regarding using Google Groups and a link to
"Posting Questions and Replies to comp.lang.javascript"[1], though.

> Any waiting can be implemented by moving all parts of the program that need 
> to be waited for into the function body of a function called by 
> window.setTimeout().
> 
> In this case, however, the next getContent() call simply needs to be placed 
> into the success event listener assigned by calling the previous one.

[1] <http://pointedears.de/scripts/faq/cljs/notes/posting/>

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#22782

Christoph Michael Becker wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Christoph Michael Becker wrote:
>>> frank.catry@gmail.com wrote:
>>>> i have to populate 3 <select></selects> dom's regarding the content
>>>> of the database. Wehn the user wish to update a record. In my case
>>>> Class, Make and model of a car. However when i try to execute the 3
>>>> getContent calls on the bottom of the code it doesn't work. One by
>>>> one is oké. How can i put a WAIT till finished between the getContent
>>>> calls ?
>>>
>>> Short answer: in a browser environment you can't, cf. "How do I make a
>>> 10 second delay?"[1].
>> 
>> Does the FAQ entry really say that?  If yes, it is incomplete, at best.
> 
> No.  Actually, the FAQ says what you're explaining in the following
> paragraph.  However, I was referring to the last "paragraph" of the OP
> (which I had quickly reformatted to get rid of the flowed format --
> Google Groups, sigh), and the code that was posted there (which I had
> snipped for the same reasons):
> 
> | How can i put a WAIT till finished between the getContent calls ?
> 
> | getContent('theClasses','getClasses.php?key=<?=$oriClasse?>');
> | //Wait ??
> | getContent('theMakes',
> |    'getMakes.php?key=<?=$oriClasse?>&dbvalue=<?=$oriMake?>');

As you can see further below, I was aware of the OP’s complete code when I 
wrote this, so this is not a matter of missing context.  The problem is that 
the OP’s “WAIT till finished” is based on the misconception that the 
function does not return before the requested response has been received.  
AFAICS, nobody else had pointed that out clearly:

You have said that it would not be possible, only possible with synchronous 
XHR (which you recommended correctly to avoid), or a single XHR.  Evertjan. 
has pointed out essentially that the function returns before the response is 
received, and offered a stable, but rather memory-inefficient solution of 
three XHR objects, and the unreliable “solution” of window.setTimeout().

None of you has considered the possibility that the same XHR object could be 
reused, if necessary, if the following requests were triggered by the 
success of receiving the response for the previous one, and each request 
could still be handled asynchronously.  See my other answer.

> I should have added a caveat regarding using Google Groups and a link to
> "Posting Questions and Replies to comp.lang.javascript"[1], though.

I suppose you could have, but why?

>> […]ny waiting can be implemented by moving all parts of the program that
>> need to be waited for into the function body of a function called by
>> window.setTimeout().
>> 
>> In this case, however, the next getContent() call simply needs to be
>> placed into the success event listener assigned by calling the previous
>> one.
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#22771

frank.catry@gmail.com wrote:
^^^^^^^^^^^^^^^^^^^^^
Please add your real name.

> i have to populate 3 <select></selects> dom's regarding the content of the
> database. Wehn the user wish to update a record. In my case Class, Make
> and model of a car. However when i try to execute the 3 getContent calls
> on the bottom of the code it doesn't work.

“Doesn't work” is not a problem description.  

Please read <http://PointedEars.de/faq#posting> pp.

> One by one is oké. How can i
> put a WAIT till finished between the getContent calls ?

You cannot.  However, what you really appear to be asking for is how you can 
call a function only after the response requested through a previous 
function call has been received.  In that case, it is rather simple:
Make the next function call *only then*.

Your code, although already error-prone, and hard to read due to lack of a 
consistent code style, could be adapted only slightly as follows:
 
> <?

This should always be

  <?php

Also, if possible, set short_open_tag = Off in php.ini, and use PHP 5.4+ 
instead where you do not need it for <?= … ?> anymore.  If you are still 
using PHP < 5.3, you should upgrade ASAP for security and other reasons.

> //data from the database;
> $oriClasse="Car";
> $oriMake="BMW";
> $oriModel="118";
> ?>
> 
> <script type="text/javascript">

  var req = {
    data: <?= json_encode(array(
      array(
        'id'  => 'theClasses',
        'uri' => "getClasses.php?key={$oriClasse}"
      ),
      array(
        'id'  => 'theMakes',
        'uri' => "getMakes.php?key={$oriClasse}&dbvalue={$oriMake}"
      ),
      array(
        'id'  => 'theModels',
        'uri' => "getModels.php?key={$oriMake}&dbvalue={$oriModel}"
      )
    )); ?>,

    index: -1,

    getNextItem: function () {
      var _data = this.data;
 
      if (this.index < _data.length - 1)
      {
        return _data[++this.index];
      }

      return null;
    }
  };

  var req_item = req.getNextItem();

All your other functions could/should become methods of this or another 
object.

Do not forget to escape your input.

> var domObj="";
> 
> function getContent(theDom,theUrl){
> 
> ajaxObj = GetXmlHttpObject();
> domObj=theDom;
> ajaxObj.open("GET", theUrl , true);
> ajaxObj.onreadystatechange=updateDom;
> ajaxObj.send(null);
> }
> 
> function updateDom(){
>     if (ajaxObj.readyState == 4 || ajaxObj.readyState == "complete"){

What is the DOM implementation where XHR::readyState is a *string* value?

>         document.getElementById(domObj).innerHTML=ajaxObj.responseText;

      if ((req_item = req.getNextItem()))
      {
        getContent(req_item.id, req_item.uri);
      }

>     }
> }
> 
> 
> function GetXmlHttpObject () {
> var xmlHttp = null;
>  try {
>    // Firefox, Opera 8.0+, Safari, IE 7+
>    xmlHttp = new XMLHttpRequest();
>  } catch (e) {
>    // Internet Explorer - old IE - prior to version 7
>    try {
>       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
>    } catch (e) {
>       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
>    }
>  }
> return xmlHttp;
> }

  getContent(req_item.id, req_item.uri);

However, if you only create a new XHR object when a request still is in 
progress, you can increase speed and save memory.  In that case you can keep 
your calling code as it is but you probably have to write or use an XHR 
wrapper.  See also <http://PointedEars.de/wsvn/JSX/trunk/https.js> for one.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#22783

Thomas 'PointedEars' Lahn wrote:

> However, if you only create a new XHR object when a request still is in
> progress, you can increase speed and save memory.  In that case you can
> keep your calling code as it is but you probably have to write or use an
> XHR wrapper.  See also <http://PointedEars.de/wsvn/JSX/trunk/https.js> for
> one.

I got carried away a bit ;-)

The correct URI is <http://PointedEars.de/wsvn/JSX/trunk/http.js>

However, my Web site is down since Thursday/Friday for yet unknown reasons.  
That not only affects access to my code repositories, but also the FAQ for 
comp.lang.javascript at <http://PointedEars.de/faq>.  I am working on fixing 
the problem ASAP.

In the meantime, please use cached versions like

<http://webcache.googleusercontent.com/search?q=cache:j10gCNMXKYwJ:pointedears.de/faq+&cd=1&ct=clnk>

Sorry for the inconvenience.

-- 
PointedEars, ed.

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web