50Webs Forum
Welcome, Guest. Please login or register.
Did you miss your activation email?
December 05, 2020, 12:01:24 PM

Login with username, password and session length
Search:     Advanced search
88104 Posts in 20878 Topics by 26018 Members
Latest Member: Cuffie
* Home Help Search Login Register
+  50Webs Forum
|-+  General Forum
| |-+  General chat.
| | |-+  Auto Refresh Div Content
« previous next »
Pages: [1] Go Down Print
Author Topic: Auto Refresh Div Content  (Read 7825 times)
garthugs
Members
**
Posts: 34



View Profile
« on: August 10, 2008, 01:35:40 AM »

Good day guys,

I'm trying to figure out a way to auto refresh content inside a <div></div>, say every 10 seconds. I've searched Google and tried several scripts but nothing works.

Any help would be appreciated.
Logged
freshwire
Global Moderators
Experienced Member
*****
Posts: 6072



View Profile WWW
« Reply #1 on: August 10, 2008, 02:11:09 AM »

You'd be looking for some ajax for that.
Logged

Jonathan | 50Webs Support Volunteer
garthugs
Members
**
Posts: 34



View Profile
« Reply #2 on: August 10, 2008, 07:23:12 PM »

In firefox and IE: the content inside the div  loads then disappears.






This is the codes that i'm using:
refresh.js
var xmlhttp = false ;


if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
try {
xmlhttp = new XMLHttpRequest ();
}
catch (e) {
xmlhttp = false}
}


function myXMLHttpRequest ()
{
var xmlhttplocal;
try {
xmlhttplocal = new ActiveXObject ("Msxml2.XMLHTTP")}
catch (e) {
try {
xmlhttplocal = new ActiveXObject ("Microsoft.XMLHTTP")}
catch (E) {
xmlhttplocal = false;
}
}

if (!xmlhttplocal && typeof XMLHttpRequest != 'undefined') {
try {
var xmlhttplocal = new XMLHttpRequest ();
}
catch (e) {
var xmlhttplocal = false;
}
}
return (xmlhttplocal);
}


var mnmxmlhttp = Array ();
var mnmString = Array ();
var mnmPrevColor = Array ();
var responsestring = Array ();
var myxmlhttp = Array ();
var responseString = new String;




var i=0;
var ii = 0;

function ajax_update()
{

url = "ajax_php.php";
target2 = document.getElementById ('content');

ii = i++;

var content = "i=" + ii ;

mnmxmlhttp = new myXMLHttpRequest ();
if (mnmxmlhttp) {
mnmxmlhttp.open ("POST", url, true);
mnmxmlhttp.setRequestHeader ('Content-Type',
'application/x-www-form-urlencoded');

mnmxmlhttp.send (content);
errormatch = new RegExp ("^ERROR:");

target2 = document.getElementById ('content');

mnmxmlhttp.onreadystatechange = function () {
if (mnmxmlhttp.readyState == 4) {
mnmString = mnmxmlhttp.responseText;

if (mnmString.match (errormatch)) {
mnmString = mnmString.substring (6, mnmString.length);

target = document.getElementById ('content');
target2.innerHTML = mnmString;

} else {
target = document.getElementById ('content');
target2.innerHTML = mnmString;

}
}
}
}


setTimeout('ajax_update()', 15000);

}
Logged
garthugs
Members
**
Posts: 34



View Profile
« Reply #3 on: August 10, 2008, 07:35:52 PM »

ajax_php.php

<?PHP
echo <PRE>;
print_r($_POST);
echo time();
?>





Ive tried using this test page with no luck (test.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP + Ajax auto refresh DIV</title>
<script language="JavaScript" type="text/javascript" src="refresh.js"></script>
</head>
<body onload="ajax_update();">
<di vid="content">Loading....</div>

</body>

</html>
Logged
freshwire
Global Moderators
Experienced Member
*****
Posts: 6072



View Profile WWW
« Reply #4 on: August 10, 2008, 08:37:22 PM »

Here is an example I made for you.

page_one.html

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example Ajax Loader</title>
<style type="text/css">
.c_reload { width:600px; height:400px; border:1px solid #555555; padding:10px; }
</style>
<script type="text/javascript">
<!--

var vUri = 'page_two.html'

var vRequest;

function getRequest()
{
vRequest = null;

if (window.XMLHttpRequest)
{
vRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try
{
vRequest = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (err)
{
try
{
vRequest = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (err)
{
return (false);
}
}
}

vRenew = new Date();

vTest = /\?/;

vNewUri = vUri + (vTest.test(vUri)?'&':'?') + 'renew=' + vRenew.getTime();

vRequest.onreadystatechange = catchChange;
vRequest.open('GET', vNewUri, true);
vRequest.send(null);
}

function catchChange()
{
if (vRequest.readyState == 4 && vRequest.status == 200)
{
document.getElementById('i_reload').innerHTML = vRequest.responseText;

setTimeout('getRequest()', 10000);
}
}

getRequest();

//-->
</script>
</head>

<body>
<div class="c_reload" id="i_reload"></div>
</body>
</html>


page_two.html

Code:
this is page 2
Logged

Jonathan | 50Webs Support Volunteer
garthugs
Members
**
Posts: 34



View Profile
« Reply #5 on: August 10, 2008, 09:02:17 PM »

Works like a charm..... Thank You
Logged
garthugs
Members
**
Posts: 34



View Profile
« Reply #6 on: August 12, 2008, 04:37:23 PM »

Hello again... just a follow up.
The code that you made for me works... but i have one minor problem.

I noticed that 30% of the time when i refresh the page, the content from page two does not load. It only load the default text that i placed in page one: "Loading....."

<div class="c_reload" id="i_reload">Loading.....</div>

 Is there any way that i can combat this problem.
Logged
freshwire
Global Moderators
Experienced Member
*****
Posts: 6072



View Profile WWW
« Reply #7 on: August 12, 2008, 05:03:26 PM »

Can I check the URL please ?
Logged

Jonathan | 50Webs Support Volunteer
garthugs
Members
**
Posts: 34



View Profile
« Reply #8 on: August 12, 2008, 06:28:02 PM »

sure: http://www.movieswamp.com/

This is a screen shot of the trouble area:
http://www.movieswamp.com/shot1.jpg
Logged
freshwire
Global Moderators
Experienced Member
*****
Posts: 6072



View Profile WWW
« Reply #9 on: August 12, 2008, 07:07:56 PM »

Your website does have a ton of extra files loading and this might cause a few hickups if your javascript executes before your html is fully loaded.

You can solve this problem by removing the bottom line which says....

Code:
getRequest();


....from your refresh.js file.

Then change your <body> tag to read...

Code:
<body onload="getRequest();">


That should help solve the problem. The refresh will start once the page is fully loaded.

In addition when using an external javascript file like you have done you do not need the...

<!-- and //-->

...comments, and having them could cause problems in some browsers. [/code][/quote]
Logged

Jonathan | 50Webs Support Volunteer
garthugs
Members
**
Posts: 34



View Profile
« Reply #10 on: August 12, 2008, 07:33:13 PM »

works..... thanks again
Logged
Gideon
50Webs moderators
Experienced Member
*****
Posts: 6596



View Profile WWW
« Reply #11 on: August 13, 2008, 08:40:18 PM »

I never seen monkey56657 code anything like that before lol.... Didn't know he was as advanced as that in Ajax already!! :shock:
Logged




Hellooooooooo
freshwire
Global Moderators
Experienced Member
*****
Posts: 6072



View Profile WWW
« Reply #12 on: August 14, 2008, 07:11:46 AM »

The code is very similar to that on web starters, which charity and the wallpaper site.  :lol:
Logged

Jonathan | 50Webs Support Volunteer
Pages: [1] Go Up Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.14 | SMF © 2006-2011, Simple Machines LLC Valid XHTML 1.0! Valid CSS!