Hello,

I am working on a chat application in jQuery and I have used the function setInterval(), however, it doesn't seem to refresh the div element.. Or load it for that matter.. Here is the code:

<!DOCTYPE html>
<html>
<head>
  <style>
  #shoutbox
  {
  	width: 400px;
  	height: 400px;
  	
  	border-style:solid;	
  	border-width:5px;
  }
  
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	
	<div id="shoutbox">
	
	
	</div>	
	<script>
	$(document).ready(function()
	{	
		function LoadMessages() {
			$('#shoutbox').load('chat.php');
		}
		
		setInterval("LoadMessages()", 10000);
		
			
	});
	</script>
	<form id="chatForm">
		<input type="text" id="chatText" />
		<input type="submit" />
				
	</form>

</body>
</html>

Hope someone cal help, thanks :)

Member Avatar for stbuchok

What do you get when you go to chat.php directly?

How do you mean?

If I do this:

<script>
	$(document).ready(function()
	{	
		function LoadMessages() {
			$('#shoutbox').load('chat.php');
		}
		
		//setInterval("LoadMessages();", 1000);
		LoadMessages();
			
	});
	</script>

It will load the message? Not in real-time anyway!

Member Avatar for stbuchok

The following worked for me:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

<html>
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="test.css" />

<script src="jquery-1.6.4.min.js"></script>

<script>

$(function(){
	setInterval(function(){
		$('#myDiv').load('test.html');
	}, 10000);
});

</script>

</head>
<body>

<div id="myDiv" style="width: 800px; height: 600px; border: 1px solid black;">

</div>

</body>
</html>

If you don't see something showing up after 10 seconds it could be that chat.php has nothing to show. This is why I asked if when you navigate to chat.php if you see anything.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.