homepage Welcome to WebmasterWorld Guest from 54.145.183.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Automatically Refreshing a Div
webfoo

5+ Year Member



 
Msg#: 4338143 posted 9:27 pm on Jul 11, 2011 (gmt 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>

 

penders

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



 
Msg#: 4338143 posted 12:08 am on Jul 12, 2011 (gmt 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?

webfoo

5+ Year Member



 
Msg#: 4338143 posted 2:44 pm on Jul 12, 2011 (gmt 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();">

webfoo

5+ Year Member



 
Msg#: 4338143 posted 2:55 pm on Jul 12, 2011 (gmt 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...

rocknbil

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



 
Msg#: 4338143 posted 3:40 pm on Jul 12, 2011 (gmt 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.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4338143 posted 4:05 pm on Jul 12, 2011 (gmt 0)


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

5+ Year Member



 
Msg#: 4338143 posted 1:17 am on Jul 13, 2011 (gmt 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.

penders

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



 
Msg#: 4338143 posted 8:04 am on Jul 13, 2011 (gmt 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?

webfoo

5+ Year Member



 
Msg#: 4338143 posted 8:26 pm on Jul 27, 2011 (gmt 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');

penders

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



 
Msg#: 4338143 posted 8:58 pm on Jul 27, 2011 (gmt 0)

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

webfoo

5+ Year Member



 
Msg#: 4338143 posted 9:18 pm on Jul 27, 2011 (gmt 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.

penders

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



 
Msg#: 4338143 posted 9:42 pm on Jul 27, 2011 (gmt 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?

webfoo

5+ Year Member



 
Msg#: 4338143 posted 9:56 pm on Jul 27, 2011 (gmt 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.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4338143 posted 10:31 pm on Jul 27, 2011 (gmt 0)


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

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



 
Msg#: 4338143 posted 4:28 pm on Jul 28, 2011 (gmt 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.

webfoo

5+ Year Member



 
Msg#: 4338143 posted 5:42 pm on Jul 28, 2011 (gmt 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 />

penders

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



 
Msg#: 4338143 posted 6:10 pm on Jul 28, 2011 (gmt 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?

webfoo

5+ Year Member



 
Msg#: 4338143 posted 2:33 pm on Jul 29, 2011 (gmt 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.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4338143 posted 3:31 pm on Jul 29, 2011 (gmt 0)

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

5+ Year Member



 
Msg#: 4338143 posted 6:44 pm on Jul 29, 2011 (gmt 0)

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

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4338143 posted 8:15 pm on Jul 29, 2011 (gmt 0)

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

5+ Year Member



 
Msg#: 4338143 posted 8:36 pm on Jul 29, 2011 (gmt 0)

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

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4338143 posted 8:59 pm on Jul 29, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved