Auto Load and Refresh Div every 10 Seconds with jQuery.

Srinivas, Very nice and useful tutorials.Keep them coming.Already subscribed to your site rss feeds. Also nice pics.Your school pics reminded me of my school-
Think of having a domain of your own-

kalyan

cool, but this time no hosted sample

Yoosuf
http://eyoosuf.blogspot.com/

Any chance for a demo of this? I'm trying to modify it to do something slightly different, but am struggling just a bit. Also, it doesn't appear to have any sort of fading in it whatsoever; it'd be nice if it faded in and out.

I'd be interested in the memory consumption of this, especially in IE. Can we do a test and let it run for a while? My guess is that having a full closure with Dom access (even if jQuery cleans up) in a setInterval() would use up a lot!

Hi I love this, I have a social network site like myspace and I can use this on the homepage to show new notifications for new mail messages, comments, photo comments, friend request and more.

1 problem though, lets say I have it refresh every 60 seconds, on initial page load, I need a way for it to load instantly, then start the timer for refreshing instead of waiting 60 seconds, do you know how I can do that, I havent been able to find the solution anywhere on the net for that so far.

Hola me párese un excelente blog con una muy buena y atractiva temática, saludos y hasta siempre.

Firma: http://lomascodiciadodelplaneta.blogspot.com

Love your script..

For some strange reason I cant get it to work...

Instead of loading external php file could the script load another div and it's contain..

Thanks in Advance...
I tried in on my social network for models and signers - http://www.urbaniq.net - I wanted to auto load their profile updates..

Thx for your script! Very good work and help from your side! Thx man!

very nice information. thanks!

Awesome plugin!! great job. Tested it and I’m really digging it. can’t wait to use it on my live site!!

superb work!

I notice that in example 1, you have the body elements within the overall script tag... is that intentional? Shouldn't the script close before the body appears?

Spelling?
Change form to FROM or from

Either way, Example 2 still doesn't work!
Post a demo...

Works like this:
record_count.php?q=ui
Result: 1

Doesn't work like this:
index.php?q=ui
Result: 17 //all rows returned

Like I say post a demo for example 2.

Ignore last comment;

Remove all the \ backslashes.

This works with form being GET or POST...
---
index.php
---
$(\'#load_tweets\').load(\'record.php\?\q=<\?\php echo $q; \?\>\').fadeIn(\"slow\");

input name="q" type="text" id="q" value="\<\?\php echo $_POST['q']; \?\>"

---
"record_count.php"
---
//connection to the database
$username = "username";
$password = "password";
$hostname = "hostname";
$dbname = "yourdbname";
$dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
//echo "Connected to MySQL
";
$selected = mysql_select_db($dbname,$dbhandle) or die("Could not select demo");

$q=$_GET['q'];
$sql = mysql_query("SELECT id FROM Messages WHERE message LIKE '%$q%'");
$record_count=mysql_num_rows($sql);
//Display count.........
echo $record_count;

Remove all the \ backslashes.

Just wondering what the point is of setting the var for setInterval

Hi, this would only show you the total amount of tweets/posts. What if I only wanted to show total since page load?

Thank you

Awesome post srinivas.

Very nice plugin, will come in very handy.

sorry for my bad english.

Although data updates are added?

Example: monitter.com

like this how can we do?

ERROR WHEN CODE IS INSIDE A FILES.

How to use it : $(document).ready(function()

I'm sorry but it doesn't run with IE8 ...

Nice Post. I'm always using jquery load function almost all of the time.
Thanks for this post.

i try use this code but , when i try to print some string i'ts doesn't show on ie?? and then i try change my header with this :
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

and work's fine.thanks

Could anyone share working files of this lesson? I've tried apply this lesson for Joomla module and I can't. Please sent this to dposte07@aol.fr
Thanks.

Nice script, but it's not working properly with IE8 :(

Is any solution for this?

Thanks.

Nice idea. Is it possible to update on changes only and show it like this:

> New Message
> Old Message1
> Old Message2
> ...

it's nice ...
and i have another way to "load page" or "load DIV" in PAGE after reqeuest or Change..:

$('#div').load('index.php?view=3 #div','');

good luck
mk1364it@gmail.com

Nice post dude
Thanx for sharing

I confirm.

Not working under IE 8

Any luck with making this work with IE would be much appreciated

nice code.can you help me about showing remainin seconds ? how can i display this.

Any examples in .aspx instead of .php? :$ Yes, I'm a Microsoft geek... :$

well,but i can't run it perfectly pls demonstrate me .....

nicely done

i cant seem to get example 1 working,i have done exactly what it says any suggestions?

jasondavis :

here's my example... use this instead..


$(document).ready(function(){ $('#load_tweets').load("count.php").mouseover(function(){
var auto_refresh = setInterval(
function(){
$('#load_tweets').fadeOut('slow').load('count.php').fadeIn("slow");}, 3000);
return false;
});
});

hi, I have some problems. I had to run three scripts sequentially.
1. I use the toggle() to display the menu.
2. after I choose one of the menu, will show new windows (popup: dhtmlxWindows) in new windows which contains a form.
3. I submit the form (in a popup: dhtmlxWindows) which then perform the function $.ajax(). if the function $.ajax() successful, will reload the new div.

here is the problem, after the $.ajax() runs successfully, and reload the new div, I can not call functions JQuery / Javascript others. eg I can not call toggle() again to select the menu. Can you help me?

thanks

Hi
Firstly thank you for all your great tutorials. One problem I've encountered is the use of .load() in IE8. When on a page that has several AJAX calls, .load() can sometimes throw back a 'Bad Request' error.

Does anyone know of a good way of fixing this? Right now I have just $.post to solve the problem and it is working fine.

IE problem resolved:

this script will have problem if combine with
http://www.9lessons.info/2009/11/facebook-style-application-with-jquery.html
am i rite? is there any way to integrate both code..

its amazing i will test it now... :)

This does work, but appears to cause constant memory growth for IE and Firefox. Is there a way to force garbage collection or clear out the DOM to keep this from happening?

2 FULLY FUNCTIONAL EXAMPLES

//ONCLICK
$(document).ready(
function(){$('#refresh1').click(
function(){$('#responsecontainer1').fadeOut('slow').load('test.php?randval='+ Math.random()).fadeIn("slow",function(){
alert('complete updated');
});
//return false;
});
});
**********************************************

//TIMER
$(document).ready(function() {
$("#responsecontainer2").load("test.php");
var refreshId = setInterval(function() {
$("#responsecontainer2").load('test.php?randval='+ Math.random());
}, 1000);
});

//ONCLICK
$(document).ready(
function(){$('#refresh1').click(
function(){$('#responsecontainer1').fadeOut('slow').load('test.php?randval='+ Math.random()).fadeIn("slow",function(){
alert('complete updated');
});
//return false;
});
});

//TIMER
$(document).ready(function() {
$("#responsecontainer2").load("test.php");
var refreshId = setInterval(function() {
$("#responsecontainer2").load('test.php?randval='+ Math.random());
}, 1000);
});

Great! Keep post Thank you ! :)

Very good. Now i have a question. How can i create a javascript code with this so that if my visitors put the code
script language=javascript src=mypage.php

in their page, they will see each time there is update on my website ?

Oh, can someone help me ?

can anyone make it work in social engine 3?

how to combine mouseover event in thats script..

please...

loop replay

thnkx brother Tamada
its usefull

This what I'm looking for, thanks

nice tutorial, that i'm looking for, thanks you :D

very nice, me also looking for this type of code...thanks..:)

is it possible to put a thickbox inside this code???

nice, thanks for the article, I save this page.

hi..just wanna know do i need to change the (load_tweets)? div?..cuz right now i have fillup form when i type on the editbox and when it refresh the the stuff i typed it dissapaired..

thanks

thanks man

phemon!
using this as a jquery hook just made my life so much easier.

You have to take out body to /body out of /script tag then after it works only

@jasondavis you can call function first something like this ;

$(function(){
$('#load_tweets').fadeOut("slow").load('record_countphp').fadeIn("slow")
})
$.ajaxSetup({ cache: false });
var load = function() {
$('#load_tweets').fadeOut("slow").load('record_count.php').fadeIn("slow");
};
var auto_refresh = setInterval(load, 60000);
load();

First of all, thank you very much for the example codes.

I have tried the example 1 successfully.

In the PHP code I call with the $('#div').load function I generate links to other PHP files in my server.

I need to load these new files in a DIV from the main page, but I don't know how to access elements from the main page from the loaded PHP code.
Any suggestions?

With memcached work better)

hi,its not working in IE AND FIREFOX..

Brilliantly simple.

what program did u use to do the circles, and arrows in this post image, did u use a wacom pen? o some software, please answer me.

very good, i like it !

hmm this site is really awesome and informative to me, i am also gonna share this site to my friends.

For those of you experiencing the IE memory growth problem, you can add the following code before using any jQuery:

var myAjax = function(settings) {
var newSettings = $.extend({}, settings, {
complete: function (xhr, status) {
if (settings.complete) {
settings.complete(xhr, status);
}
// Avoid IE memory leak
xhr.onreadystatechange = null;
xhr.abort = null;
}
});
$.ajax(newSettings);

Nice demo with useful codings...

Will it work with jsp??

thanks

Good Tutorial
Tks Srinivas

thanks ...

is it possible to load only the contents of div instead calling for .load('another page')
ex:
Div1 = #contents (no refresh required)

Div2 = #contents2 (no loading of another page require refresh every xx seconds)

IE working fix do all of these:

Add your top of php;

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Content-Type:text/javascript;charset=utf-8");

also start script in your page like this:


var auto_refresh = setInterval(
function()
{
$.ajaxSetup({ cache: false });

---your codes here
---your codes here
---your codes here

with .click function it loads every time new contents, it makes a chain of contents.how can we stop this behavor? can any body help ............

Superb article, this is what am looking for. Thanks lotzz.

now i know how... thanks dude! :)

Ho its really nice

What happens if the PHP script takes more than 10 seconds to return the data ?

just what i needed

That's perfect! Thanks!

Yes boi u a star it helped : but ivans helped me very well //TIMER
$(document).ready(function() {
$("#responsecontainer2").load("test.php");
var refreshId = setInterval(function() {
$("#responsecontainer2").load('test.php?randval='+ Math.random());
}, 1000);
});

nice

its to many used resouces memory in server.

I have a php file with a div inside. I want to have another script in same file that autorefreshes the div without reloading a whole page when I include this file in another file.

Example: banners.php included on home.php
reload banners.php without reloading home.php

Help?

Very helpful tutorial .. thank youuu >_<

Cool, thank you

This is very nice........:)