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

    Js Onload Function sees phpid as defined, while onClick function sees it as undefined

    I'm not sure if this is a php or javascript issue or both. 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 js functions, and treat this responseText as innerHTML. To make the rest of this post easier to read, I'm going to call this one line of code the phpid.

    PHP Code:
    <li id "{$M3}{$hi}{$Y}8AM_Schd_Can"></li


    The checkAptsOnload() function in the big code window below is called 31 times by a 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 (using the line highlighted in green below, which means this function sees each html element created by the phpid as defined.

    This line of the checkAptSOnload() function is supposed to create 31 buttons that call clickToSchedule() onClick:
    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>";


    The problem is, although 31 buttons are placed correctly, they don't work. When any one of these buttons is clicked, the clickToSchedule() function shown in one of the code windows below attempts to access the matching 1 of the 31 phpid's created by that php for loop. In it's attempt to access this 1 element by it's id, it decides the 1 it is trying to access is undefined (firebug shows the specific id that corresponds to whichever 1 of the 31 buttons that was clicked as undefined immediately upon clicking it). The strange thing is the 1 element it decides is undefined is 1 of the very same 31 elements written by the same looping phpid the onload function (that runs 31 times) decides IS defined.

    Testing shows the checkAptsOnload() function is calling it's php script 31 times, and receiving the responseText of “available” each time. The php script this function posts to will only return “available” if the post data it receives is high integrity. The “Onload Available” part of the green line below, and the “Click Here To Schedule” button itself are displayed correctly 31 times in the browser. When any of the 31 “Click Here To Schedule” buttons are clicked, the clickToSchedule() function does nothing. No data is posted..

    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>";

    I don't know if the problem is in the phpid I used to define the id of the <li> element, or if I wrote the line in green in the code window above incorrectly. As I write this, I'm starting to believe that the js arrays (which contain the element id's without any quotes) in the function call that fires checkAptsOnload() are working fine. The values in the arrays in the call are correct, because they are successfully depositing themselves in the arguments to checkAptsOnload(). I believe this because this function is posting to it's php script. I don't show the code that creates the arrays, but I will post that code if someone asks.


    That means everything in checkAptsOnload(), BUT this part of the code is working fine:
    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>";
    The html button and the phrase “Onload Available” in the line of code above make it to the browser screen 31 times. Something in this line of code is preventing the onClick event handler and the data it needs, to create 31 of these buttons that are capable of firing the clickToSchedule() function, from being properly created.

    The firebug error I get when I click any of those buttons that call clickToSchedule() is the same – the corresponding phpid element (1 of the 31 created by phpid and contained in the SchdCan variable) to that button is undefined (shown in red. If the clickToSchedule() function is not firing at all onClick, the fact that the clicked button's corresponding phpid element is undefined makes sense because only the successfully fired clickToSchedule() function can define it (look for it and find it). This means the clickToSchedule() function never fires, which means the code I wrote to create 31 of those onClick event handlers in checkAptsOnload() is not written correctly. I think the variables/arguments in this green line have the proper values, but I wrote them into this line of code incorrectly. I'm thinking out loud here. Is my thinking correct?

    My best guess is only the button and the words “Onload Available” in this line in the checkAptsOnload() function shown below are being looped (created 31 times). The javascript is not creating 31 onClick event handlers that can successfully fire the clickToSchedule() function. If I'm right, how do I rewrite that line? If I'm wrong, what do you think I'm doing wrong?


    Thank you for reading all of of this. It's a lot to read, but I wanted to be very specific about what I'm asking.


    The checkAptsOnload() function. The same line shown above in green is shown below in green:
    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 = ''; 
                            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>





    Here is the clickToSchedule() function behind the buttons. It does not work when the button is clicked. The red part of this code is what is supposed to be inserted into the innerHTML of the phpid's. I don't think this function fires at all because the green line of onClick code in checkAptsOnload() isn't written correctly. This means clicking the button doesn't fire it. I don't know how to fix this:
    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")
                  {
                            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//-->
    Last edited by milesdriven; 08-19-2012 at 04:16 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    The last code you published:

    var apt_time_sch = encodeURIComponent(document.getElementById(AM).value);

    and every document.getElementById statement The value in the () should be enclosed in quotes:
    var apt_time_sch = encodeURIComponent(document.getElementById("AM").value);

  • #3
    Regular Coder
    Join Date
    Dec 2011
    Posts
    186
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sunfighter View Post
    var apt_time_sch = encodeURIComponent(document.getElementById("AM").value);
    Thank you for taking the time to read and respond. I did what you suggested with every getElementById statement in every function. It prevented the onload function from working. The onload function didn't place the button at all after I added double quotes to those variables. The new error was the line with AM in it was now undefined.

    I removed the double quotes in the onload function and it worked again.The "Click Here To Schedule" button still sees the phpid element as undefined when it is clicked.

    Right now I'm thinking I made a mistake somewhere in that green line of code. Maybe the onClick event handler needs to be treated differently than simply making it part of a string. When I click that button, the clickToSchedule function did not fire at all. It fired every time when the body of the function was written just as it is now, but I wasn't using arguments and it was not in a php loop. The onload arguments seem to be working, because if they were not working, it would not send post data to the php script. It is sending that data.

    The only difference I can see between the onload function that does work and the clickToSchedule function that doesn't is the onClick handler in the one that doesn't work. The onload function does not use the onClick handler.

    I very much appreciate your effort in trying to help - thanks for taking the time.
    Last edited by milesdriven; 08-19-2012 at 07:25 PM.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,915
    Thanks
    15
    Thanked 227 Times in 227 Posts
    Let me add a caveat to Sunfighters advice. If the ID has NOT been defined as a variable it needs to be enclosed in quotes.

    You could say

    AM = "AM"; in your script and it would be defined as a variable.
    or AM = "morning";

  • #5
    Regular Coder
    Join Date
    Dec 2011
    Posts
    186
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DrDOS View Post
    Let me add a caveat to Sunfighters advice. If the ID has NOT been defined as a variable it needs to be enclosed in quotes.

    You could say

    AM = "AM"; in your script and it would be defined as a variable.
    or AM = "morning";
    Hi DrDOS -

    I am assuming the arrays in the function call that is in the js for loop bring the array values into the checkAptsOnload() function through the parameters/arguments of that function. This process defines AM, along with the rest of the parameters in that function, so it is the equivalent of this for every parameter:
    Code:
    AM = "id8AM[i]"
    Is this right?

    The checkAptsOnload function does post that data to its php script, so those values are coming in through the function parameters AM, etc. I'm still confused. Have you found an error in the code you're trying to explain to me? I'm very curious about what I'm doing wrong.

    Thanks again for your help


  •  

    Posting Permissions

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