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

    Javascript (ajax) won't place the innerHTML between the <li> and </li> tags

    This is an ajax practice script. The ajax object is created ( a javascript alert tells me). The problem is I can't get the javascript to place the innerHTML between the right (or any) <li> and </li> tags.

    There is a link in the code, but ajax is supposed to execute onload without clicking anything. A side effect - Clicking on the "Close" link pops up an alert box I wrote that says the object has been created. Hmmm...

    A very basic php script written as simple as possible:
    PHP Code:
    <?php
    if(isset($_POST["zip"]))
    {
       echo 
    "Thank You";
    }
    ?>

    The javascript:
    Code:
    <!DOCTYPE html>
    <html>
    <head><script src="/A2EB891D63C8/avg_ls_dom.js" type="text/javascript"></script>
    <title>Test Ajax</title>
    </head>
    <body>
                                                                                    <div id='May12012'  style="text-align: center;
                                         width: 27em;
                                         height: 18em;
                                         background: #B3ECFF;
                                         margin-bottom: 2em;"
    ></li>
    
    <p style='font-size: .8em;'>$M3 $hi Schedule</p>
    
    
    <form>
    
    <ul id='May120128AM'  name="apt_time"  value='May120128AM' style="list-style-type: none;
       margin: 0;
       padding: 0;"
    >
    
    <input type="hidden" name="user_id" id='May120128AMhidden'  value='u'/>
    
    <li id = 'May120128AM_Scheduled_Cancel' style="display: inline;
                                                   width: 200px;
                                                   height: 50px;
                                                   background: #ccc; 
                                                   text-align: center;
                                                   padding: .3em;"
    ></li>
    
    <li id='May120128AM_Not_Available'  style="display: inline;
                                                   width: 200px;
                                                   height: 50px;
                                                   background: #ccc; 
                                                   text-align: center;
                                                   padding: .3em;"        
    ></li>
    
    <li id='May120128AM_Available' style="display: inline;
                                             width: 200px;
                                             height: 50px;
                                             background: #ccc; 
                                             text-align: center;
                                             padding: .3em;"
    ></li>
    </ul>
    </form>
    
    <p><a href='' onClick=\"hideSchedule('$M3$hi$Y','$m'); return false\">Close</a></p>
    
    <br />
    </div>
    
    <script type="text/javascript">
    <!--
      var request;
        request = new XMLHttpRequest();
       //} catch (e) {
         //if(request=undefined) alert('e.message');
         //}
         if(request)
         {
            alert('XMLHttpRequest Created');
         }
    //-->
    </script>
        <!--//ONLOAD 8AM//-->
        <script type="text/javascript"> 
        <!--
        //function checkData()
        //{
         //alert(request.readyState);
        //}
        var apt_time = encodeURIComponent(document.getElementById('May120128AM').value);
        var userid = encodeURIComponent(document.getElementById('May120128AMhidden').value);
        var parameters = "apt_time="+apt_time+"&user_id="+userid;
    
        request.open("POST", "/cgi-bin/test_ajax.php", true);
        //request.onreadystatechange = checkData;
        request.onreadystatechange = function() 
        {
    
            if(request.readyState == 4)
            {
    
                if(request.status == 200)
                {
                     if(request.responseText == "Thank You")
                     {
    
                        var ajaxAnswer=document.getElementById('May120128AM_Available');
                        ajaxAnswer.innerHTML = "<p>Available</p><button id='May120128AM_Click_To_Schedule' name="apt_time" value='May120128AM' onClick="clickToSchedule(); return false">Click Here To Schedule</button>
                     }
                }
                    
                    
            }
    
        } 
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        request.send(parameters);
        //-->
        </script>
        <!--<p>END ONLOAD 8AM</p>//-->
    </body>
    </html>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Your HTML is invalid - only <li> tags are allowed directly in a <ul> tag. The <input> tag needs to be inside an <li> tag.

    Also have you tried placing alerts to check if the ajax request is sent to the server and to test if the function attached to the readystatechange event gets executed?
    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.

  • #3
    Regular Coder
    Join Date
    Dec 2011
    Posts
    186
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks very much for your reply.

    Yes, I've tried placing those alerts. To test the alert functions themselves, I purposefully made a mistake in the php so it would not be able to send an answer to javascript, and the onreadystatechange alert showed readyStates 0-4 anyway.

    I now know I've been focusing on javascript in my effort to find the problem, but every part of the current problem turns out to be either css or html.

    Thanks again for your help.
    Last edited by milesdriven; 05-10-2012 at 12:39 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
    •