The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
The Guiding Principles and New Rules document is now in effect.
AJAX question: How to reload section of page without refreshing entire thing?
frankthetank
Registered User regular
Registered User regular
Hey there!
I've got a fairly simple working PHP script here that basically outputs a random row's information from my database table to my website on each page load. Thing is, the user has to manually 'reload' the browser (causing the whole page to reload each time) for the script to pull an new entry. I am looking for a solution that will reload my script every 5 seconds or so without reloading the page. I understand this might be a job for some AJAX functionality, but I am quite new to javascript. Any pointers?
I've got a fairly simple working PHP script here that basically outputs a random row's information from my database table to my website on each page load. Thing is, the user has to manually 'reload' the browser (causing the whole page to reload each time) for the script to pull an new entry. I am looking for a solution that will reload my script every 5 seconds or so without reloading the page. I understand this might be a job for some AJAX functionality, but I am quite new to javascript. Any pointers?
<?php
// this file just connects me to my database
require('inc/db_connect.php');
// creates the variable $random which stores a random ID from the `sponsors` table
$query_sponsors_ids = mysql_query("SELECT `id` FROM `sponsors` ORDER BY RAND() LIMIT 1");
while ($output_sponsors_ids = mysql_fetch_array($query_sponsors_ids)){
$random = $output_sponsors_ids["id"];
}
// passes the $random variable and outputs its corresponding URL & Name to the frontend.
$query_sponsors = mysql_query("SELECT * FROM `sponsors` WHERE `id` = $random limit 1");
while ($output_booya = mysql_fetch_array($query_sponsors)){
echo '
<a href="'.$output_booya["url"].'" target="_blank">'.$output_booya["name"].'</a>
';
}
?>
Providing gibberish to the masses. Fluently. Since 2004
www.fluentgibberish.com (a web comic)
www.fluentgibberish.com (a web comic)
frankthetank on
0
Posts
As a very high level overview, you'll want to look into the javascript function XmlHTTPRequest and whatever the IE equivalent is that I can't remember - that's how your page/js will post the data to your back end and get the data back without reloading.
After you've gotten the data back you'll update the data by manipulating the DOM tree, again with the javascript.
jQuery makes both of these things one hundred billion times less hassle. I recommend doing some basic DOM manipulation in the very least without jQuery, though, so that you have a general idea of exactly what it is the jQuery libs are doing for you.
I defiantly got a better understanding of the DOM through w3schools, and how to go about manipulating it by using jQuery.
However, being new to the jQuery world, I am still looking for the ideal event handler for my project. I've got a test page set up here which shows where I am at. My goal is to have my sponsors list cycle every few seconds on their own. I've got it set up right now so that clicking on the blue title 'sponsors' (top middle) will reload the script (utilizing jQuerys 'load' event). Not exactly what I'm after, but I can't seem to find an event which will 'load script every few seconds on its own' instead of 'load script on click'. Perhaps a jQuery Ninja out there can point me in the right direction?
www.fluentgibberish.com (a web comic)
On another note, your code doesn't really seem to work the way you want it to right now. When I go to the page and click on sponsor, it loads one up, but clicking again never changes the sponsor. The only way I was able to get it to display a different sponsor was by manually loading the sponsor.php page until it displayed a different sponsor, then going back to the main page and clicking the Sponsor title. Without seeing your php code I have no idea why it's acting this way, unless it's storing the result of loading sponsor.php somewhere, so it's only updating when reloading sponsor.php.
Something like so:
$(document).ready(function(){ // or use setInterval here as Daenris suggested while(1) { rotaterThingy(); } }); function rotaterThingy() { // code to do the rotation crap }edit: edited for less shitty code example/suggestion.
That's pretty much what setInterval does, with a built in timer so that it only calls the function every X milliseconds.
So yeah, in your $(document).ready() stuff ust do a setInterval that calls your rotating function and you're set. It probably also does it the smart way and just does it in a while() loop rather than recursively calling the function, which is way smarter, since that won't cause an ever growing memory footprint like the recursive crap would.
A solution I thought might work would be to alter my PHP script to call all the items in the DB, put them into an array, and have javascript pick a random array ID to display using this function thus keeping it client side. Would a solution like that be overkill?
www.fluentgibberish.com (a web comic)
1) setInterval calls function bobo()
2) bobo() does an XmlHTTPRequest to your PHP script which returns the results as either an xml or json object (use json, it's better) - use jQuery for this so that it can figure out the correct way to make the call as IE uses a different one and who the hell wants to bother with browser functionality detection?
3) bobo() then updates your web page - either directly or by calling another javascript function
I shelved the AJAX idea until my research and confidence on the subject increase, and in this case it wasn't 100% necessary to go the live refresh route anyway (though I plan on getting it figured because the application elsewhere will be useful). Heres what I ended up with that works famously.
Finalized Breakdown:
-PHP query to call every sponsor from the DB, and javascript to enter each into a javascript array
-Set a javascript variable to randomly choose 1 entry out of the number of entrys in the array
-setInterval() on the variable calling 1 entry from the list so it 'refreshes' every few seconds without refreshing the page. Woot!
Only downside is that if a user loads page and then admin uploads a new sponsor to the array, the page will need to refresh in order to rebuild the array with the new entry (as opposed to an AJAX solution which would have rebuild the array live). No biggie though
Thanks again for everyones' help!
www.fluentgibberish.com (a web comic)
And then run ONLOAD scripts on the page that is loaded in the IFRAME. That's how I do it for my company's web applications and it's pretty slick. It makes the actual loading invisible to the user and allows me to change anything I want on the display page without have to refresh.
I guess I'm a sucker for doing things the hard way sometimes
www.fluentgibberish.com (a web comic)
The best thing, which is only tangentially related, but whatever, is my dynamic html scripting. I have Java code that writes dynamic javascript code that writes dynamic HTML to a DIV's innerHTML property. Crazy.
EDIT: The biggest benefit is I can use that database layer to write data to the database without having to navigate the main page anywhere. So it removes a metric fuckton of the limitations of HTML.
www.fluentgibberish.com (a web comic)