homepage Welcome to WebmasterWorld Guest from 54.234.225.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
How to make page title, auto refresh every x seconds (using javascript/jquery/others)
basketmen




msg:4450252
 7:06 am on May 7, 2012 (gmt 0)

I have a php file lets say file1.php, that printing a variable, its dynamic numbers output that already always increasing, like private message numbers that coming or others :

[PHP]
<?php
echo $variable
?>
[/PHP]



i want to put that variable output, in another files page title, lets say file2.php or file3.html,
in the front of the another files page titles, and auto refresh every x seconds, maybe like this :

(1) - another text in the page title


after x seconds, get a private message
(2) - another text in the page title


after another x seconds, get another private message
(3) - another text in the page title






or its ok if just like this, only the variable, without the another text in the page title
(1)






please share your knowledge to make it, maybe using javascript, jquery or others

 

Fotiman




msg:4450899
 4:11 pm on May 8, 2012 (gmt 0)

I'd start by breaking this into smaller chunks.

/**
* Update the page title.
* @param {string} newValue The new title to set as the page title.
*/
function setPageTitle(newValue) {}

/**
* Given a message count, update the page title with the value.
* @param {string} msgCount The message count.
*/
function messageCountAsPageTitle(msgCount) {}

/**
* Send an AJAX request to get the message count from the server.
* @param {function} callback The function to call when the request completes.
* The callback should take 1 parameter, the string value of the message count.
*/
function getMessageCount(callback) {}


Then tackle each method one at a time.

/**
* Update the page title.
* @param {string} newValue The new title to set as the page title.
*/
function setPageTitle(newValue) {
document.title = newValue;
}

This method is so basic, we may end up eliminating it and just setting document.title directly from where we would have called this. However, it's helpful to see the required functionality broken down.

/**
* Given a message count, update the page title with the value.
* @param {string} msgCount The message count.
*/
function messageCountAsPageTitle(msgCount) {
// TODO: determine where 'another text in the page title' should be defined
setPageTitle('(' + msgCount + ') - another text in the page title');
}

That method is just doing some formatting of the string. Need to determine what "another text in the page title" should be and where that should be defined. For example, you may want to get the page title once when the page first loads, and use that text instead, allowing this script to go on any page in your site.

Now for the biggest chunk, the AJAX request.

/**
* Send an AJAX request to get the message count from the server.
* @param {function} callback The function to call when the request completes.
* The callback should take 1 parameter, the string value of the message count.
*/
function getMessageCount(callback) {
var url = 'file1.php?' + (new Date()).getTime(), // prevent caching
xhr = getXHR();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.responseText);
}
};
xhr.timeout = 20000; // Set the timeout to be less than the frequency we call this
xhr.open("GET", url, true);
xhr.send();
}

Let me preface by saying I haven't tested this. :) I think it should work though. It requires that you have a getXHR function defined (see [webmasterworld.com...] for an example).

Lastly, we need to kick it off:

setInterval(function() {getMessageCount(messageCountAsPageTitle);}, 30000);


This is setting the interval to every 30 seconds (note, I set the timeout on the xhr to 20 seconds).

Please be sure to post your success or questions here. :)

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