Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax

Posted on Jan 13, 2009 by Rich to Web Development

Now lets say that you a web page that has a big Block of “something” and inside this “something” you would like to have some information change at a set time interval. Well with Jquery, some PHP and a sprinkle of Ajax, you can get this done quick fast and in a hurry.

The first thing you will need, is obviously the latest jQuery Javascript library file.  and you will also need this light JQuery Timers Plugin.  Now lets set up:

I am going to assume that you know a little about JQuery and say that you already know how to call from inside the “Head” tag. The following is basically the “meat and potatoes” if you will of what is going on.

Let’s Break it down.

1.  First we say “Hey you with the class name of refreshMe, I am going to do something to you every 10 seconds.  (SideNote * 1000 = 1 second; So 5,000 = 5 seconds).

2. Now we use JQuery’s built in Ajax functions to call the URL of the page we want to bring in and have it refresh the element with the class name of refreshMe with the information from this page that called. Follow? Good.

Now since for some deranged reason, I can’t get the code highlighter to work correctly Click here to see the page in action. You will be able to view source from there.

Or download it now.

Tags: AJAX, jQuery, jQuery autocomplete, jQuery examples, jQuery PHP, jQuery tutorial

Populating Data Without Refreshing the Page Using AJAX

Posted on Apr 4, 2008 by Jonathan to Web Development

I recently encountered a situation with a website we were working on and, yes, I know that there are hundreds of lines of code out there that do exactly what I am about to discuss, but to me, this is probably the simplest solution and could be easily configured to do what you need it to do.

What was needed you ask? Well, a simple thing really. The client wanted their request form to be a little intuitive. If their users selected an option from the dropdown that was the U.S, then show the U.S. States; if not, then show a textbox for the user to input their area, city, whatever. Granted there is no Database associated with this site, nor did they want one created. So I wrote this little piece to make it do just that.

So to begin let’s grab some stuff you need.

1. The ajax.js code. I grabbed it from here (http://clientside.cnet.com/cnet.gf/docs/files/mootools/1-11/Remote/Ajax-js.html) and add it between the tags.

2. Next, let’s add the JavaScript; also between the tags. This will do the actual work.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<script type="text/javascript">
	var handleSuccess = function(transport)
	{
		if(transport.responseText !== undefined)
		{
			document.getElementById('WHEREYOUWANTTHEINFOTOSHOW').innerHTML = transport.responseText;
		}
	}
	var handleFailure = function()
	{
		document.getElementById('WHEREYOUWANTTHEINFOTOSHOW').innerHTML = "";
		// IF YOU WANT, YOU CAN WRITE SOME HTML BETWEEN THE QUOTES TO SAY THAT THIS FAILED.
	}
	function doSomething(sel)
	{
		var request_country = sel.options[sel.selectedIndex].value;
		var sUrl = "getSubInfo.php?sub=" + request_country;
		new Ajax.Request(sUrl,
		{
			method: 'get',
			onSuccess: handleSuccess,
			onFailure: handleFailure
		});
	}
</script>

This code actually received the value of the selected option and sends that value to a php page runs through a function and the information gets returned; which in this case is either the US State drop down or a textbox.

3. Now the php page we were just talking about. As you can see I removed much of it for protection, but its pretty straight forward. It grabs the value that was sent, checks if the value is equal to one (which will show the states) and, if not, will show the textbox. Simple? Yep. You can copy this and save it as getSubInfo.php

**** Note that I removed security features and such from this code. You should add some of your own so that people are not injecting into your code; although this is really nothing sensitive.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php
$sub = $_GET['sub'];
function getMySub($sub)
{
	if ($sub == "USA")
	{
		print("State<br />
			<select name="state" size="1">
				<option  selected="selected">Select</option>
				<option value="1">state list</option>
			</select>");
	} 
	else 
	{
		print("State / Area <br /><input name="state" type="text" size="20" />");
	}
}
echo getMySub($sub);
?>

4. Now for the HTML of it. This is pretty straight forward. Write out your select statement as usual, but add an onChange call to handle the dynamic content retrieval. Add this to your page.

1
2
3
4
5

<select name="request_country" onchange="doSomething(this)">
	<option  selected="selected">Select</option>
	<option value="USA" >UNITED STATES</option>
	<option value="AFG" >AFGHANISTAN</option>
</select>

So all in all, this was a pretty simple thing to accomplish. Its nothing major; just thought I would share it with you all.

Tags: AJAX, jQuery populate, jQuery tutorial