Strange AJAX Issue?

[ziycon]

I'm having an issue with my AJAX function, its been working fine then I added another link, and now when i click on an AJAX link on the menu, it tries to load the correct page for a split second and then goes back to the menu page, just can't figure it out!?!It works fine on my local setup but once i moved the new link to the live site its stopped working!???

<script type="text/javascript" language="javascript">
    var loading_img = '/media/images/layout/loading.gif';
    var loading_msg = ' Loading...';
    var xmlhttp_obj = false;//create the XMLHttpRequest
    
    function ewd_xmlhttp()
    {
        if (window.XMLHttpRequest)
        { // if Mozilla, Safari etc
            xmlhttp_obj = new XMLHttpRequest();
        }
        else if (window.ActiveXObject)
        { // if IE
            try
            {
                xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                try
                {
                    xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e)
                {

                }
            }
        }
        else
        {
            xmlhttp_obj = false;
        }

        return xmlhttp_obj;
    }   //get content via GET

    function getcontent(url, containerid)
    {
        var xmlhttp_obj = ewd_xmlhttp();
        document.getElementById(containerid).innerHTML = '<img src="' + loading_img + '" />' + loading_msg;
        xmlhttp_obj.onreadystatechange=function()
        {
            loadpage(xmlhttp_obj, containerid);
        }
        xmlhttp_obj.open('GET', url, true);
        xmlhttp_obj.send(null);
    }     

    function loadpage(xmlhttp_obj, containerid)
    {
        if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status == 200 )
        {
            document.getElementById(containerid).innerHTML = xmlhttp_obj.responseText;
        }
    }
//]]>
</script>

 

[ziycon]

I've done some investigation into this issue and I've found that the correct page is loaded after the first alert but when i clear the second alert from the screen it goes back to the menu page??

function getcontent(url, containerid)
     {
         var xmlhttp_obj = ewd_xmlhttp();
         document.getElementById(containerid).innerHTML = '<img src="' + loading_img + '" />' + loading_msg;
         xmlhttp_obj.onreadystatechange=function()
         {
             loadpage(xmlhttp_obj, containerid);
         }
         alert(url);
         xmlhttp_obj.open('GET', url, true);
         xmlhttp_obj.send(null);
         alert(url);
     }

 

[davkell]

Can you post what calls the function? If it's a link, are you returning false after the function call? e.g.

<a href="#" onclick="Javascript: loadPage(); return false;">

 

[ziycon]

<a href="#" onclick="getcontent(\'ajax-100-null/\',\'div_container\')">link</a>

 

[davkell]

Does this work?

<a href="#" onclick="getcontent(\'ajax-100-null/\',\'div_container\'); return false;">link</a>

Returning false on the link click should stop it loading the current page (#)

 

[ziycon]

Nice one that worked, why was that happening?

 

[davkell]

Cool....good guess

It's happening (or my understanding of it) because when the link is clicked, the javascript function runs, and once it's completed, the link's behaviour kicks in (meaning that it looks for the page in the href) - because there's only a "#", it calls the current page. Returning false stops the link from firing and everything stops once the javascript function has been run (so the current page isn't reloaded).

 

[ziycon]

That makes sense, thanks again for the help, been bugging me for a few hours!