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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Dec 2011
    Posts
    186
    Thanks
    0
    Thanked 1 Time in 1 Post

    When 2 js "snippets" are run onload - 1 runs the other aborts - full code shown

    There are two javascript snippets that are incompatible because of a mistake I made somewhere. Both are written to run on page load. Only one runs, the other aborts. Firebug shows one aborting.

    The snippet with these lines highlighted in red below works when the snippet with the line highlighted in green is commented out:
    Code:
    request.open("POST", "/cgi-bin/check_apts_onload_with_just_apt_time.php", true);
    
    //request.open("POST", "/cgi-bin/css_display_or_not_onload.php", true);
                 //request.onreadystatechange = function()
    When the snippet with the green line is commented out, the snippet with the red line of code runs.

    When the snippet with the red line of code is commented out, the code with the green line of code runs.

    Each runs when the other is commented out. When neither are commented out, the red one aborts.

    The green snippet wants to manipulate the css in this line, highlighted in green in the large block of code below:
    Code:
    <ul id="May120128AM_list" style="display: block;"> 
    The full code:
    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    <title>My Web Page</title>
    <style type="text/css">
    .horizontal ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    
    body {margin: 10em;}
    
    #form {margin: 1em 1em;l}
    
    #answer {
    padding: .2em .2em;
    margin: .5em 0 .5em 0;
    }
    
    .horizontal ul li { 
    display: inline;
    width: 200px;
    height: 50px;
    background: #ccc; 
    text-align: center;
    padding: .3em;
    }
    </style>
    
    <script src="/A2EB891D63C8/avg_ls_dom.js" type="text/javascript"></script><script type="text/javascript"> 
      <!--
      var request;
        request = new XMLHttpRequest();
       //try { request = new XMLHttpRequest();
       //} catch (e) {
         //if(request=undefined) alert('e.message');
         //}
        //if(request)
        //{
         // alert('Ajax Object Created');
        //}
    //-->
    </script>
    </head>
    
    <body>
    <noscript>Please Enable Javascript</noscript>
    
    
          <p>Friday June 8  2012</p> 
    <p>Your Local Time:<SPAN>&nbsp&nbsp&nbsp&nbsp<SPAN id='showtimehere'></SPAN></p>
         
    <script type="text/javascript"> 
    <!--
    function showtime()
    {
    var Donut = new Date();
    var day = Donut.getDate(); //returns day of month (1-31)
    var year = Donut.getFullYear(); //returns year (xxxx)
    var hours = Donut.getHours(); //returns hours (0-23)
    var dn = "AM";
    if(hours>=12)
    {
    dn="PM"
    hours = hours-12
    }
    if(hours==0)
    {
    hours=12
    }
    var minutes = Donut.getMinutes(); //returns minutes (0-59)
    if(minutes<=9)
    {
    minutes = "0"+minutes
    }
    var time = hours+":"+minutes+" "+dn;
    document.getElementById('showtimehere').innerHTML = time;
    setTimeout("showtime()", 60000);
    }
    showtime();
    //if(minutes==00)
    //{
    //var datetime = month+day+year+hours+dn;
    //-->
    </script>
    
    <div class=horizontal>
    <form >
    <ul id="May120128AM_list" style="display: block;">
    
          <li><input type="hidden" id="May120128AM_check_if_display_block_or_none_onload" name="element_id" value="May120128AM_list"></li>
    
    
          <li><input type="hidden" id="May120128AM" name="apt_time" value="May120128AM"></li>
    
          <li><input type="hidden" name="user_id" id="May120128AM_user_id"  value="202020"/></li>
    
          <li><input type="hidden" name="password" id="May120128AM_password"  value="2"/></li>
    
          <li id="May120128AM_local_time">8:00 - 8:45 AM</li>
    
    
    
          <li id = 'May120128AM_Schd_Can' style=\"display: inline;
                                                    width: 200px;
                                                    height: 50px;
                                                    background: #ccc; 
                                                    text-align: center;
                                                    padding: .3em;"
          ></li>
    
          <li id = 'May120128AM_Nt_Avail' style=\"display: inline;
                                                    width: 200px;
                                                    height: 50px;
                                                    background: #ccc; 
                                                    text-align: center;
                                                    padding: .3em;"
          ></li>
    
    
          <li id = 'May120128AM_Avail' style=\"display: inline;
                                                    width: 200px;
                                                    height: 50px;
                                                    background: #ccc; 
                                                    text-align: center;
                                                    padding: .3em;"
          ></li>
    
    </ul>
    </form>
    </div>
    
    <script type="text/javascript">
        var apt_time = encodeURIComponent(document.getElementById("May120128AM").value);
        var userid = encodeURIComponent(document.getElementById("May120128AM_user_id").value);
        //var password = encodeURIComponent(document.getElementById("May120128AM_password").value);
        var parameters = "apt_time="+apt_time+"&user_id="+userid
    
        request.open("POST", "/cgi-bin/check_apts_onload_with_just_apt_time.php", true);
        request.onreadystatechange = function()
        {
           if(request.readyState == 4)
           {
              if(request.status == 200)
              {
                      var SchdCan = document.getElementById('May120128AM_Schd_Can');
                      var NtAvail = document.getElementById('May120128AM_Nt_Avail');
                      var Avail = document.getElementById('May120128AM_Avail');
    
                  if(request.responseText == "available")
                  {   
                     if(SchdCan.innerHTML == '' &&
                        NtAvail.innerHTML == '' &&
                        Avail.innerHTML == '')
                     {
                            SchdCan.innerHTL = '' 
                            NtAvail.innerHTML = '' 
                            Avail.innerHTML = "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM' onClick='clickToSchedule(); return false'>Click Here To Schedule</button>"
                     } 
                     if(SchdCan.innerHTML == '' &&
                        NtAvail.innerHTML == 'not available' &&
                        Avail.innerHTML == '')
                     {
                            SchdCan.innerHTL = '' 
                            NtAvail.innerHTML = '' 
                            Avail.innerHTML = "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM' onClick='clickToSchedule(); return false'>Click Here To Schedule</button>"
                     } 
                     if(SchdCan.innerHTML == '' &&
                        NtAvail.innerHTML == '' &&
                        Avail.innerHTML == "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM'>Click Here To Schedule</button>"
                                             )
                                             
                     {
                            SchdCan.innerHTML = "" 
                            NtAvail.innerHTML = '' 
                            Avail.innerHTML = "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM'>Click Here To Schedule</button>"
                     } 
                  }
                  if(request.responseText == "you are scheduled")
                  {
                        
                            SchdCan.innerHTML = "You Are Scheduled <button id='May120128AM_Click_To_Can' name='apt_time' value='May120128AM' onClick = 'clickToCancel(); return false'>Click Here To Cancel</button>"
                      
                  }
                  if(request.responseText == "not available")
                  {
                                            
    			NtAvail.innerHTML = 'not available'
    		  
                      
    
                  }  //Closing if(responseText == "")
                  
              }  //Closing if(request.status == 200)
              
           }  //Closing if(request.readyState==4)
        }  //Closing onreadystatechange function 
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        request.send(parameters);
    </script>
    
    <script type="text/javascript"><!--Begin Click To Schedule//-->
    <!--
    function clickToSchedule()
    {
        var apt_time = encodeURIComponent(document.getElementById("May120128AM").value);
        var userid = encodeURIComponent(document.getElementById("May120128AM_user_id").value);
        var parameters = "apt_time="+apt_time+"&user_id="+userid
    
        request.open("POST", "/cgi-bin/click_to_schedule_this_apt.html", true);
        //request.onreadystatechange = checkData;
        request.onreadystatechange = function()
        {
           if(request.readyState == 4)
           {
              if(request.status == 200)
              {
                      var SchdCan = document.getElementById('May120128AM_Schd_Can');
                      var NtAvail = document.getElementById('May120128AM_Nt_Avail');
                      var Avail = document.getElementById('May120128AM_Avail');
    
                  if(request.responseText == "you are scheduled")
                  {
                            SchdCan.innerHTML = "You Are Scheduled <button id='May120128AM_Click_To_Can' name='apt_time' value='May120128AM' onClick='clickToCancel(); return false'>Click Here To Cancel</button>"
                            NtAvail.innerHTML = ''
                            Avail.innerHTML = ''
                  }     
                  if(request.responseText == "not available")
                  {
                                            
                            SchdCan.innerHTML = ''
    			NtAvail.innerHTML = 'not available'
                            Avail.innerHTML = ''
    		  
                      
    
                  }  //Closing if(responseText == "not available")
                  
              }  //Closing if(request.status == 200)
              
           }  //Closing if(request.readyState==4)
        }  //Closing onreadystatechange function 
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        request.send(parameters);
    }
    //-->
    </script><!--//End Click To Schedule//-->
    
    <script type="text/javascript"><!--Begin Click To Cancel//-->
    <!--
    function clickToCancel()
    {
        var apt_time = encodeURIComponent(document.getElementById("May120128AM_Click_To_Can").value);
        var userid = encodeURIComponent(document.getElementById("May120128AM_user_id").value);
        var parameters = "apt_time="+apt_time+"&user_id="+userid
    
        request.open("POST", "/cgi-bin/click_to_cancel_this_apt.html", true);
        //request.onreadystatechange = checkData;
        request.onreadystatechange = function()
        {
           if(request.readyState == 4)
           {
              if(request.status == 200)
              {
                      var SchdCan = document.getElementById('May120128AM_Schd_Can');
                      var NtAvail = document.getElementById('May120128AM_Nt_Avail');
                      var Avail = document.getElementById('May120128AM_Avail');
    
                  //if(request.responseText == 'available')
                  //{   
                            SchdCan.innerHTML = '' 
                            NtAvail.innerHTML = '' 
                            Avail.innerHTML = "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM' onClick='clickToSchedule(); return false'>Click Here To Schedule</button>"
                  //} 
                  
              }  //Closing if(request.status == 200)
              
           }  //Closing if(request.readyState==4)
        }  //Closing onreadystatechange function 
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        request.send(parameters);
    }
    //-->
    </script><!--//End Click To Cancel//-->
    
    
    
                 <script type="text/javascript">
                 //CSS Display Block Or None Onload- Start
                 var display = encodeURIComponent(document.getElementById("May120128AM_check_if_display_block_or_none_onload").value);
                 var parameters = "element_id="+display
                 //request.open("POST", "/cgi-bin/css_display_or_not_onload.php", true);
                 //request.onreadystatechange = function()
                 {
                    if(request.readyState == 4)
                    {
                      if(request.status == 200)
                      {
                          if(request.responseText == "none")
                          {
                             var car = document.getElementById('May120128AM_list');
                             car.style.display = "none";
                          }
                          if(request.responseText == "block")
                          {
                             var car = document.getElementById('May120128AM_list');
                             car.style.display = "block";
                          }
                          //alert(request.responseText);
                      }
                    }
                 }
                 request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                 request.send(parameters);
                 //CSS Display Block Or None Onload- End 
                 </script>
    </body>
    
    
    </html>
    The php script behind the green code is simple and used for testing only.

    Here it is:
    PHP Code:
    <?php
    if(isset($_POST['element_id']))
    {
    echo 
    "block";
    }
    ?>
    I change the value echoed between block and none manually.


    Does anyone know why one aborts?
    Last edited by milesdriven; 06-08-2012 at 07:16 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    do it synchronous instead of
    asynchronous by changing true
    to false

    or

    make two request objects

    the same one can't run
    twice at the same time

    and of course the above does
    nothing to fix the problem is here
    request.open("POST", "/cgi-bin/check_apts_onload_with_just_apt_time.php", true);

    request.open("POST", "/cgi-bin/css_display_or_not_onload.php", true);
    request.onreadystatechange = function()

    the request property is
    changed from
    "/cgi-bin/check_apts_onload_with_just_apt_time.php",
    to
    "/cgi-bin/css_display_or_not_onload.php"
    Last edited by DaveyErwin; 06-08-2012 at 08:43 PM.

  • #3
    Regular Coder
    Join Date
    Dec 2011
    Posts
    186
    Thanks
    0
    Thanked 1 Time in 1 Post
    Very interesting - thank you for the reply. I think I know what you're saying.

    I have a couple of questions just to understand a little better:



    The same request object can't run twice at the same time?

    I was assuming because the browser reads from top to bottom and it reads the first pair of opening and closing <script> tags before the second pair, that the request object was processing one request at a time.

    Changing to a synchronous call in each snippet would let multiple calls happen at once? Would that affect how all this displays in the browser>

    Very interesting... thank you
    Last edited by milesdriven; 06-08-2012 at 07:42 PM.

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    okay what I said was ok
    but now I see it does not apply


    here is your problem
    you redefine the open property
    it overwrites the previos value

    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    <title>My Web Page</title>
    <style type="text/css">
    .horizontal ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    
    body {margin: 10em;}
    
    #form {margin: 1em 1em;l}
    
    #answer {
    padding: .2em .2em;
    margin: .5em 0 .5em 0;
    }
    
    .horizontal ul li { 
    display: inline;
    width: 200px;
    height: 50px;
    background: #ccc; 
    text-align: center;
    padding: .3em;
    }
    </style>
    
    <script src="/A2EB891D63C8/avg_ls_dom.js" type="text/javascript">
    </head>
    
    <body>
    <noscript>Please Enable Javascript</noscript>
    
    
          <p>Friday June 8  2012</p> 
    <p>Your Local Time:<SPAN>&nbsp&nbsp&nbsp&nbsp<SPAN id='showtimehere'></SPAN></p>
         
    <script type="text/javascript"> 
    <!--
    function showtime()
    {
    var Donut = new Date();
    var day = Donut.getDate(); //returns day of month (1-31)
    var year = Donut.getFullYear(); //returns year (xxxx)
    var hours = Donut.getHours(); //returns hours (0-23)
    var dn = "AM";
    if(hours>=12)
    {
    dn="PM"
    hours = hours-12
    }
    if(hours==0)
    {
    hours=12
    }
    var minutes = Donut.getMinutes(); //returns minutes (0-59)
    if(minutes<=9)
    {
    minutes = "0"+minutes
    }
    var time = hours+":"+minutes+" "+dn;
    document.getElementById('showtimehere').innerHTML = time;
    setTimeout("showtime()", 60000);
    }
    showtime();
    //if(minutes==00)
    //{
    //var datetime = month+day+year+hours+dn;
    //-->
    </script>
    
    <div class=horizontal>
    <form >
    <ul id="May120128AM_list" style="display: block;">
    
          <li><input type="hidden" id="May120128AM_check_if_display_block_or_none_onload" name="element_id" value="May120128AM_list"></li>
    
    
          <li><input type="hidden" id="May120128AM" name="apt_time" value="May120128AM"></li>
    
          <li><input type="hidden" name="user_id" id="May120128AM_user_id"  value="202020"/></li>
    
          <li><input type="hidden" name="password" id="May120128AM_password"  value="2"/></li>
    
          <li id="May120128AM_local_time">8:00 - 8:45 AM</li>
    
    
    
          <li id = 'May120128AM_Schd_Can' style=\"display: inline;
                                                    width: 200px;
                                                    height: 50px;
                                                    background: #ccc; 
                                                    text-align: center;
                                                    padding: .3em;"
          ></li>
    
          <li id = 'May120128AM_Nt_Avail' style=\"display: inline;
                                                    width: 200px;
                                                    height: 50px;
                                                    background: #ccc; 
                                                    text-align: center;
                                                    padding: .3em;"
          ></li>
    
    
          <li id = 'May120128AM_Avail' style=\"display: inline;
                                                    width: 200px;
                                                    height: 50px;
                                                    background: #ccc; 
                                                    text-align: center;
                                                    padding: .3em;"
          ></li>
    
    </ul>
    </form>
    </div>
    
    <script type="text/javascript">
        var apt_time = encodeURIComponent(document.getElementById("May120128AM").value);
        var userid = encodeURIComponent(document.getElementById("May120128AM_user_id").value);
        //var password = encodeURIComponent(document.getElementById("May120128AM_password").value);
        var parameters = "apt_time="+apt_time+"&user_id="+userid
    var request1 = new XMLHttpRequest();
        request1.open("POST", "/cgi-bin/check_apts_onload_with_just_apt_time.php", true);
        request1.onreadystatechange = function()
        {
           if(request1.readyState == 4)
           {
              if(request1.status == 200)
              {
                      var SchdCan = document.getElementById('May120128AM_Schd_Can');
                      var NtAvail = document.getElementById('May120128AM_Nt_Avail');
                      var Avail = document.getElementById('May120128AM_Avail');
    
                  if(request1.responseText == "available")
                  {   
                     if(SchdCan.innerHTML == '' &&
                        NtAvail.innerHTML == '' &&
                        Avail.innerHTML == '')
                     {
                            SchdCan.innerHTL = '' 
                            NtAvail.innerHTML = '' 
                            Avail.innerHTML = "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM' onClick='clickToSchedule(); return false'>Click Here To Schedule</button>"
                     } 
                     if(SchdCan.innerHTML == '' &&
                        NtAvail.innerHTML == 'not available' &&
                        Avail.innerHTML == '')
                     {
                            SchdCan.innerHTL = '' 
                            NtAvail.innerHTML = '' 
                            Avail.innerHTML = "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM' onClick='clickToSchedule(); return false'>Click Here To Schedule</button>"
                     } 
                     if(SchdCan.innerHTML == '' &&
                        NtAvail.innerHTML == '' &&
                        Avail.innerHTML == "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM'>Click Here To Schedule</button>"
                                             )
                                             
                     {
                            SchdCan.innerHTML = "" 
                            NtAvail.innerHTML = '' 
                            Avail.innerHTML = "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM'>Click Here To Schedule</button>"
                     } 
                  }
                  if(request1.responseText == "you are scheduled")
                  {
                        
                            SchdCan.innerHTML = "You Are Scheduled <button id='May120128AM_Click_To_Can' name='apt_time' value='May120128AM' onClick = 'clickToCancel(); return false'>Click Here To Cancel</button>"
                      
                  }
                  if(request1.responseText == "not available")
                  {
                                            
    			NtAvail.innerHTML = 'not available'
    		  
                      
    
                  }  //Closing if(responseText == "")
                  
              }  //Closing if(request.status == 200)
              
           }  //Closing if(request.readyState==4)
        }  //Closing onreadystatechange function 
        request1.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        request1.send(parameters);
    </script>
    
    <script type="text/javascript"><!--Begin Click To Schedule//-->
    <!--
    function clickToSchedule()
    {
        var apt_time = encodeURIComponent(document.getElementById("May120128AM").value);
        var userid = encodeURIComponent(document.getElementById("May120128AM_user_id").value);
        var parameters = "apt_time="+apt_time+"&user_id="+userid
    var request = new XMLHttpRequest();
        request.open("POST", "/cgi-bin/click_to_schedule_this_apt.html", true);
        //request.onreadystatechange = checkData;
        request.onreadystatechange = function()
        {
           if(request.readyState == 4)
           {
              if(request.status == 200)
              {
                      var SchdCan = document.getElementById('May120128AM_Schd_Can');
                      var NtAvail = document.getElementById('May120128AM_Nt_Avail');
                      var Avail = document.getElementById('May120128AM_Avail');
    
                  if(request.responseText == "you are scheduled")
                  {
                            SchdCan.innerHTML = "You Are Scheduled <button id='May120128AM_Click_To_Can' name='apt_time' value='May120128AM' onClick='clickToCancel(); return false'>Click Here To Cancel</button>"
                            NtAvail.innerHTML = ''
                            Avail.innerHTML = ''
                  }     
                  if(request.responseText == "not available")
                  {
                                            
                            SchdCan.innerHTML = ''
    			NtAvail.innerHTML = 'not available'
                            Avail.innerHTML = ''
    		  
                      
    
                  }  //Closing if(responseText == "not available")
                  
              }  //Closing if(request.status == 200)
              
           }  //Closing if(request.readyState==4)
        }  //Closing onreadystatechange function 
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        request.send(parameters);
    }
    //-->
    </script><!--//End Click To Schedule//-->
    
    <script type="text/javascript"><!--Begin Click To Cancel//-->
    <!--
    function clickToCancel()
    {
        var apt_time = encodeURIComponent(document.getElementById("May120128AM_Click_To_Can").value);
        var userid = encodeURIComponent(document.getElementById("May120128AM_user_id").value);
        var parameters = "apt_time="+apt_time+"&user_id="+userid
    var request = new XMLHttpRequest();
        request.open("POST", "/cgi-bin/click_to_cancel_this_apt.html", true);
        //request.onreadystatechange = checkData;
        request.onreadystatechange = function()
        {
           if(request.readyState == 4)
           {
              if(request.status == 200)
              {
                      var SchdCan = document.getElementById('May120128AM_Schd_Can');
                      var NtAvail = document.getElementById('May120128AM_Nt_Avail');
                      var Avail = document.getElementById('May120128AM_Avail');
    
                  //if(request.responseText == 'available')
                  //{   
                            SchdCan.innerHTML = '' 
                            NtAvail.innerHTML = '' 
                            Avail.innerHTML = "Available <button id='May120128AM_Click_To_Sch' name='apt_time' value='May120128AM' onClick='clickToSchedule(); return false'>Click Here To Schedule</button>"
                  //} 
                  
              }  //Closing if(request.status == 200)
              
           }  //Closing if(request.readyState==4)
        }  //Closing onreadystatechange function 
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        request.send(parameters);
    }
    //-->
    </script><!--//End Click To Cancel//-->
    
    
    
                 <script type="text/javascript">
                 //CSS Display Block Or None Onload- Start
                 var display = encodeURIComponent(document.getElementById("May120128AM_check_if_display_block_or_none_onload").value);
                 var parameters = "element_id="+display
    	var request2 = new XMLHttpRequest();
                 request2.open("POST", "/cgi-bin/css_display_or_not_onload.php", true);
                 request2.onreadystatechange = function()
                 {
                    if(request2.readyState == 4)
                    {
                      if(request2.status == 200)
                      {
                          if(request2.responseText == "none")
                          {
                             var car = document.getElementById('May120128AM_list');
                             car.style.display = "none";
                          }
                          if(request2.responseText == "block")
                          {
                             var car = document.getElementById('May120128AM_list');
                             car.style.display = "block";
                          }
                          //alert(request.responseText);
                      }
                    }
                 }
                 request2.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                 request2.send(parameters);
                 //CSS Display Block Or None Onload- End 
                 </script>
    </body>
    
    
    </html>
    Last edited by DaveyErwin; 06-08-2012 at 09:21 PM.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by milesdriven View Post
    The same request object can't run twice at the same time?
    No more than you can fly to the north pole and the south pole at the same time.

    Quote Originally Posted by milesdriven View Post
    I was assuming because the browser reads from top to bottom and it reads the first pair of opening and closing <script> tags before the second pair, that the request object was processing one request at a time.
    JavaScript doesn't always process top to bottom and sending an asynchronous call runs the following statements without waiting for a response from the prior call - that's why the readystatechange event exists to process the response as a separate process.

    Quote Originally Posted by milesdriven View Post
    Changing to a synchronous call in each snippet would let multiple calls happen at once?
    No it would make the browser wait for the first call to respond before running any more JavaScript. It would be like you flying first to the North Pole and then after you get there you then fly to the South Pole.

    If you leave the calls as asynchronous but use two separate objects then the two calls will no longer interfere - just as it is possible for you to fly to the North Pole at the same time someone else is flying to the South Pole.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    When you want to call multiple functions onload you can do this, put this at the bottom of your javascript;
    Code:
    window.onload = function()
    {
    stuff to run here
    another function here
    }
    It will be called in consecutive order, javascript is single threaded.

  • #7
    Regular Coder
    Join Date
    Dec 2011
    Posts
    186
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks very much Davey Erwin, felgall and DrDOS.

    Very helpful - problem solved.


    To Davey Erwin:

    I read your edits. Thanks again for taking the time. I decided to create another object for each separate snippet that runs onload.

    At first I wasn't sure why it seemed better to do this. Now I know it makes coding easier in my opinion, and lets the browser go full steam ahead without waiting for anything to respond (thanks felgall).

    When I was using only one object things were bottlenecked. Looking back, it is easy to see a side effect of this was the browser partially merged (overwrote) separate snippets to try to cope with my poorly written javascript.

    Creating multiple objects solves the problem of the open method being overwritten, because everything is kept separate. Firebug shows everything working, and the browser does too.

    Thank you


    To DrDOS:

    Very helpful for future coding - thank you.

    To felgall:

    I now know why it seemed better to use multiple objects - browser speed. Thanks for answering my bulleted questions.
    Last edited by milesdriven; 06-08-2012 at 10:37 PM.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by DrDOS View Post
    When you want to call multiple functions onload you can do this, put this at the bottom of your javascript;
    Code:
    window.onload = function()
    {
    stuff to run here
    another function here
    }
    It will be called in consecutive order, javascript is single threaded.
    That's the antiquated way to do it though and doesn't actually work without having to write custom onloads for each page.

    If you use the proper version that uses event listeners then you don't need to write a custom version for each page - you just use the code separately in each script.

    Consider the following:

    Page One

    Code:
    <script type="text/javascript" src="script1.js"></script>
    <script type="text/javascript" src="script2.js"></script>
    Page Two

    Code:
    <script type="text/javascript" src="script1.js"></script>
    Page Three

    Code:
    <script type="text/javascript" src="script2.js"></script>
    The code you provide would need to be rewritten for each page and added as an additional script. If you were to code the onload the right wat then you'd just add the code into each of the two scripts separately.

    Code:
    (function() {
    if (window.addEventListener)
    addEvent = function(ob, type, fn ) {
      ob.addEventListener(type, fn, false );
    };
    else if (document.attachEvent)
    addEvent = function(ob, type, fn ) {
      var eProp = type + fn;
      ob['e'+eProp] = fn;
      ob[eProp] = function(){ob['e'+eProp]( window.event );};
      ob.attachEvent( 'on'+type, ob[eProp]);
    };
     
    addEvent(window,
       'load',
       myfunction); // <= here's where you specify the function to run onload for this particular script
    })();
    Add that same code to the bottom of both script1 and script2 just changing the one line to call the appropriate function that needs to run onload for that particular script to work and all three pages would work without needing any additional antiquated custom onload script written for the specific page.

    Of course if you attach all your JavaScript at the bottom of the page where it belongs you will seldom need to use onload at all.
    Last edited by felgall; 06-08-2012 at 10:50 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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