This forum is in permanent archive mode. Our new active community can be found here.

AJAX Problem

edited July 2009 in Technology
I am encountering a very strange AJAX problem.


var xmlhttp;

function updateDiv(str) {
xmlhttp=GetXmlHttpObject();
if(xmlhttp==null)
{
alert ("Your browser does not support HTTP Request");
return;
}
var url="url.php";
url=url+"?var="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged () {
if (xmlhttp.readyState==4)
{
document.getElementById("some-div").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject() {
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// Code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}



This function is set to run as soon as the DOM is ready and sometimes it does run. Sometimes it does not run.

I've tried adding alerts into the code to try and debug it that way but every time I add them in the javascript becomes far less likely to work at all. I'm a bit frayed over this because I can't for the life of me figure out why the script would work sometimes but not all the time.

Comments

  • Why aren't you using JQuery?
  • edited July 2009
    I was having the same problem with jquery.


    function updataDiv(str) {
    new Ajax.Request("url.php",
    {
    method: 'post',
    postBody: '?uid='+str+'&sid='+Math.random();,
    onComplete: showResponse
    });
    }

    function showResponse(req){
    $('some-div').innerHTML= req.responseText;
    }



    I figured using straight javascript and xmlhttprequest would be easier to debug.

    BTW, I was able to put an alert in the statechanged function before the document update and it worked every time with the alert window popping up. With the alert after the document update it would never work. I can't leave alerts in for general usage.
    Post edited by HMTKSteve on
  • edited July 2009

    I figured using straight javascript and xmlhttprequest would be easier to debug.
    Use JQuery. You can do this in just a few lines, isntead of a whole bunch, and it's pretty much guaranteed to work exactly the same in all browsers. I hardly know anybody at all who still writes in straight JavaScript other than the people who work on JavaScript libraries like JQuery, Prototype, MooTools, etc.

    Also, you clearly have no idea what you are doing. new Ajax.Request ??? try $.ajax();
    The documentation is your friend.
    Post edited by Apreche on
  • I noticed that after taking a moment to look over the jquery docs.


    function sendRequest(str) {
    $.get("url.php", { uid: str, sid: Math.random(); },
    showResponse(data){
    alert("Data Loaded: " + data);
    });
    }

    function showResponse(req){
    $('some-div').innerHTML= req.responseText;
    }


    Using this it never works. Ideas?
  • Ok, so you have two functions. When are you calling them?
  • edited July 2009
    window.onDomReady = sendRequest({$ir['userid']});


    I call the function for SendRequest as soon as the DOM is ready. ShowResponse is called by the get function after the data is returned.

    After looking closer at the jquery docs i tried to use the more elaborate ajax command:


    function sendRequest(str) {
    alert ( "data is " + str);
    $.ajax({
    type: "GET",
    url: "url.php",
    data: "uid=" + str ,
    dataType: "script",
    success: showResponse(msg){
    alert( "Data Saved: " + msg );
    }
    });
    }

    function showResponse(msg){
    document.getElementById("some-div").innerHTML= msg.responseText;
    }


    This worked the very first time and then not again.
    Post edited by HMTKSteve on
  • edited July 2009
    Don't use window.ondomready. If you're going to use JQuery, everything you do should be JQuery.

    $(document).ready(function(){
    showResponse(sendRequest('string'));
    });


    Also, something could be wrong with the server-side script that you are ajaxing.
    Post edited by Apreche on
  • edited July 2009
    Don't use window.ondomready. If you're going to use JQuery, everything you do should be JQuery.

    $(document).ready(function(){
    showResponse(sendRequest('string'));
    });


    Also, something could be wrong with the server-side script that you are ajaxing.
    I thought about that so I called it directly with parameters and it works fine.

    What has me stumped is why it only works sometimes instead of all the time. When I added in the alerts to the non jquery code it always worked and walked me through each state change. When I removed the alerts it only worked some of the time.

    I got the original $.get jquery code to work the first time and then it ceased to work at all after that.

    When I use this:

    function stateChanged () {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    alert ('Document waiting: xmlhttp request state changed to' + xmlhttp.readyState + ' and xmlhttp.status is ' + xmlhttp.status + '.' );
    {
    alert ('Document ready: xmlhttp request state changed to' + xmlhttp.readyState + ' and xmlhttp.status is ' + xmlhttp.status + '.' );
    document.getElementById("some-div").innerHTML=xmlhttp.responseText;
    }
    }


    It always works but it also steps me through each state change. When I remove the alerts it only works some of the time. I'm new to javascript so I don't really now where to go from here.
    Post edited by HMTKSteve on
  • Strangely enough, placing the css before the js appears to have fixed the problem. Now it works about 99% of the time.
Sign In or Register to comment.