Refresh

[suzie]

Dear Friends,In the website we are building, on main page we have Breaking-news Box, that read the data from a .php file ( that read from an sql table). I want that this data to be refreshed every 3 minutes for example to always post the new breaking-news entered.In the .php file I inserted the following:<meta http-equiv="refresh" content="180">but with this all the page is refreshed( as if we press on F5)what I need is that only the breaking-news box will be refreshed and not all the page..Any help pleasesuzie

[Synook]

Have you looked at AJAX?

[suzie]

no, am not using ajax...

[Synook]

Well, I'm suggesting you do consider it; that way you can use JavaScript to make HTTP requests on a page that only contains the "breaking news" markup and display it on the page without having to refresh the entire document.

[suzie]

Well, I'm suggesting you do consider it; that way you can use JavaScript to make HTTP requests on a page that only contains the "breaking news" markup and display it on the page without having to refresh the entire document.

Ok, but what javascript I have to use??thanks a lot for your help

[suzie]

I want to refresh just one Div

[chibineku]

The AJAX syntax can be indimidating because it's a little complicated. You can learn it (or copy it) from the examples in the W3Schools AJAX tutorial or you can cheat and use jQuery, which simplifies AJAX calls.I recommend learning it, so you understand what's going on, and you are also advised to learn a goodly amount of JavaScript before learning jQuery.My disclaimer out of the way, here's what a typical AJAX function would look like to do what you want.Say your breaking news page contains markup like this:

<h1>OMG - Britney's socks don't match!</h1><p>In a sartorial tragedy of earth shattering proportions, Britney Spears was spotted out and about in LA.  Nothing surprising there but, on the fateful afternoon of April 29th, not only was she wearing socks with sandals, but her socks didn't even match!</p><p><a href="/britney_story.html">Click here for the full story + shocking images!</a></p>

With jQuery included in your document (you can follow the very straightforward directions at jQuery.com), your breakingNews function might look like this:

function breakingNews() {$.get("breaking_news.html", {}, function(data) {$('#news_box').html(data);timer;}var timer = setTimeout("breakingNews()", 180);

I haven't tested that, but it's the general idea.

[Synook]

Did you read the AJAX tutorial?

[thescientist]

The AJAX syntax can be indimidating because it's a little complicated. You can learn it (or copy it) from the examples in the W3Schools AJAX tutorial or you can cheat and use jQuery, which simplifies AJAX calls.I recommend learning it, so you understand what's going on, and you are also advised to learn a goodly amount of JavaScript before learning jQuery.My disclaimer out of the way, here's what a typical AJAX function would look like to do what you want.Say your breaking news page contains markup like this:

<h1>OMG - Britney's socks don't match!</h1><p>In a sartorial tragedy of earth shattering proportions, Britney Spears was spotted out and about in LA.  Nothing surprising there but, on the fateful afternoon of April 29th, not only was she wearing socks with sandals, but her socks didn't even match!</p><p><a href="/britney_story.html">Click here for the full story + shocking images!</a></p>

you'd make a good writer for the paps. :)Although a simple timer function and AJAX call written on her own would be simple enough and a good learning experience, rather than just going straight to jQuery, where I think it might look even more confusing and intimidating.

[ShadowMage]

Although a simple timer function and AJAX call written on her own would be simple enough and a good learning experience, rather than just going straight to jQuery, where I think it might look even more confusing and intimidating.

Agreed. AJAX isn't that hard. To be honest, from what I remember of the jQuery way, I think I'd rather do it the long way. It's easier for me to see exactly what should be happening.

[chibineku]

I realised as soon as I sent this that there was an error with my function anyway, but I couldn't stay to fix it.It's actually simpler than I made it out to be and doesn't involve the AJAX class at all.This would be the function using jQuery's .load() method:

function breakingNews() {$('#news_box').load('http://www.domain.com/breaking_news.html');timer;}var timer = setTimeout("breakingNews()", 180);

Edit: As ShadowMage, thescientist and Synook said, it's better to learn this stuff too and not depend on other's code.