Refresh Div with js help please

[Davie33]

Hi am making a shout box and i would like the box to refresh every 15sec's.

I have came across a js code and found what it does.

It does refresh the div but no content shows cause of the part in js saying loading and a counter shows too which i don't want.

I do not know anything about java but i do see what it does in the code.

Thanks for any help in advance.

var counter = 0;
window.setInterval("refreshDiv()", 15000);
function refreshDiv(){
counter = counter + 1;
document.getElementById("chat").innerHTML = "Loading.... " + counter;
} 

[.josh]

first off, this is javascript, not java.  Two completely different things.  

 

2nd, your code only does that because that's all the code actually does.  Where is the code that actually retrieves the shoutbox content? 

[Maq]

Where are you "refreshing" from? If you're storing the chat messages on the server then you need to make an ajax call in your refreshDiv() function and replace the chat with the new content.

 

If not, then you need to elaborate.

[Davie33]

Hi this is the js link thats in my inc.php to my refresh.js file

<script type="text/javascript" src="<?php echo $setting['siteurl'];?>includes/js/refresh.js"></script>

 

The code above is what is in the refresh.js

 

The php side of it is this.......I think there may be a few bugs i need to sort out.

The div that gets refreshed is <div id="chat"> but when refreshed only the chat div box shows with no content.

<?php
if ($setting['chatdisabled'] == 'no') {
} else {
if (isset($_SESSION['user'])) { ?>
<div class="table">
<table class="listing" cellpadding="0" cellspacing="0">
<div class="forum">Chat</div>
<td class="entrybox">
<?php
if (isset($_SESSION['user'])) {
	if (isset($_POST['name'])) {
		$name = $_POST['name'];
	} else if (isset($_SESSION['user'])) {
		$name = $_SESSION['user'];
	} else {
		$name = '';
	} 
	if (isset($_POST['Submit'])) {
		$id = yasDB_clean($_POST['id']);
		$text = yasDB_clean($_POST['text']);
		$date = yasDB_clean($_POST['date']);

		if (isset($_POST['name'])) {
			$name = yasDB_clean($_POST['name']);
		} else if (isset($_SESSION['user'])) {
			$name = $_SESSION['user'];
		} else {
			$name = '';
		}
		
	$date = date("m-j-y G:i "); //create date time
	
	$sql = yasDB_insert("INSERT INTO `shouts` (id, text, date, name) VALUES ('', '$text', '$date', '$name')");
	$result = $sql;
	if($result){
	?>
	<META HTTP-EQUIV="Refresh" CONTENT="0; URL=<?php echo $setting['siteurl'];?>">
	<?php
	}
} else {
?>
<div class="shoutform">
<form id="form1" name="form1" method="post" action="">
<input name="name" type="hidden" value="<?php echo $name;?>"/>
<input name="date" type="hidden" value=""/>
Chat:<input type="text" name="text" class="shouttext"/>
<input type="submit" class="shoutbutton" name="Submit" value="Shout" />
<input type="hidden" name="id" value="<?php echo $id;?>"/>
</form>
</div>
<?php } 
}?>
<div id="chat">
<?php
	$query = yasDB_select("SELECT shouts.id,shouts.text,shouts.date,shouts.name,user.id,user.username,user.avatarfile,user.useavatar FROM shouts LEFT JOIN user ON shouts.name = user.username ORDER BY shouts.id desc LIMIT 20");
	$prefix = $setting['siteurl'] . 'templates/' . $setting['theme'] . '/skins/' . $setting['skin'] . '/images/smileys/';
    while($row = $query->fetch_array(MYSQLI_ASSOC)) {
	$row = $query->fetch_array(MYSQLI_ASSOC);
		$id = $row['id'];
		$username = $row['name'];
		$date = $row['date'];
		$text = $row['text'];
		$text = str_replace(':D','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/biggrin.gif" title="biggrin" alt="biggrin" />',$text);
		$text = str_replace(':?','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/confused.gif" title="confused" alt="confused" />',$text);
		$text = str_replace('8)','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/cool.gif" title="cool" alt="cool" />',$text);
		$text = str_replace(':cry:','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/cry.gif" title="cry" alt="cry" />',$text);
		$text = str_replace(':shock:','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/eek.gif" title="eek" alt="eek" />',$text);
		$text = str_replace(':evil:','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/evil.gif" title="evil" alt="evil" />',$text);
		$text = str_replace(':lol:','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/lol.gif" title="lol" alt="lol" />',$text);
		$text = str_replace(':x','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/mad.gif" title="mad" alt="mad" />',$text);
		$text = str_replace(':P','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/razz.gif" title="razz" alt="razz" />',$text);
		$text = str_replace(':oops:','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/redface.gif" title="redface" alt="redface" />',$text);
		$text = str_replace(':roll:','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/rolleyes.gif" title="rolleyes" alt="rolleyes" />',$text);
		$text = str_replace(':(','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/sad.gif" title="sad" alt="sad" />',$text);					
		$text = str_replace(':)','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/smile.gif" title="smile" alt="smile" />',$text);
		$text = str_replace(':o','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/surprised.gif" title="surprised" alt="surprised" />',$text);
		$text = str_replace(':twisted:','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/twisted.gif" title="twisted" alt="twisted" />',$text);
		$text = str_replace(':wink:','<img src="' . $setting['siteurl'].'templates/'.$setting['theme'].'/skins/'.$setting['skin'].'/images/smileys/wink.gif" title="wink" alt="wink" />',$text);
		if ( $row['useavatar'] == '1' ) {
			$avatarimage = $setting['siteurl'] . 'avatars/' . $row['avatarfile'];
		} else {
			$avatarimage = $setting['siteurl'] . 'avatars/useruploads/noavatar.JPG';
		}
		if ($setting['seo'] == 'yes') {
			$memberlink = $setting['siteurl'].'showmember/'.$id.'.html';
		} else {
			$memberlink = $setting['siteurl'] . 'index.php?act=showmember&id='.$id ;
		}
		?>
		<div id="messageid">
		<div class="msgava"><a href="<?php echo $memberlink;?>"><img src="<?php echo $avatarimage;?>" width="40" height="40" align="center" title="<?php echo $username;?>"></a></div>
		<div class="msgbox">
		<div class="msguser"><a href="<?php echo $memberlink;?>" title="<?php echo $username;?>"><?php echo $username;?></a>  -  <?php echo $date;?>  -  </div>
		<div class="msgtext"><?php echo $text;?></div>
		</div>
		</div>
<?php } ?>
</div>
</td>
<td class="messagebox style1">Am looking for any idea's on what to put in here.</td>
</table>
</div>
<?php }
} ?>

@Grumpy Old Man i know this is javascript i do not know any thing much about it and just trying to learn so stop being the Grumpy old man lolz

[.josh]

sorry, i wasn't trying to be grumpy or nitpick.. i only wanted to point it out because they are two different things, and if you happen to go searching for answers elsewhere, using "java" as a keyword instead of "javascript" will give you vastly different results.  

[Davie33]

No harm done,Iwas searching javascript and that was one of the codes on my first post i came across as well as other ones which wasn't working as they was very old codes.

I do need to learn more about javascript as am at a lost cause with this code.

[Maq]

Your PHP structure is a bit messy but essentially what you want to do is make an AJAX call to the script that grabs the latest set of entries from your shouts table. This snippet requires JQuery and will probably populate your chat more than you want but at least you'll get the idea:

function refreshChat(){
	
	var url = './your-php-script.php'; //Pass in whatever parameters you need here
	
	$.ajax({
	    type: 'POST',
	    url: url,
	    success: function(data){
		    $('div#chat').replaceWith(data); 
	    }
	});
}

[Davie33]

Thanks for the help.I will see how i get on thanks.