Updating Certain Information (maybe AJAX?)

[smerny]

Hello, I have a webpage that has information that can get updated regularly. It's something like this format (what the browser sees):

<h3>This information is always the same:</h3>
<p>This information gets updated often.</p>
<h3>This is more information that stays:</h3>
<p>This is more information that gets updated.</p>
...

I would like this information to update fairly quick after it is updated in the database (within 10 seconds is good) without the entire page updating and without using a frame...

 

How is this done?

[dpacmittal]

You already wrote the answer yourself. You need AJAX. You wouldn't want us to post the code too, would you? There are thousands of tutorials floating around the net just for that. Try those tutorials and if you come across a problem, get back here with your problem.

[smerny]

that's what I would do if I had the slightest idea about how to go about it... I know practically nothing about AJAX except that it might do what I'm looking for... so I wouldn't even know if I'm looking at a tutorial that is right for me, perhaps you could point me in the right direction?

[dpacmittal]

that's what I would do if I had the slightest idea about how to go about it... I know practically nothing about AJAX except that it might do what I'm looking for... so I wouldn't even know if I'm looking at a tutorial that is right for me, perhaps you could point me in the right direction?

Start here:

http://www.w3schools.com/Ajax/ajax_intro.asp

 

If you still have problem, let me know.

 

 

Here's a brief idea of what you need to do:

1. First of all create a php page which would display the updated information in plaintext when executed.

2. Create xmlhttp request object.

3. Send a GET/POST request to the php page.

4. Update the webpage element with the updated data using Javascript DOM.

 

Ajax is all javascript. Basic knowledge of javascript is a must for working with Ajax.

[smerny]

All of those examples base their action off of something the user does, like entering text in a text field or selecting something from an option menu, so I dont know if I can use them... because I want the data to just automatically reference the database

[smerny]

this is the part of the php file that has the data i would like to update:

	$i = 1;
$search = "SELECT * FROM penguins";
$result = mysql_query($search) or die ("SQL Error: " . mysql_error());
while ($peng = mysql_fetch_assoc($result))
{ 
	echo "<div class='peng'>
	 <h3>".$i.") <a href='/?f=runescape&p=penguins&edit=".$peng['ID']."'>".htmlspecialchars($peng['area'])."</a> - ".htmlspecialchars($peng['type'])." (".htmlspecialchars($peng['points'])." point)</h3>";

	 if($peng['trapped'] == 1) { echo "[Trapped] "; }

	 echo htmlspecialchars($peng['location']). "</div>";

	 $i++;
}

 

sample output:

1) Entrana - Barrel (1 point)

cannot leave the island, was last seen near the hot air balloon

and there are 11 rows in the database

[dpacmittal]

All of those examples base their action off of something the user does, like entering text in a text field or selecting something from an option menu, so I dont know if I can use them... because I want the data to just automatically reference the database

That can be done. Event for it is onChange in javascript. In html you just type:

<input type="text" onChange=change() />

That would trigger the function change everytime a letter is added or removed from the text field. In short, it will be triggered everytime a value changes inside the text field. Similarly there are events for all types of purpose in javascript.

[smerny]

Okay, I'm looking at this example currently:

 

http://www.w3schools.com/PHP/php_ajax_database.asp

 

and I guess I'll need to make it like that except instead of onChange I'll have a timer or something... and I'll need to update many more things...

 

I'm attempting it now... *wades uncertainly into the shallow edges of AJAX*

[aeroswat]

Lol just curious but what are you making? 

[dpacmittal]

Okay, I'm looking at this example currently:

 

http://www.w3schools.com/PHP/php_ajax_database.asp

 

and I guess I'll need to make it like that except instead of onChange I'll have a timer or something... and I'll need to update many more things...

 

I'm attempting it now... *wades uncertainly into the shallow edges of AJAX*

You can use setTimeout function for a timer.

[smerny]

aero:

well i figured this would be a good thing to try to learn ajax on... its just something where people can update and view information for locations of penguins on a game... to help them find the penguins in the game and share locations with other players... probably doesn't make a whole lot of sense if you don't play the game and do the penguin searches in the game

[aeroswat]

aero:

well i figured this would be a good thing to try to learn ajax on... its just something where people can update and view information for locations of penguins on a game... to help them find the penguins in the game and share locations with other players... probably doesn't make a whole lot of sense if you don't play the game and do the penguin searches in the game

 

Just looked pretty interesting Good luck with it

[smerny]

on the example is:

var url="getuser.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);

 

what is the point of the random part?

[dpacmittal]

on the example is:

var url="getuser.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);

 

what is the point of the random part?

Thats just used so the page isn't shown from cache. That's what I was told when I asked the same question.

[mattal999]

Actually, I just did something exactly like this yesterday. Example: http://www.imuzic.co.uk/trends/

 

Basically make a callback page (http://www.imuzic.co.uk/includes/trends.php) that shows the content you want to be replacing the original text. Then make a div with a unique ID within the original page. Have the original content within. Now all you have to do is load up jQuery and use some JS:

 

<script type="text/javascript" src="/includes/jquery.js"></script> 
<script type="text/javascript"> 
function execRefresh() {
    $("#refreshIcon").fadeIn("fast");
    $("#trendContainer").load("/includes/trends.php", "", function() { $("#refreshIcon").fadeOut("slow"); });
    setTimeout(execRefresh, 5000);
}
$(document).ready(function() {
    execRefresh();
});
</script> 

 

The fadeIn and fadeOut are just to show a refreshing icon for a nice visual effect. Same kind of thing. I didn't add a timestamp to the end of the trends.php url though, which is recommended to show a fresh version of the new content. Use the example above to put that in.

[smerny]

i havnt been able to get it to do anything.... i'll try working with yours now mattal...

 

I don't really understand the jquery part though... i looked at it and its a very long one line file

[dpacmittal]

very long one line file

lol, its newlines have been removed to make it more compact.

[smerny]

well one of my problems... i forgot i was working outside the publichtml 

[smerny]

okay mattal i got yours working for me... simplified this is my main php:

<html><head>
<script type="text/javascript" src="/includes/jquery.js"></script>
<script type="text/javascript">
function execRefresh() {
    $("#refreshIcon").fadeIn("fast");
    $("#pengdata").load("/includes/penginfo.php", "", function() { $("#refreshIcon").fadeOut("slow"); });
    setTimeout(execRefresh, 5000);
}
$(document).ready(function() {
    execRefresh();
});
</script> 
</head>

<body>
<h2>Penguin Locations:</h2>
<div id='pengdata'>
</div>
<h2>End of Ajax</h2>

</body></html>

then the penginfo being:

$i = 1;
$search = "SELECT * FROM penguins";
$result = mysql_query($search) or die ("SQL Error: " . mysql_error());
while ($peng = mysql_fetch_assoc($result))
{ 
echo "<div class='peng'>
 <h3>".$i.") <a href='/?f=runescape&p=penguins&edit=".$peng['ID']."'>".htmlspecialchars($peng['area'])."</a> - ".htmlspecialchars($peng['type'])." (".htmlspecialchars($peng['points'])." point)</h3>";

 if($peng['trapped'] == 1) { echo "[Trapped] "; }

 echo htmlspecialchars($peng['location']). "</div>";

 $i++;
}
?>

 

I'm still uncertain of how its working exactly, I'm not sure what the jquery is doing and can you explain your function to me?

 

 

what does the $("#whatever") syntax say exactly? seems like shorthand?

[mattal999]

jQuery is a lightweight Javascript library, which contains many functions and handles. The $("#pengdata") is broken down. It is basically getElementById, but the # means ID and the text is the ID name. jQuery interprets this, and returns the correct element. The $ at the front and the brackets are just there to specify jQuery to run that piece of code. the .load part is the key, because this loads the specified page into this element. The settimeout makes the function execute every 5000 milliseconds (5 seconds).

 

Easy as. jQuery makes things much simpler.