#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    49
    Rep Power
    15

    AJAX and associated functions do not execute more than once?


    Hey, my AJAX code works for only one call. If I call it a second time it does not work, and I can't figure it out. Would you help me find the problem (and possible error)? Thank you for your time.

    [code="html"]
    <!DOCTYPE html>
    <html>
    <head>
    <title>Troop 21 - Home</title>
    <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    <META name=keywords content="Troop 21 Clayton Missouri MO boy scouts st louis">
    <!-- This is AJAX set up code -->
    <script language=JavaScript type=text/JavaScript>
    //<!--
    //Browser Support Code
    function xmlhttpPost(strURL, elementId){
    var xmlhttp;
    var self = this;
    var oDiv = document.getElementById(elementId);
    try{
    // Opera 8.0+, Mozilla, Safari
    self.xmlhttp = new XMLHttpRequest();
    }catch(e){
    // MS-IE
    try{
    self.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
    try{
    self.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
    // Unsupported browser or browser doesn't support AJAX
    Divs.showError('quadA', 'AJAX not supported!');
    }
    }
    }
    self.xmlhttp.open('GET', strURL, true);
    self.xmlhttp.setRequestHeader('Content-Type', 'text/html');
    self.xmlhttp.onreadystatechange = function(){
    if(self.xmlhttp.readyState == 4){
    updatepage(self.xmlhttp.responseText, oDiv);
    }
    }
    self.xmlhttp.send();
    }
    function updatepage(str, div){
    div.innerHTML = str;
    }
    function AJAXObj(){
    this.load_navbar = function(){
    xmlhttpPost('/cgi-bin/navbar.pl?bar=home', 'navbar');
    };
    this.load_page = function(){
    xmlhttpPost('/cgi-bin/cm.pl?file=home.cmw&action=display', 'data');
    };
    }
    function page(){
    this.showError = function(quad, errorMessage){
    document.getElementById(quad).style.display="block";
    document.getElementById(quad).innerHTML=errorMessage;
    };
    this.hideError = function(quad){
    document.getElementById(quad).style.display="none";
    };
    }
    var AJAX = new AJAXObj();
    var Divs = new page();

    //-->
    </script>
    <style type="text/CSS">
    div.main{
    margin-left:0%;
    padding:0px;
    background-color:#A8CD9B;
    border-width:0px;
    width:1000px;
    }
    div.content{
    margin-left:200px;
    background-color:#336600;
    padding:0px;
    border-width:0px;
    width:650px;
    }
    div.error{
    width:200px;
    border-style:solid;
    border-width:1px;
    border-color:rgb(255, 0, 51);
    background-color:rgb(255, 153, 153);
    display:none;
    float:left;
    }
    div#data{
    background-color:#fff;
    padding:0px;
    width:650px;
    border-width:0px;
    }
    img.logo{
    float:left;
    }
    div.clear{
    clear:both;
    }
    </style>
    </head>
    <body>
    <div class="main">
    <img src="troop21logo.gif" class="logo" alt="Troop 21 Logo" />
    <div class=error id=quadA></div>
    <div class="content">
    <img src="21logo2.gif" class="logo" alt="Troop 21 Logo 2" />
    <div class="clear" />
    <div id=navbar><span style="font-family:Ariel;color:#000;"><b>Oops! Something appears to be broken! Maybe your browser doesn't support AJAX (too old?) or something on the site has broken :'( [Emergency back-up navigation]:</b><br />
    <a href="/index.html">Home</a> . <a href="/Forms.html">Forms</a> . <a href="/Events.html">Events</a> .
    </div>
    <div id=data>
    <button onClick="JavaScriptivs.showError('quadA', 'Developer! : Example error');">Show error 'quadA'</button><br />
    <button onClick="JavaScriptivs.hideError('quadA');">Hide error 'quadA'</button>
    <button onClick="JavaScript:xmlhttpPost('/cgi-bin/navbar.pl?hos', 'navbar');">Navbar</button>
    </div>
    <script type="text/javascript">
    //<!--
    AJAX.load_navbar();
    AJAX.load_page();
    //-->
    </script>
    </div>
    </div>
    </body>
    </html>
    [/code]

    Salud, Matt

    {APPENDAGE}: Also, if you're wondering why I'm not using the HTML onLoad or JS window.onload functionality, it is because Mozilla's behavior executes that code before the rest of the page is loaded, rendering them useless to me.

    As far as I can tell, AJAX.load_page() is being called twice, but AJAX.load_navbar() isn't at all.
    Last edited by macaswell; August 8th, 2012 at 02:10 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    49
    Rep Power
    15

    Lightbulb


    I've narrowed it down to the chunk of code that produces the problem..

    [code=html]
    <html>
    <head>..</head>
    <body>
    ...
    <script type="text/javascript">
    //<!--
    AJAX.load_navbar();
    AJAX.load_page();
    //-->
    </script>
    </body>
    </html>
    [/code]

    I have changed the code now to a simpler/expanded version:

    [code=html]
    <html>
    <head>..</head>
    <body>
    ...
    <script type="text/javascript">
    xmlhttpPost('/cgi-bin/navbar.pl?bar=home', 'navbar');
    xmlhttpPost('/cgi-bin/cm.pl?file=home.cmw&action=display', 'data');
    </script>
    </body>
    </html>
    [/code]

    When I switch the xmlhttpPost calls concerning navbar and 'data', the navbar function shoots but the 'data' does not, and vice versa with the above version. You can see this happen live (until I fix the bug) on the website hosting it at http://mindos4.tripod.com/ I am using my personal website as a dev platform for the BSA troop's website. I would like to have it professional and at least functional...
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    49
    Rep Power
    15
    Well, I've made a work around by directly copy and pasting the navbar code into each and every page, so I only have one AJAX call. I would still like to figure out a solution to this though for future reference?

IMN logo majestic logo threadwatch logo seochat tools logo