How do i make a Div reload every few seconds say for a clock or to show current online users in realtime with something like ajax for a reload. And would these really affect the performance of the database much doing these tiny calls every now and then though i think its not much of a problem.
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Ajax Div reload
- Thread starter Cabbit
- Start date
- Sort by reaction score
Look at the JavaScript function setTimeout() to call some code every so often. If you need to make Database calls, then yes you'll need AJAX. Often these calls are just text based so they won't be hogging much bandwidth, surely less than reloading the whole page. Depending on what you're reloading you can do checks to see if you really need to do a reload or not at that time so you can skip it some times.
The clock example you gave doesn't need AJAX since JavaScript can access the system clock and so won't need to make a server call.
The clock example you gave doesn't need AJAX since JavaScript can access the system clock and so won't need to make a server call.
Correct AJAX is for server side calls of code through JS, traditionally database related but not limited to that scope.
Great example showing a JS clock with complete source including setTimeout in action:
http://www.javascript-page.com/clock.html
Note: I'm not in favor of clocks on web pages, everyone has a different time zone and even though JS can tell you the offset from GMT used to calculate the local time, it's clunky since a user might be on a machine set to the wrong time zone or default GMT, and the webmaster might want all times to display based on their location (server) not the user. Both can be done with JS, but static times added into HTML (i.e. promoting an upcoming event) vs. displayed time via JS might differ and could confuse users. And those with JS disabled see nothing, of course.
On top of all that, this method potentially steals focus away from input elements on the page in forms, which is why applets and Flash are more commonly used for clocks - if you need one at all. They also look much nicer graphically.
-jim
Great example showing a JS clock with complete source including setTimeout in action:
http://www.javascript-page.com/clock.html
Note: I'm not in favor of clocks on web pages, everyone has a different time zone and even though JS can tell you the offset from GMT used to calculate the local time, it's clunky since a user might be on a machine set to the wrong time zone or default GMT, and the webmaster might want all times to display based on their location (server) not the user. Both can be done with JS, but static times added into HTML (i.e. promoting an upcoming event) vs. displayed time via JS might differ and could confuse users. And those with JS disabled see nothing, of course.
On top of all that, this method potentially steals focus away from input elements on the page in forms, which is why applets and Flash are more commonly used for clocks - if you need one at all. They also look much nicer graphically.
-jim
thanks for the replys guys, i do need to use database calls for this thing so that when a user is say on the chat page it will show up on the main page that the user is there or when a user logs in instead of the user refreshing. The site need s a site wide time because the chat meetings are set to local time for me and that is not local time for the users that come form germany, france, usa, japan. So a set time with a simple clock showing server time only is what im after nothing more fancy than styled text. the site already dose this it just requres the entire refresh of the page to change the time witch is not the best way when i can have the minutes change naturally.
Any refrence's to a learning how to code ajax specific to my needs would help i am only used to php i havent used java nor ajax yet.
Any refrence's to a learning how to code ajax specific to my needs would help i am only used to php i havent used java nor ajax yet.
I follow you.
I have an upcoming chat calendar setup on one of my international forums and it includes what date/time the next chat will occur, using the client's timezone offset to display the start time as per their time zone. I opted to do this instead a real time clock. You can store the time in a database and script a solution to query the database and generate the JS dynamically so the user would see "Next chat at 1/23/2008 12:34PM EST" (example).
Just an informal suggestion.
I can't offer advice on AJAX "specific to your needs" as I agree with the other user, you don't need AJAX to display a real time clock. But for retrieving any value from a DB via AJAX for whatever purpose you want, read below.
For general AJAX tutorial: http://www.w3schools.com/ajax/default.asp
If you happen to be using PHP, I use Ace for AJAX - it involves working with PHP object oriented coding, i.e. classes. This is an advanced technique that allows you to create your own classes in PHP and work with a result function, percent completion function and a great error trap function with your data passed as arguments. It also requires declaring all argument variable types to stop SQL injection and hacking techniques which AJAX is vulnerable. This is a resource efficient open source solution using OOP (object oriented programming) alongside JS.
This means incredibly powerful and fast as well - a professional solution.
It's up to you to create the scripts to store the chat start time, check for DST, update the DB, and later in your scripts use AJAX to query the DB, parse and format the time for human readability, and display it in place in a div which calls the JS function which invokes ACE.
Details (membership is free to phpclasses.org) for ACE are here: http://www.phpclasses.org/browse/package/3308.html
ACE makes doing all the above one integrated class package - so long as you know how OOP works with PHP of course. If not, start with the general tutorial and go from there.
-jim
I have an upcoming chat calendar setup on one of my international forums and it includes what date/time the next chat will occur, using the client's timezone offset to display the start time as per their time zone. I opted to do this instead a real time clock. You can store the time in a database and script a solution to query the database and generate the JS dynamically so the user would see "Next chat at 1/23/2008 12:34PM EST" (example).
Just an informal suggestion.
I can't offer advice on AJAX "specific to your needs" as I agree with the other user, you don't need AJAX to display a real time clock. But for retrieving any value from a DB via AJAX for whatever purpose you want, read below.
For general AJAX tutorial: http://www.w3schools.com/ajax/default.asp
If you happen to be using PHP, I use Ace for AJAX - it involves working with PHP object oriented coding, i.e. classes. This is an advanced technique that allows you to create your own classes in PHP and work with a result function, percent completion function and a great error trap function with your data passed as arguments. It also requires declaring all argument variable types to stop SQL injection and hacking techniques which AJAX is vulnerable. This is a resource efficient open source solution using OOP (object oriented programming) alongside JS.
This means incredibly powerful and fast as well - a professional solution.
It's up to you to create the scripts to store the chat start time, check for DST, update the DB, and later in your scripts use AJAX to query the DB, parse and format the time for human readability, and display it in place in a div which calls the JS function which invokes ACE.
Details (membership is free to phpclasses.org) for ACE are here: http://www.phpclasses.org/browse/package/3308.html
ACE makes doing all the above one integrated class package - so long as you know how OOP works with PHP of course. If not, start with the general tutorial and go from there.
-jim
Based on what you just said, assuming you're storing the time in a flat file on the server in the same directory:
1) Write a small script in a language your server supports and directly include it, i.e. in PHP:
<?php include_once "time.txt"; ?>
2) If your server supports SSI (server side includes) then use this:
<!--#include file="time.txt" --> (might need to rename page as *.shmtl)
Easy enough?
Use the original solution (the javascript code) I linked for you so users see the start time in their local time, but of course insert the chat start time using PHP or SSI code directly within the JavaScript code, all of that within the div tags.
I always recommend storing times as Unix timestamps! Don't forget JS stores timestamps with milliseconds!
-jim
1) Write a small script in a language your server supports and directly include it, i.e. in PHP:
<?php include_once "time.txt"; ?>
2) If your server supports SSI (server side includes) then use this:
<!--#include file="time.txt" --> (might need to rename page as *.shmtl)
Easy enough?
Use the original solution (the javascript code) I linked for you so users see the start time in their local time, but of course insert the chat start time using PHP or SSI code directly within the JavaScript code, all of that within the div tags.
I always recommend storing times as Unix timestamps! Don't forget JS stores timestamps with milliseconds!
-jim
Reminder: http://www.javascript-page.com/clock.html
(View the source there, please)
It uses a form to update in place but if you wanted to use a div instead, you'd do this:
find:
CHANGE TO:
Assign an ID in your div and replace "your_div_id" in the code above with your actual DIV's ID.
The script I linked for you displays the current time in position, i.e. a fully functional digital clock using the user's local time zone. You can lookup the JS data object to format the date, add time zone on, as you wish. This is just to show you how the div is updated by any JS function called via setTimeout which answers your original request.
AJAX isn't for beginners, if you find you need that solution, following my previous advice with that tutorial, and you NEVER want to repeat AJAX calls once every second or so (thrash your server), i.e. it's not intended for clock displays, respectfully.
-jim
(View the source there, please)
It uses a form to update in place but if you wanted to use a div instead, you'd do this:
find:
Code:
document.theClock.theTime.value = ""
+ tDate.getHours() + ":"
+ tDate.getMinutes() + ":"
+ tDate.getSeconds();CHANGE TO:
Code:
var current_time = document.getElementById('your_div_id');
current_time.innerHTML = ""
+ tDate.getHours() + ":"
+ tDate.getMinutes() + ":"
+ tDate.getSeconds();Assign an ID in your div and replace "your_div_id" in the code above with your actual DIV's ID.
The script I linked for you displays the current time in position, i.e. a fully functional digital clock using the user's local time zone. You can lookup the JS data object to format the date, add time zone on, as you wish. This is just to show you how the div is updated by any JS function called via setTimeout which answers your original request.
AJAX isn't for beginners, if you find you need that solution, following my previous advice with that tutorial, and you NEVER want to repeat AJAX calls once every second or so (thrash your server), i.e. it's not intended for clock displays, respectfully.
-jim
the clock is fine. its the getting the online users and for users coming to the chat. to refresh these divs every 60 seconds perhaps. as a lot of people spend a lot of time on one page reading content and miss users logging in or joining the chat sessions.
I bought 123 Flash Chat for my actual chat room, which uses Java on the server to interface with a powerful Flash GUI, up to 250 users. Outside the room, the listing of who's in chat currently is database maintained and the software author provides a hack for PHP to insert that listing into my forum.
However, I don't continually update the "who's online" in the forum because the page is also used for the forum main index. So updating even every 60 seconds would cause a tremendous load on the server (and slow the chat room down as well). Internally, the Java/Flash user listing is managed independently by a dedicated daemon running directly on the server with its own resources. Thus, the list of users in the room updates efficiently. And of course that's why it's a $600.00 solution - it's a professional implementation to ensure the server isn't advesely affected.
That's not how AJAX works, nor how simple div text replacement works.
Just wanted to be clear on this - you could be doing more harm than good by introducing the refresh in the way you described.
I feel responsible to make this observation, it comes from considerable experience making mistakes, so I'm passing along what I've learned - this is only my opinion, of course.
Good luck with the project, you've got plenty of code examples here to see how JS setTimeout() works with functions and div innerHTML replacement so the rest is up to you.
-jim
However, I don't continually update the "who's online" in the forum because the page is also used for the forum main index. So updating even every 60 seconds would cause a tremendous load on the server (and slow the chat room down as well). Internally, the Java/Flash user listing is managed independently by a dedicated daemon running directly on the server with its own resources. Thus, the list of users in the room updates efficiently. And of course that's why it's a $600.00 solution - it's a professional implementation to ensure the server isn't advesely affected.
That's not how AJAX works, nor how simple div text replacement works.
Just wanted to be clear on this - you could be doing more harm than good by introducing the refresh in the way you described.
I feel responsible to make this observation, it comes from considerable experience making mistakes, so I'm passing along what I've learned - this is only my opinion, of course.
Good luck with the project, you've got plenty of code examples here to see how JS setTimeout() works with functions and div innerHTML replacement so the rest is up to you.
-jim