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

    Javascript if statement stops script

    I wrote an ajax script that puts an "Available - Click To Schedule" button on the browser. When this button is clicked, an appointment date and time is put into a database, the "Available" button disappears, and a "You Are Scheduled - Click To Cancel" button appears in its place.

    When the "You Are Scheduled - Click To Cancel Button is clicked, the data is removed from the database, the "You Are Scheduled - Click To Cancel" button disappears from the screen, and the "Available - Click To Schedule" button reappears in its place.

    Testing shows the php side works fine. This means the php script removes data from the database, then returns the word "available" to the javascript.

    The word "available" becomes the javascript responseText.

    I wrote a javascript if statement, highlighted in red below, that seems to stop the javascript from responding to the word "available" by removing the "You Are Scheduled" button and replacing it with the "Available - Click To Schedule" button.

    The word "available" is spelled correctly and the same in the php and the javascript.

    When the if statement is commented out, everything works fine. When the if statement is uncommented, the scripts places the "You Are Scheduled - Click To Cancel" button on the screen successfully, but...

    When the "Click To Cancel Button is clicked, the php successfully removes that time from the database, but the "Scheduled - Click To Cancel" button remains on the screen - instead of disappearing and being replaced by the "Available - Click To Schedule button.

    I don't know why this if statement stops the script from working at this point in its cycle. Does anyone know what the problem is?

    The browser is Firefox

    Also, I used the <!-- and //--> tags to prevent the javascript from displaying on the browser. It did anyway. Does anyone know why?

    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>
    
    </head>
    
    <body>
    <noscript>Please Enable Javascript</noscript>
    
    
    <div id=horizontal>
    <form >
    <ul> 
    
          <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>8:00 - 9:00 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 request;
        request = new XMLHttpRequest();
       //try { request = new XMLHttpRequest();
       //} catch (e) {
         //if(request=undefined) alert('e.message');
         //}
        //if(request)
        //{
         // alert('Ajax Object Created');
        //}
    //-->
    </script>
    <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/php_file.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/php_script.php", 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/php_script.phpl", 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//-->
    </body>
    
    
    </html>
    Last edited by milesdriven; 05-30-2012 at 07:48 PM.

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    945
    Thanks
    0
    Thanked 129 Times in 128 Posts
    in the related request.open you have:
    Code:
        request.open("POST", "/cgi-bin/php_script.phpl", true);
    Maybe that extra letter is what is breaking the code.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,641
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by milesdriven View Post
    Also, I used the <!-- and //--> tags to prevent the javascript from displaying on the browser. It did anyway. Does anyone know why?
    That's an HTML comment not a JavaScript one - people used to use it back in the 1990s to prevent the script displaying as content in IE2 and Netscape 1 and earlier browsers that didn't understand JavaScript. Once Netscape 1 use died out using that became unnecessary. JavaScript was specifically designed to ignore those tags so that they could be used to hide the script from displaying in the page in those browsers that didn't understand JavaScript.

    The only use such a wrapper serves today is with some CMS where using it will result in the entire script being discarded and in XHTML where it converts the script into a comment.
    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.

  • #4
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by milesdriven View Post
    Code:
                  //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>"
                 //} 
    Suggestion. Put
    Code:
    alert(request.responseText);
    or
    Code:
    Avail.innerHTML += "(" + responseText + ")";
    immediately below the if(...) statement so see what the PHP script is returning. Perhaps it returns something other than "available" when "Scheduled - Click To Cancel" is clicked.

    Will

  • #5
    Regular Coder
    Join Date
    Dec 2011
    Posts
    186
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks


  •  

    Posting Permissions

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