1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 4:31 am May 21, 2026

Forum Moderators: open

Message Too Old, No Replies

Automatically Refreshing a Div

         

webfoo

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

10+ Year Member



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>

penders

12:08 am on Jul 12, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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?

webfoo

2:44 pm on Jul 12, 2011 (gmt 0)

10+ Year Member



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();">

webfoo

2:55 pm on Jul 12, 2011 (gmt 0)

10+ Year Member



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...

rocknbil

3:40 pm on Jul 12, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

Fotiman

4:05 pm on Jul 12, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




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?

webfoo

1:17 am on Jul 13, 2011 (gmt 0)

10+ Year Member



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.

penders

8:04 am on Jul 13, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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?

webfoo

8:26 pm on Jul 27, 2011 (gmt 0)

10+ Year Member



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');

penders

8:58 pm on Jul 27, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



What does page.php output? ie. What HTML is page.php returning?

webfoo

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

10+ Year Member



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.

penders

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

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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?

webfoo

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

10+ Year Member



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.

Fotiman

10:31 pm on Jul 27, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




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?

rocknbil

4:28 pm on Jul 28, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

webfoo

5:42 pm on Jul 28, 2011 (gmt 0)

10+ Year Member



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 />

penders

6:10 pm on Jul 28, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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?

webfoo

2:33 pm on Jul 29, 2011 (gmt 0)

10+ Year Member



yes, the output of page.php is rather lengthy, plus it has information in it that does not belong out on the public web.

Fotiman

3:31 pm on Jul 29, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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?

webfoo

6:44 pm on Jul 29, 2011 (gmt 0)

10+ Year Member



Yes, Fotiman, I have inspecteed the hell out of this. No errors.

Fotiman

8:15 pm on Jul 29, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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?

webfoo

8:36 pm on Jul 29, 2011 (gmt 0)

10+ Year Member



Yes, I am able to interact beautifully using the JS console.

Fotiman

8:59 pm on Jul 29, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 4:31 am May 21, 2026