Update Part Of A Page Without Refreshing? is it possible to refresh only part of the webpage not all

hi allI have been scratching me head for days now tryna find a way around this. basically i will try and explain as much as i can so its clear what I require. I built a website which is database based for a community internet radio station I'm trying to put together. because the djs are volunteers they do no have set time every week so writting a script to display the current deejay would no be right because another volunteer might turn up on the day. and it would mean correcting the script weekly. Instead I have collected their images and put these in a file. They have been give login names and when the log in to the site they change the status of their account to On Air and this means the MYSQL database will pick the name of the dj logged in and set to online because if we set automatic status change it would be wrong just incase they are logging in only to change the program synopsis or info in preperation for their next show. So this means they manually have to change their status to achieve this. With this process things work fine for anyone coming to the site after the SQL info has been changed other wise they are stuck with a picture of the previous dj on the screen.(obvioulsy the picture only covers a quarter of the screen and theres info about the show playing. Say you tuned in at 950 and where listening and another dj come on at ten the image does not automatically change to the next. I know your thinking why dont he just use page refresh every say 10 minutes. Well I did think of that but then we have mini chat window on the home page and people use this to chat with fellow listeners so it would be an inconvenience for them to have to re-login because the META REFRESH has kicked in every 10 or so minutes. I also thought I'd use a <iframe or framset and set that page to diplay the program info and picture and have that page refresh every 10 minutes which would have been perfect but when I used iframe everything after the area witht frameet /iframe disappeared. Is there a little script I can use to place inside the area to display picture and text from the database and have just info refresh every 10 minutes without affecting the rest of the page.if anyone knows how please kindly let me knowthansk a lot in advance

Your best bet would be to use AJAX. Basically it is a way that javascript can send and receive information from a web-server without having to reload the page. It will let the image and information change without any visual indication to your users that the page is loading any data. What I would recommend is make a new file on your server, (PHP, ASP, or whatever server-side programing language you prefer). And have this file print out the information that you want ajax to check. For example, include the URL to the image, and whatever other data you might want to update, like a name.

 

If it's more than just a URL to an image we will need javascript to parse the information from the file, so I would recommend using some symbol that will not be part of the name, url, or any of the other data being sent. Usually when I do something like this, I like to use a semi-colin.

 

Once you've got that page up and running it should output something like this:

http://forums.xisto.com/no_longer_exists/ Smith;John Smith is a good dj

Note how I have separated the image url, name, and description with semi-colins.

 

 

Now we'll want to create some tags around the data that we want to change so javascript can modify it easily. I personally love using div layers to do this, but any tag that can handle the id attribute should be fine.

We also want to add a name attribute to the image tag so we can change it on the fly as well.

 

For Example:

<img name="djimg" src="<? echo $dj_img; ?>">
...
<div id="djname"><? echo $dj_name; ?></div>
...
<div id="djdesc"><? echo $dj_desc; ?></div>

 

Now let's write some javascript. For now, I'm just going to make an empty function called getData. This is where the ajax will go. You want to have javascript run this function periodically (say about once or twice a minute), and replace the image, name, and description. I'm going to add a timeout so it calls itself every 500 milliseconds. I'm also going to make a new function called update that replaces the data in the div layer we created earlier. We will have the getData function call this one when there is new information.

 

function getData(){  /* ajax will go here */    return 0;settimeout("getData()",500);}function update(value){var data=value.split(";");if(document.images) document["djimg"].src=data[0];document.getElementById("djname").innerHTML=data[1];document.getElementById("djdesc").innerHTML=data[2];}window.onload = getData;

Now let's write the ajax:

var page="http://forums.xisto.com/no_longer_exists/ (window.XMLHttpRequest) {	getv= new XMLHttpRequest();	if (getv.overrideMimeType){		getv.overrideMimeType("text/xml");	}}else if (window.ActiveXObject) {	 try {		getv = new ActiveXObject("Msxml2.xmlHttp");		getv.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");	}catch (e) {		try {			getv= new ActiveXObject("Microsoft.xmlHttp");		}catch (e) {}	}}ret=-1;getv.onreadystatechange = function(){		if (getv.readyState == 4) {			ret=getv.responseText;			update(ret);			getv=-1;		}	};	getv.open("POST", page);	try{		getv.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");	}	catch(e){}	getv.send("");	return ret;

 

And now to put it all together:

<img name="djimg" src="<? echo $dj_img; ?>">
...
<div id="djname"><? echo $dj_name; ?></div>
...
<div id="djdesc"><? echo $dj_desc; ?></div>
...
<script type="text/javascript">
var getv=-1;
var page="http://forums.xisto.com/no_longer_exists/;;

function getData(){

 while(getv!=-1){}
if (window.XMLHttpRequest) {
	getv= new XMLHttpRequest();
	if (getv.overrideMimeType){
		getv.overrideMimeType("text/xml");
	}
}else if (window.ActiveXObject) {
	 try {
		getv = new ActiveXObject("Msxml2.xmlHttp");
		getv.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	}catch (e) {
		try {
			getv= new ActiveXObject("Microsoft.xmlHttp");
		}catch (e) {}
	}
}
ret=-1;
getv.onreadystatechange = function(){
		if (getv.readyState == 4) {
			ret=getv.responseText;
			update(ret);
			getv=-1;
		}
	};
	getv.open("POST", page);
	try{
		getv.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	}
	catch(e){}
	getv.send("");
	return ret;
  
  return 0;
settimeout("getData()",500);
}
function update(value){
var data=value.split(";");
if(document.images) document["djimg"].src=data[0];
document.getElementById("djname").innerHTML=data[1];
document.getElementById("djdesc").innerHTML=data[2];
}
window.onload = getData;
</script>

 

Let me know if it doesn't work or if you have any questions.

You could also try JQUERY.

Here is a sample script.

Link: http://api.jquery.com/jQuery.post/

1. Include the jquery framework "

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"/>

2. Then you request like this

<script type="text/javascript">  $(document).ready(function() { 		setTimeout(function() { 			$.post("get_dj.php", { dummy: "" }, 			   function(data){				   $("#dj_image").html('<img src=\''+data.image+'\' />');				   $("#dj_name").html(data.name);				   $("#dj_description").html(data.description);			   },"json");		 }, 2000);    } </script>

3. For the html code

<div id="dj_image"> </div><div id="dj_name"> </div><div id="dj_description"> </div>

4. For the php code

<?php  $data['dj_name'] = 'sample name';  $data['dj_image'] = 'sample.jpg';  $data['dj_description'] = 'sample description';  echo json_encode($data);?>

Ill add this later, will be late for my job.
If you have any questions or need help in coding, just pm me.
Edited September 9, 2009 by dolrich06 (see edit history)

Hi!As an alternative to using AJAX, you could also use IFRAMES. Using IFRAMES is simpler if all you want is to put a form on a page and display a message after the form has been submitted.If you do decide to go the AJAX route, there are several Javascript libraries to pick from - the Prototype Javascript library is popular among older projects while jQuery is more popular among newer projects.

Thanks dear even I was searching for something related to this topic. And the information given by you dear friend is really good and fruitfull. But previously I was using the traditional way where it was clearly displayed on the screen that the data is being refreshed. But it is the technique even I was searching for.?Thanks dear .

Using your code, page does not refreshUpdate Part Of A Page Without Refreshing?

I'm very interested in this AJAX/Javascript script. I duplicated it and it is loading the data correctly on the initial load but won't reload the data every 500ms. Is there anything you could think of that could be causing this?

-question by Andrew

You might want to use an iframe.
You can use javascript to refresh that iframe.

document.getElementById("iframeid").src=document.getElementById("iframeid").src;