Jump to content

Refresh

suzie

By suzie
in JavaScript

Recommended Posts

suzie Newbie

suzie

Posted
Posted

Dear , In our Website ( News Paper)...the side is done with Div Tag..So in the main pave we have many Divs, one of them contains the Breaking News( a marquee)..What I need is that this Div will refresh every 3 minutes for example...But only this Divs, and not all the page.In my code, I have the file index_update.php that contains the data of main page, and inside it calls the breaking_news.php (this file load the breaking news data)the header of this file is as follows:<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1256"><meta http-equiv="refresh" content="180"></head>but in this case all the main will be refreshed../is there a way to let only one Div to be refreshed???thanks a lot

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

ajax would be the best option i think, you could set a time limit to look at the data, this would would go to this php page, and display the results back to the main page within a container (usually a div) with a specified id, without refreshing the entire page.

Link to comment
Share on other sites
suzie Newbie

suzie

Posted
  • Author
Posted

is this right, to use this function: and to locate it in the index_update.php???<script language="javascript" type="text/javascript">new Ajax.PeriodicalUpdater('breaking-news', '/breaking-news.php', { method: 'get', frequency: 1, decay: 1});</script>

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

Out of curiosity Suzie, what function library/libraries are you using? The syntax for that Ajax function is similar to but not jQuery, I think. Definitely it looks a lot easier than vanilla JavaScript.

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

Oh, I see. Well, the jQuery syntax looks like this:

$.get('breaking-news.php', {}, function(data) {$('breaking-news').html(data);});

$.get calls the ajax get method of the jQuery object. The first value in quotes is the server side script. Between the curly braces you can put any parameters you need to send. For example, if you needed to send a userid and say a sessionid, it might look like: {'userid' : userid, 'sessionid' : <?php echo sessionid(); ?>}. The last part of the first line is the function you want to fire when the onreadystate = 200 (i.e. when the request and return have been successfully made). The 'data' parameter holds the response data from the php script. The next line finds an element with id 'breaking-news' and sets its innerHTML to the response data.That relies on breaking-news.php returning HTML in a display-ready format.You would time the function by doing something like:

setTimeout("news()", 180000);

So you need to wrap the ajax fetching script in a function called news and recursively call itself every 180000 ms:

function news() {$.get('breaking-news.php', {}, function(data) {$('breaking-news').html(data);});setTimeout("news()", 180000);}

To use jQuery you need to DL the latest build, upload it to your server and link to it as you would any other javascript file. To make events fire when all the elements of the page are loaded, you use this syntax:

$(document).ready(function() {//in here we put the first call to the breaking news script:setTimeout("news()", 180000);});

So the whole shebang looks like:

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">function news() {$.get('breaking-news.php', {}, function(data) {//either process the return data or stick it straight in its placeholder div$('breaking-news').html(data);});setTimeout("news()", 180000);}$(document).ready(function() {//in here we put the first call to the breaking news script:setTimeout("news()", 180000);});</script>

I'm a big proponent of jQuery, because it makes a lot of things really simple and I like the syntax. Note that this code is untested, by the way, and that if your php script doesn't return the content in a way that is ready to display then you will need to process it where indicated.

Link to comment
Share on other sites
HungryMind Member

HungryMind

Posted
Posted

Hi!Yes! Ajax Is Best For It...But U Can Set It To Javascript Too.Try This Code:

<html><head><script>// Check Both Function...// These Are Calling Each Other After Every 5000:(5sec).// First Time U'll Have To Call: function setText();// Then It'll Start Loop// It'll Call function Autorefresh()// Then AutoRefresh Will Call Bach setText();// Like That Your Loop Will Be Start.// I Don't Know Y It's Not Working On I.E 6 :S But Google Chrome.function setText(){     keywords = ["saturday", "sunday", "monday", "tuesday", "wednesday", "friday"];     keyword = keywords[Math.floor(Math.random()*keywords.length)];     document.getElementById("mydiv").innerHTML=keyword;     AutoRefresh();}function AutoRefresh() {     setTimeout('setText()',1000);}</script></head><body>	<div id="mydiv" style="background: #ccc; padding: 10px; font: bold 14px arial;">		<script>setText();</script>	</div></body></html>

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted
Hi!Yes! Ajax Is Best For It...But U Can Set It To Javascript Too.Try This Code:
<html><head><script>// Check Both Function...// These Are Calling Each Other After Every 5000:(5sec).// First Time U'll Have To Call: function setText();// Then It'll Start Loop// It'll Call function Autorefresh()// Then AutoRefresh Will Call Bach setText();// Like That Your Loop Will Be Start.// I Don't Know Y It's Not Working On I.E 6 :S But Google Chrome.function setText(){     keywords = ["saturday", "sunday", "monday", "tuesday", "wednesday", "friday"];     keyword = keywords[Math.floor(Math.random()*keywords.length)];     document.getElementById("mydiv").innerHTML=keyword;     AutoRefresh();}function AutoRefresh() {     setTimeout('setText()',1000);}</script></head><body>	<div id="mydiv" style="background: #ccc; padding: 10px; font: bold 14px arial;">		<script>setText();</script>	</div></body></html>

Um...while this is a workable example of how to use setTimeout, it doesn't exactly do what the OP specified.
Link to comment
Share on other sites
suzie Newbie

suzie

Posted
  • Author
Posted

thanks a lot for your help, I am gonna try it now..my codethe index_update.php call breaking_news.php:<div class="breaking-news"> <div class="title-brkg"><img src="images/arrow-red.gif" width="8" height="8" />last news</div><marquee style="padding-left:5px; padding-right:5px;" behavior="scroll" direction="up" onMouseOver="this.stop();" onMouseOut="this.start();" scrollamount="1" scrolldelay="50" truespeed="1"><?php require_once "breaking_news.php" ?></marquee></div> breaking_news.php:<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1256"><!--<meta http-equiv="refresh" content="180">--><title>News Paper</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">function news() {$.get('breaking-news.php', {}, function(data) {//either process the return data or stick it straight in its placeholder div$('breaking-news').html(data); <!-- here should I include the Script??-->});setTimeout("news()", 180000);}$(document).ready(function() {//in here we put the first call to the breaking news script:setTimeout("news()", 180000);});</script></head><body> <?php include"connect_breaking.php"; $news_array = ""; //--- Display current news: $q = "SELECT news,date_time FROM breaking_news ORDER BY date_time DESC"; if($r=odbc_exec($sqlconnect, $q)) while(odbc_fetch_row($r)) { $news = odbc_result($r,"news"); $t = odbc_result($r,"date_time"); $time = $t[11].$t[12].$t[13].$t[14].$t[15]; $news_array = $news_array."<a onmouseover=\"this.style.cursor='pointer'\" onclick=\"window.open('breaking_news_all.php','breakingnews','width=530,height=290,scrollbars=yes')\" title=\"All news\"><span style=\"font-family: Tahoma; font-size:10px; color:#3399cc\"><b>$time</b> - </span>$news</a><br><br> "; } print"$news_array"; odbc_close($sqlconnect); ?></body></html>

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

That's where I would put the script, yeah. When you upload the jQuery library, either rename it jquery.js on the server, or change the path where it is linked to appropriately.NB: You don't need to include the breaking-news.php script.

Link to comment
Share on other sites
suzie Newbie

suzie

Posted
  • Author
Posted

I downloaded the "jquery-1.4.2.min.js"...and here in my case what should I put in Place of function(data) and$('breaking-news').html(data); from the code you gave methanks a lot a lot for your help

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

AJAX works by sending data to, and receiving data from, a PHP script that is hosted on your server but which is not part of the current document. PHP is processed before HTML and JavaScript, as I'm sure you know. In an AJAX function, we cause the PHP script to run on the server and have the PHP send data back to the page.So you enter the AJAX script in the page in which the breaking news will appear, and task breaking-news.php with the job of fetching the news from the database and sending that data.For example, your breaking-news.php script might look like:

<?phpinclude_once("db_connection.php");doDB();$sql = "SELECT * FROM news SORT BY date DESC LIMIT 1"; //so we fetch only the newest article$res = mysqli_query($conn, $sql) or die("Mysqli error: ".mysqli_error($conn));if(mysqli_num_rows($res) > 0) {$info = mysqli_fetch_assoc($res);$heading = $info["heading"];$body = $info["body"];echo "<h2>$heading</h2><p>$body</p>";}?>

The ajax function on any pages on which you want the breaking-news div to be updated will cause this script to run and receive the formatted heading and body, and display it in the div. So, example-page.html might look like:

<html><head><title>Some Title</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">function news() {$.get('breaking-news.php', {}, function(data) {//either process the return data or stick it straight in its placeholder div$('breaking-news').html(data);});setTimeout("news()", 180000);}$(document).ready(function() {//in here we put the first call to the breaking news script:setTimeout("news()", 180000);});</script></head><body>//other page elements<div id="breaking-news"></div>//more page elements</body></html>

Link to comment
Share on other sites
suzie Newbie

suzie

Posted
  • Author
Posted

Ok, so I place the ajax in the file from where I call Breaking_News.php ( that contains the data)..and this file is called Index_update.php ( Idon't use .html file)...index_update.php calls Breaking_News.php in this way:<div class="breaking-news"> <div class="title-brkg"><img src="images/arrow-red.gif" width="8" height="8" />Last News</div><marquee style="padding-left:5px; padding-right:5px;" behavior="scroll" direction="up" onMouseOver="this.stop();" onMouseOut="this.start();" scrollamount="1" scrolldelay="50" truespeed="1"><?php require_once "breaking_news.php" ?></marquee></div> so does this work in this way

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

Nope, that's not how it works. On the page that contains the div to hold the breaking news, you put the script I wrote. When breaking-news.php prints $news_array, that array is the parameter 'data', here:$.get('breaking-news.php', {}, function(data) {//either process the return data or stick it straight in its placeholder div$('breaking-news').html(data);});If you post the entirety of the original breaking-news.php and any other page from your site on which you want the breaking news to be displayed, I'll show you.

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

sort of. In this page you have a script which MAKES a request TO your breaking_news.php page, somewhere on your server. The user never sees or interacts with breaking_news.php. The page acts never to be seen, only to take IN requests (via the AJAX script on the index_update page) and RETURN the information it gets (say from a database) BACK to the index_update page where the rest of the script accepts that information and uses it in the page somehow.The example chibeniku is showing you is that when the document is finished loading, an interval is set to call a function after 18000 milliseconds (?), which as we know makes a REQUEST to breaking_news.php, which gets info and RETURNS it to this function, which then does something with it in the page.

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted
an interval is set to call this get_news function after 18000 milliseconds (?)
That's 3 minutes, right?
Link to comment
Share on other sites
  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...