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

    Javascript sees the value of a variable as an undefined variable

    UPDATE:

    I think I know how to solve this problem, but I don't know how to write the code that I think will solve it. I am asking for help writing the code. The original question is about the line of code in the
    first code window below. This one line of code is in the checkAptsOnload function. It runs on page load. When it runs, it places the variables that are in red into the function that is called by the onClick event handler shown in this line of code. Those variables are converted to their values when the checkAptsOnload function runs on page load.

    The clickToSchedule function that runs onClick receives those values from checkAptsOnload(). The clickToSchedule function sees them as variables and complains it cannot find their values, so the script crashes. I think the reason it sees them as variables is because when checkAptsOnload converts the variables in red to their values, those values have no quotes around them at all. They are unquoted and separated by commas inside the onClick handler. The clickToSchedule function thinks this means they are variables, because they have no quotes.

    If this sounds like I have found the cause of the problem, can someone show me how to change the line of code in the window immediately below so it places single or double (I don't know which is best) quotes in this line so the values these variables convert to have single or double quotes around them. Be aware these functions are in a php heredoc. I don't know if that makes a difference in how javascript is written.

    This is the line of code I'm talking about:
    Code:
    Avail.innerHTML = "Onload Available <button id= '"+ClickToSch+ "' name='apt_time' value= '" +AM+"'  onClick='clickToSchedule("+AM+","+UserId+","+Schd_Can+","+NotAvail+","+Available+","+ClickToCan+"); return false'>Click Here To Schedule</button>";


    /////////ORIGINAL QUESTION BEGINS HERE

    This is a javascript question, but first a little php just to be thorough. The single line of code below is in a php heredoc, which is in a php for loop (loop and heredoc not shown). The loop tells php to create 31 of these html elements and give each it's own “iterated” id, before sending all 31 <li> elements with their id's to the browser. This line is written so each resulting iterated element can receive responseText from the js functions I talk about in this post, and treat this responseText as innerHTML. The request object these functions use has been successfully created
    PHP Code:
    <li id "{$M3}{$hi}{$Y}8AM_Schd_Can"></li
    The id's are:
    Code:
    Aug120128AM_Schd_Can         for iteration number 1
    Aug220128AM_Schd_Can         for iteration number 2
    etc.


    The overall purpose of these javascript functions is to place the correct values into the <li> elements as innerHTML. The checkAptsOnload() function in the code window below is called 31 times by a js call placed in the js for loop shown at the bottom of that window. When the js for loop is run, checkAptsOnload() successfully places 31 different buttons in 31 different locations.


    The problem is these buttons don't work. I'll explain this in more detail in the remainder of this post.
    As the code is written now, everything on the browser screen disappears when any one of these 31 buttons is clicked.

    The checkAptsOnload() function is in the code window immediately below. The code in red shows how one of the variables brings it's value into this function during each of 31 iterations of the js for loop. All of the red variables are the same variable. I made one of them blue to show how this function places the value of the Schd_Can variable into the onClick event handler that fires the clickToSchedule() function onClick. The value the Schd_Can variable is converted to it's value per iteration of checkAptsOnload(). This places that value into the clickToSchedule() function shown in the 2nd window below, when that button is clicked. I think the problem is the clickToSchedule() function sees this value as a variable, then looks for it's value and does not find it.

    The checkAptsOnload function:
    Code:
    </script><script type="text/javascript">
    function checkAptsOnload(AM, UserId, Schd_Can, NotAvail, Available, ClickToSch, ClickToCan)
    {
        var apt_time_onload = encodeURIComponent(document.getElementById(AM).value);
        var userid = encodeURIComponent(document.getElementById(UserId).value);
        var parameters = "apt_time="+apt_time_onload+"&user_id="+userid;
    
        request.open("POST", "/cgi-bin/check_apts_onload_with_just_apt_time.php", false);
        request.onreadystatechange = function()
        {
           if(request.readyState == 4)
           {
              if(request.status == 200)
              {
                      var SchdCan = document.getElementById(Schd_Can);
                      var NtAvail = document.getElementById(NotAvail);
                      var Avail = document.getElementById(Available);
    
                  if(request.responseText == "available")
                  {   
                            SchdCan.innerHTL = ''; 
                            NtAvail.innerHTML = ''; 
                            Scroll to the right to see the blue variable
                            Avail.innerHTML = "Onload Available <button id= '"+ClickToSch+ "' name='apt_time' value= '" +AM+"'  onClick='clickToSchedule("+AM+","+UserId+","+Schd_Can+","+NotAvail+","+Available+","+ClickToCan+"); return false'>Click Here To Schedule</button>";
                  }
                  if(request.responseText == "you are scheduled")
                  {
                        
                            SchdCan.innerHTML = "You Are Scheduled <button id= '"+ClickToCan+ "'  name='apt_time' value= '" +AM+ "'  onClick = 'clickToCancel("+ClickToCan+","+UserId+","+Schd_Can+","+NotAvail+","+Available+","+ClickToSch+","+AM+"); 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 == "")
                  
              }  //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);
    }
    
    for(i=1; i <= (id8AM.length - 1); i++)
    {
    checkAptsOnload(fid8AM[i], fid8AMuserid[i], fid8AMSchdCan[i], fid8AMNtAvail[i], fid8AMAvail[i], fid8AMClickToSch[i], fid8AMClickToCan[i]);
    }
    </script>

    The clickToSchedule() function behind the buttons does not work when any of the 31 buttons are clicked. I used the colorblue to show where the function ABOVE converted the variable Schd_Can to it's value inside the onClick event handler per iteration.


    The clickToSchedule() function below receives the value of the Schd_Can variable, from the function above, per iteration. For each iteration, it creates a button attached to an onClick event handler that has the specific value given to it by the specific iteration of the loop. That value is Aug120128AM_Schd_Can for the first iteration, etc.


    The problem is, it treats that value as a variable. It then looks for the value of that variable. It can't find it because none exists. It generates an error. That error depends on the button clicked. If I click on the button for August 29, the error reads:
    Code:
    Aug2920128AM_Schd_Can is not defined
    That means the clickToSchedule() function is treating the value the Schd_Can variable as a variable in of itself. I don't know why it does that, or how to correct it. I want javascript to see this value as the value it is, so it can use this value to find the <li> element with the same id, instead of treating it as variable that needs a value assigned to it. I thought an onClick event handler treated the arguments of whatever function it calls as values, just like the arrays in the call to the checkAptsOnload() function are treated as values in the js for loop.

    Does anyone know how to tell javascript to see that value as a value (so it can be used in the function) instead of a variable?

    Thank you.

    Here is the clickToSchedule() function. The code in blue shows this very same variable in use in this function:
    Code:
    <!--Begin Click To Schedule//-->
    <!--
    function clickToSchedule(AM, UserId, Schd_Can, NotAvail, Available, ClickToCan)
    {
        var apt_time_sch = encodeURIComponent(document.getElementById(AM).value);
        alert('apt_time');
        var userid = encodeURIComponent(document.getElementById(UserId).value);
        var parameters = "apt_time="+apt_time_sch+"&user_id="+userid
    
        request.open("POST", "/cgi-bin/click_to_schedule_this_apt.php", false);
        //request.onreadystatechange = checkData;
        request.onreadystatechange = function()
        {
           if(request.readyState == 4)
           {
              if(request.status == 200)
              {
                      var SchdCan = document.getElementById(Schd_Can);
                      var NtAvail = document.getElementById(NotAvail);
                      var Avail = document.getElementById(Available);
    
                  if(request.responseText == "you are scheduled")
                  {
                            Scroll to the right to see the blue variable. 
                            The clickToCancel function is not shown. 
                             Once I know how to fix the issue with clickToSchedule, I can fix it with clickToCancel
                            SchdCan.innerHTML = "You Are Scheduled <button id= '"+ClickToCan+ "' name='apt_time' value='" +AM+ "' onClick='clickToCancel("+ClickToCan+","+UserId+","+Schd_Can+","+NotAvail+","+Available+","+ClickToSch+","+AM+"); 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);
    }
    //-->
    <!--//End Click To Schedule//-->
    Thank you very much for taking the time to read this
    Last edited by milesdriven; 08-21-2012 at 08:35 PM.

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    186
    Thanks
    0
    Thanked 1 Time in 1 Post
    Final Update:

    I solved it. The script works. I'm posting this as a response to my own thread because I didn't have an edit button, and I wanted to share what I found. The question I originally asked in this thread was why did javascript see the value of a variable as a variable itself. The answer is because that value was not enclosed in single quotes. That little bit of learning plus a lot of testing to find and correct a few errors in logic got it working.The correct way to write that line is:

    Code:
    Avail.innerHTML = 'Onload Available <button id = "'+ClickToSch+'"  '+'  name = "apt_time"  '+'value = "'+AM+'"'+'  onClick = "clickToSchedule(\''+AM+'\','+'\''+UserId+'\','+'\''+Schd_Can+'\','+'\''+NotAvail+'\','+'\''+Available+'\','+'\''+ClickToCan+'\','+'\''+ClickToSch+'\''+'); return false">Click Here To Schedule</button>';
    As I look at this cut and pasted line, I notice there are several places that look like they have a double quote but it is really two single quotes next to each other. Hopefully that will become obvious when this code is shown in the window created by the tags.

    I want to thank everyone for taking the time to read this.
    Last edited by milesdriven; 08-28-2012 at 07:50 PM.


  •  

    Posting Permissions

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