Javascript + Ajax

[Haunted Dawg]

Hello there, i need a little script that will refresh the <div> tag's.

I aint so good in javascript nor ajax so i was wondering if you could help me.

There is no board in here for ajax, so i put it here.

This is my current script:

 

	echo '
	<div id="shoutbox">
		<iframe 
			name="shoutbox" 
			marginwidth="0" 
			marginheight="0" 
			border="0" 
			frameborder="0" 
			table-align="center" 
			height="400" 
			width="100%" 
			scrolling="auto" 
			src="shoutbox">
		</iframe>
	</div>';

 

Can anyone help me?

[Will]

Re: Javascript + Ajax

Easier just do put something in the page the iframe is opening:

 

<script type="text/javascript" language="javascript">
function jsreload () {
window.location.reload();
}
setTimeout('jsreload()', 5000);
</script>

 

That reloads every 5 seconds.

Or you could use AJAX:

 

<script type="text/javascript" language="javascript">
var xmlHttp; 
function GetXmlHttpObject(){ 
var objXMLHttp=null; 
if (window.XMLHttpRequest){ 
objXMLHttp=new XMLHttpRequest(); 
}else if (window.ActiveXObject){ 
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
return objXMLHttp; 
} 
function update()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
	return;
}
xmlHttp.onreadystatechange=function()
{
	if(xmlHttp.readyState==4 && xmlHttp.status == 200)
	{
		var response = xmlHttp.responseText;
		if (response)
		{
			document.getElementById('shoutbox').innerHTML=response;
		}
	}
}
//change the url to the chatbox file
var url="shoutbox.php";
xmlHttp.open("get", url+ '?ms=' + new Date().getTime());
xmlHttp.send(null);
}
//5 seconds
setInterval("update()", 5000);
</script>

Change the url variable to the shoutbox feed

This would mean to change the div tag to:

<div id="shoutbox" style=" height:400px; width:98%; overflow:scroll;">
</div>

[Haunted Dawg]

Re: Javascript + Ajax

That is refreshing the entire page. I just want to refresh the <div id="shoutbox"> tag.

[Will]

Re: Javascript + Ajax

I said to put that JS into the page the iframe is opening; that will refresh the iframe.

[Will]

Re: Javascript + Ajax

Updated my first post to incude an AJAX version

Also there is an AJAX board:

http://criminalexistence.com/ceforums/http://makewebgames.io/phpBB3/viewforum.php?f=6.0

[Haunted Dawg]

Re: Javascript + Ajax

Where would i put this bit of code:

 

<script type="text/javascript" language="javascript">
var xmlHttp; 
function GetXmlHttpObject(){ 
var objXMLHttp=null; 
if (window.XMLHttpRequest){ 
objXMLHttp=new XMLHttpRequest(); 
}else if (window.ActiveXObject){ 
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
return objXMLHttp; 
} 
function update()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
	return;
}
xmlHttp.onreadystatechange=function()
{
	if(xmlHttp.readyState==4 && xmlHttp.status == 200)
	{
		var response = xmlHttp.responseText;
		if (response)
		{
			document.getElementById('shoutbox').innerHTML=response;
		}
	}
}
//change the url to the chatbox file
var url="shoutbox.php";
xmlHttp.open("get", url+ '?ms=' + new Date().getTime());
xmlHttp.send(null);
}
//5 seconds
setInterval("update()", 5000);
</script>

 

And i never knew there was a ajax board.

[Haunted Dawg]

Re: Javascript + Ajax

This is my current code in the file.

 

<?php //Added <?php tags to make it look neater

function _3()
{
global $ir,$h,$set,$data;
echo '[b]Shoutbox Room[/b]

';
if(file_exists("shoutbox.php"))
{
	echo '
	<div id="ShoutBox.Room" style=" height:400px; width:98%; overflow:scroll;">
		<script type="text/javascript" language="javascript">
			var xmlHttp; 
			function GetXmlHttpObject()
			{ 
				var objXMLHttp=null; 
				if (window.XMLHttpRequest)
				{ 
					objXMLHttp=new XMLHttpRequest(); 
				}
				else if (window.ActiveXObject)
				{ 
					objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
				} 
				return objXMLHttp; 
			} 
			function update()
			{
				xmlHttp=GetXmlHttpObject();
				if (xmlHttp==null)
				{
					return;
				}
				xmlHttp.onreadystatechange=function()
				{
					if(xmlHttp.readyState==4 && xmlHttp.status == 200)
					{
						var response = xmlHttp.responseText;
						if (response)
						{
							document.getElementById("ShoutBox.Room").innerHTML=response;
						}
					}
				}
				//change the url to the chatbox file
				var url="shoutbox.php";
				xmlHttp.open("get", url+ "?ms=" + new Date().getTime());
				xmlHttp.send(null);
			}
			//5 seconds
			setInterval("update()", 5000);
		</script>
		<iframe 
			name="Shoutbox Room" 
			marginwidth="0" 
			marginheight="0" 
			border="0" 
			frameborder="0" 
			table-align="center" 
			height="400" 
			width="100%" 
			scrolling="auto" 
			src="shoutbox.php">
		</iframe>
	</div>';
}
else
{
	echo 'Shoutbox Currently Down.';
}
_back();
}

?>

 

Sorry if i am putting it in the wrong place, but unfortunatly im not very aware of how ajax or javascript work.

[Will]

Re: Javascript + Ajax

....should be:

<?php //Added <?php tags to make it look neater

function _3()
{
global $ir,$h,$set,$data;
echo '[b]Shoutbox Room[/b]

'
if(file_exists("shoutbox.php"))
{
echo '
		<script type="text/javascript" language="javascript">
			var xmlHttp; 
			function GetXmlHttpObject()
			{ 
				var objXMLHttp=null; 
				if (window.XMLHttpRequest)
				{ 
					objXMLHttp=new XMLHttpRequest(); 
				}
				else if (window.ActiveXObject)
				{ 
					objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
				} 
				return objXMLHttp; 
			} 
			function update()
			{
				xmlHttp=GetXmlHttpObject();
				if (xmlHttp==null)
				{
					return;
				}
				xmlHttp.onreadystatechange=function()
				{
					if(xmlHttp.readyState==4 && xmlHttp.status == 200)
					{
						var response = xmlHttp.responseText;
						if (response)
						{
							document.getElementById("ShoutBox.Room").innerHTML=response;
						}
					}
				}
				//change the url to the chatbox file
				var url="shoutbox.php";
				xmlHttp.open("get", url+ "?ms=" + new Date().getTime());
				xmlHttp.send(null);
			}
			//5 seconds
			setInterval("update()", 5000);
		</script>
             <div id="ShoutBox.Room" style=" height:400px; width:98%; overflow:scroll;">
	</div>';
}
else
{
	echo 'Shoutbox Currently Down.';
}
_back();
}

?>

 

Then you need a file called shoutbox.php to output the shoutbox data.

[Haunted Dawg]

Re: Javascript + Ajax

Will it work's good, but now when i type a message it redirect's me to the php page.

[Haunted Dawg]

Re: Javascript + Ajax

Don't worry, thank's for this. It work's very well for me. Just like i wanted it to work. Anyway i got it all working fine now without going to new page etc.

[oxidati0n]

Re: Javascript + Ajax

You would only need this

 

<script>
var seconds=3; //How many seconds you want it to refresh it.

function runPageFrame_init()
{
shoutbox.location.reload();
setTimeout(seconds+"000", "runPageFrame_init()");
}

runPageFrame_init();
</script>