Jump to content

ajax auto refresh div


DJ Zen Masta K

Recommended Posts

this is code that was suggest to me, but it doesn't work.  i know nothing aobut ajax, so forgive me.  i'm trying to auto update just that one div rather than the entire page, as that div gets dynamic content that sometimes times out.

 

<html>
<head>
<script language="JavaScript" type="text/javascript">
function Ajax ( ) {
     var xmlhttp=false;
    try
    {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    }
    catch (e)
    {
        try
        {
            xmlhttp = new
            ActiveXObject('Microsoft.XMLHTTP');
        }
        catch (E)
        {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined')
    {
        xmlhttp = new XMLHttpRequest();
    } 
     xmlhttp.open("GET", "songinfo.php", true);
     xmlhttp.onreadystatechange = function ( ) {
         if ( ajax.readyState == 4 ) {
             document.getElementById('songinfo').innerHTML = xmlhttp.responseText;
         }
     };
return;
}
  setInterval("Ajax()",10000);
  </script>
</head>
<body>
<div id="songinfo">
<?php
include ("songinfo.php");
?>
</div>
</body>
</html>

Link to comment
Share on other sites

Alrighty, looks like that's not an error, but what would be expected *if* the answer to my first question in the last post -- Did you add the alert I suggested? -- would be "yes".

 

I can't help if you don't follow the debug steps and "echo" that back to me.

 

Try this:

if ( xmlhttp.readyState == 4 ) {
if (xmlhttp.status!=200) {
	alert('the request failed');
}
document.getElementById('songinfo').innerHTML = xmlhttp.responseText;
} else {
document.getElementById('songinfo').innerHTML += '<br>ready state:' + xmlhttp.readyState;
}

 

I think you'll see what part of your script that should replace.

It's likely that you will see a lot of text on your screen. Bear with it, and tell me what happens.

Link to comment
Share on other sites

Another problem you are having is you have multiple HTML and HEAD elements inside the BODY element. the getElementById('songinfo') is probably not able to find your div because of that.

 

Running a document.getElementById('songinfo') in the console confirmed that that function is not finding the element.

Link to comment
Share on other sites

okay.  that is due to using the php include function to include other pages formated in html.  i guess i should strip them of the html tags.  something i never thought of.

 

i'm learning as i go!

 

good news, i have put in what you have told me to, and i'm not getting an error now.

 

my ajax script is now:

 

<script language="JavaScript" type="text/javascript">
function Ajax () {
     var xmlhttp=false;
    try
    {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    }
    catch (e)
    {
        try
        {
            xmlhttp = new
            ActiveXObject('Microsoft.XMLHTTP');
        }
        catch (E)
        {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined')
    {
        xmlhttp = new XMLHttpRequest();
    } 
alert(xmlhttp);
     xmlhttp.open("GET", "songinfo.php", true);
     xmlhttp.onreadystatechange = function ( ) {
         if ( xmlhttp.readyState == 4 ) {
if (xmlhttp.status!=200) {
	alert('the request failed');
}
document.getElementById('songinfo').innerHTML = xmlhttp.responseText;
} else {
document.getElementById('songinfo').innerHTML += '<br>ready state:' + xmlhttp.readyState;
}
     };
return;
}
  setInterval("Ajax()",10000);
  }
</script>

 

i greatyly appreciate you helping me on this.

Link to comment
Share on other sites

I cleaned up your js script. It had another error in it.

 

<script>
function Ajax () {
var xmlhttp=false;
try {
	xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
	try {
		xmlhttp = new
		ActiveXObject('Microsoft.XMLHTTP');
	} catch (E) {
		xmlhttp = false;
	}
}

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
	xmlhttp = new XMLHttpRequest();
} 

xmlhttp.open("GET", "songinfo.php", true);
xmlhttp.onreadystatechange = function ( ) {
	if ( Ajax.readyState == 4 ) {
		if (xmlhttp.status!=200) {
			alert('the request failed');
		}
		document.getElementById('songinfo').innerHTML = xmlhttp.responseText;
	} else {
		document.getElementById('songinfo').innerHTML += '<br>ready state:' + xmlhttp.readyState;
	}
};
setInterval("Ajax()",10000);
}
</script>

 

Try adding that and see what happens.

Link to comment
Share on other sites

i added the onload to the body tag,and now something is happening. 

 

in both ie7 and firefox3 when i open the page the memory usage of it shoots way up and keeps going.  within less than a minute it was from about 83,000 to almost 300,000.  :ninja:

 

first time it froze up my computer before i realized it was happening, second time i had performance monitor running to check.

Link to comment
Share on other sites

My bad, looks like the setInterval needs to be changed to setTimeout

 

You used the setInterval to initiate the whole deal before, but that could result in the request being completed before the DOM is ready. That would mean the response wouldn't have anywhere to be displayed. Hence I suggested using the onload. Once your function is called, it will recursively call itself using setTimeout. setInterval would be multiplying the number of requests, setTimeout is what you want there.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.