Welcome to WebmasterWorld Guest from 54.163.166.22

Forum Moderators: open

Message Too Old, No Replies

Automatically Refreshing a Div

     
9:27 pm on Jul 11, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


I'm (trying to) use JQuery to automatically refresh the contents of a div every 30 seconds.

Note that this *used* to work, but I must have done something to break it. I have literally copied and pasted the code from the previous version, but it still doesn't re-load the content.

Here's what I've got so far. The reloadDiv() function is called every 30 seconds on a setInterval. The get_cookie function is primarily just to see if the user is still logged in.

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/* this function is equivalant to PHP's $_COOKIE function */
function get_cookie ( cookie_name ) {
var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );

if ( results ) {
return ( unescape ( results[2] ) );
}
else {
return null;
}
}

/* this function will be executed every 30 seconds */
function reloadDiv() {
if(get_cookie("logged")=="in") {
$("#responseContainer").load('page.php');
}
else {
window.location="login_form.php?error=Your session has expired.";
}
}

setInterval("reloadDiv()", 30000);

</script>
12:08 am on July 12, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


Presumably you're not being redirected, so the cookie test is OK?

Is your element with
id="responseContainer"
still contained on the page?

Can "page.php" be found, presumably in the same directory as the loaded page?
2:44 pm on July 12, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


Yes, the cookie test is OK. I even threw in an alert() to check it.

Response container is on the page, and "page.php" can be found.

I also should have pointed out that reloadDiv() is being sucesfully called onLoad. But it does not continue to execute every 30 seconds. So I think the problem may be with the setInterval.

<body onLoad="reloadDiv();">
2:55 pm on July 12, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


Looked in the Firefox Error console, and this message keeps appearing every 30 seconds:
$("#responseContainer") is null


The Chrome JavaScript console gives a similar message:
Uncaught TypeError: Cannot call method 'load' of null


Which is strange because it works once in the begining...
3:40 pm on July 12, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Remove this

<body onLoad="reloadDiv();">

and try this

$(function(){
setInterval("reloadDiv()", 30000);
)};

Or

window.onload=function() { setInterval("reloadDiv()", 30000); };


The div is probably not rendered the first time it runs, that is, source code executes top down. It attempts to run reloadDiv() before the div actually exists in the page a microsecond later. Even though the body is loaded, the div is probably not.

Also check for multiple ID's of responseContainer, id's need to be unique in a page. Though most of the time FF will forgive you and apply your actions to all element's ID'ed the same, sometimes it may not.

You could also do something like this:

setInterval("reloadDiv('responseContainer')", 30000);


/* this function will be executed every 30 seconds */
function reloadDiv(the_container_id) {
if ($('#'+the_container_id).length) {
if (get_cookie("logged")=="in") {
$('#'+the_container_id).load('page.php');
}
else { window.location="login_form.php?error=Your session has expired."; }
}
}


This would allow it to run before the div has actually loaded by only executing the code if the div exists. It should hit it the second iteration.
4:05 pm on July 12, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12



reloadDiv() is being sucesfully called onLoad. But it does not continue to execute every 30 seconds.


$("#responseContainer") is null

Your script executes once, and puts the results of page.php into #responseContainer. What does page.php contain? If the results within page.php ALSO contain an element with id responseContainer, then you'll end up with 2 elements having the same id, which is invalid and may cause unpredictable behavior.

I would use Firebug to inspect the elements on your page after the first load to see if you can see responseContainer. Maybe the HTML within page.php is invalid and causing your DOM structure to break?
1:17 am on July 13, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


There is only one element named "responseContainer", I double-checked this, and "page.php" does not contain one.

I removed the onLoad from the <body>, and inserted the following just before </body>:
<script type="text/javascript">
reloadDiv();
window.onload=function() { setInterval("reloadDiv()", 30000); };
</script>


Theoretically, this should reloadDiv() once at the beginning, and then set an interval to reloadDiv() every 30 seconds.

But it is still failing to refresh. It only calls the function once at the beginning.
8:04 am on July 13, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


It only calls the function once at the beginning.


Are you sure it is only being called once? Try putting an alert() in your reloadDiv() function to check.

...this message keeps appearing every 30 seconds:
$("#responseContainer") is null


Presumably on your first call, you don't get this error? This suggests the function is being called every 30 seconds, but something in the page (ie. DOM) has been broken after the initial
load('page.php')
that is preventing your script from locating #responseContainer in subsequent calls - as others have mentioned.

Fotiman: I would use Firebug to inspect the elements on your page after the first load to see if you can see responseContainer. Maybe the HTML within page.php is invalid and causing your DOM structure to break?
8:26 pm on July 27, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


The function is being called once at the beginning and then every 30 seconds, but only executing once.

Hence, the error message that appears in the FF JS console, every thirty seconds: $("#responseContainer") is null

I have tested the validity of the HTML of both pages numerous times, and fixed a few problems, but alas, it still won't refresh the contents of my div. Once again, my function is:

function reloadDiv() { 
if(get_cookie("logged")=="in") {
$('#responseContainer').load('page.php');
alert("refresh!");
}
else {
alert("Your login session has expired");
window.location="login_form.php?error=Your session has expired.";
}
}



The div is written in HTML with a "loading message":

<div id="responseContainer">Loading</div>


And this snippet is included at the very end, just before </body>:
<script type="text/javascript"> 
reloadDiv();
setInterval("reloadDiv()", 30000);
</script>


I don't think it is a problem with the setTimeout(), I think it must be a problem with the $('#responseContainer').load('page.php');
8:58 pm on July 27, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


What does page.php output? ie. What HTML is page.php returning?
9:18 pm on July 27, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


page.php returns markup in the form of

<div> .... more markup ......</div>


Note that there is no <html>, <head>, or <body> in page.php, because those tags are part of the this page that isn't working. As I said, all markup concerned has been validated again and again.
9:42 pm on July 27, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


It's checking the validity of the document once page.php has been loaded into #responseContainer.

I'm not sure what else to suggest, that hasn't already... the code appears to work the first time it is called and there doesn't appear to be anything inherently wrong with the code you have posted.

$("#responseContainer") is null


This error appears on subsequent calls, after page.php has loaded once. This implies something has changed in your document that is preventing #responseContainer from being found. As far as JavaScript is concerned #responseContainer is no longer in the document!? This could perhaps occur if something that page.php returned was invalid? Do you have any other scripts on the page?

Is this the same in all browsers?
9:56 pm on July 27, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


What I was trying to say is that I had checked the two files independently through the W3 validator.

This page does not work properly in any browser. Tested Chrome Firefox IE Safari and Opera.
10:31 pm on July 27, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4988
votes: 12



I would use Firebug to inspect the elements on your page after the first load to see if you can see responseContainer. Maybe the HTML within page.php is invalid and causing your DOM structure to break?

Have you tried that yet?
4:28 pm on July 28, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Intriguing . . . whenever I encounter something that doesn't make sense, I break it down to the least common denominator and begin re-adding things. This appears to work . . .


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Reload Div</title>
<style type="text/css">
#responseContainer { width: 500px; height: 500px; border: 1px solid #000; }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
setInterval("reloadDiv('responseContainer')", 3000);
});
function reloadDiv(the_container_id) {
if ($('#'+the_container_id).length) {
//if (get_cookie("logged")=="in") {
$('#'+the_container_id).load('test.txt');
//}
//else { window.location="login_form.php?error=Your session has expired."; }
}
}
</script>
</head>
<body>
<h1>Test</h1>
<div id="responseContainer">Loading . . . </div>
</body>
</html>


Begin by uncommenting the conditionals and adding page.php instead of a plain text file.
5:42 pm on July 28, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


I copied and pasted bill's code (thanks much) and it worked for test.txt, but when I changed the value to page.php, it stopped working. Therefore, as we suspected, it is something to do with the page.php output breaking the DOM.

I have poured through the output of page.php, and fixed a few problems, but nonetheless it still doesn't seem to work. The page.php content is valid, with a few exceptions as follows:
- A few undefined entities, i.e. &nbsp;
- <a href='sotre_locator.php?city=San+Diego&state=CA'> where it tries to interpret &state as an entity.
- A few 'SHORTTAG YES' errors, where it hiccups over standalone tags like <br />
6:10 pm on July 28, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


The danger with the unencoded ampersand is if the browser does try and convert what it thinks is an entity into something. Although I would have thought &state should be OK as there isn't a valid entity like it.

Is the output of page.php too large to post here in its entirety?
2:33 pm on July 29, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


yes, the output of page.php is rather lengthy, plus it has information in it that does not belong out on the public web.
3:31 pm on July 29, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4988
votes: 12


stands up and speaks into megaphone
Is anyone listening?

I would use Firebug to inspect the elements on your page after the first load to see if you can see responseContainer. Maybe the HTML within page.php is invalid and causing your DOM structure to break?

Have you tried that yet?
6:44 pm on July 29, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


Yes, Fotiman, I have inspecteed the hell out of this. No errors.
8:15 pm on July 29, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4988
votes: 12


In that case, fire up Firebug and use the JavaScript console to interact with the page in real time. Can you do things like document.getElementById for that item within the console?
8:36 pm on July 29, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 317
votes: 0


Yes, I am able to interact beautifully using the JS console.
8:59 pm on July 29, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4988
votes: 12


And you can do $('#responseContainer') from the console and interact with it after the first interval has run?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members