Including a page

[Techykid3]

Okay, I've seen a page (i had the source), where a page would have

<div id="shoutcontainer">

</div>
and there would be a list of messages there, its like INCLUDING a page using javascript, but ONLY inside of a div.

How is that done?

[bluewalrus]

I could only see it done using ajax if it was javascript do you have a link to the page?

It could be accomplished using php easily.

<div id="shoutcontainer">
<?php include "file.ext";?>
</div>

[Techykid3]

Okay, sorry about low detail...

I am making a shoutbox, from PHP/CSS/ETC...

It can do everything I want, but I need it to refresh ONLY a div, not the whole page, here is how it is:

On my website, the MAIN page, I want to have a <?php include('shoutbox.php'); ?>, the form to post, and the message list, is in /shoutbox.php, and the rest of the files are in /shoutbox/, which is working out fine, and inside of the shoutbox.php is several things: The message list php include (<?php include('shoutbox/content.php'); ?>), and the form. I want to refresh content.php, using a REFRESH button. But the problem is, I don't want it refreshing all of shoutbox.php, I only want the message list PHP to be refreshed, I could use javascript/jQuery/ajax, but I do not know much about those.. So you know, the message list is inside of #shoutcontainer... I also want it where when I submit the form to post a shout, it doesn't refresh the whole shoutbox.php (or the index.php *main page of the website*) to refresh. I only want the message list to refresh. I don't need fancy effects.

Thanks!

[bluewalrus]

Something like this should do it, this way it is populated when the page loads

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
   type: "POST",
   url: "PAGE.EXT",
   data: "additional=param&second=2",
   success: function(msg){
     $("#shoutcontainer").html(msg);
   }
 });
});
</script>
<div id="shoutcontainer"></div>

or for every 10 seconds

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
function update() {
	$.ajax({
	   type: "POST",
	   url: "PAGE.EXT",
	   data: "additional=param&second=2",
	   success: function(msg){
	     $("#shoutcontainer").html(msg);
	   }
	});
}
window.setInterval("update()", 10000);
</script>
<div id="shoutcontainer"></div>

[jscheuer1]

A more recent version of jQuery would be nice, and something to prevent the page from being cached:

<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
function update() {
	$.ajax({
	   type: "post",
	   url: "page.ext",
	   cache: false,
	   data: {'additional': 'param', 'second': '2'},
	   success: function(msg){
	     $("#shoutcontainer").html(msg);
	   }
	});
}
setInterval(update, 10000);
</script>
<div id="shoutcontainer"></div>

[Techykid3]

2 problems with the code above

1: On page load, I have to wait 10 seconds for it to show the messages
2: When I submit the form, I want it to update itself silently, not having to refresh the page


If those 2 problems can get fixed, I'd love it!

[bluewalrus]

How is the message being submitted? You could probably change it from using the setinterval to using click(). You can have the initial load populated using the php include.

[Techykid3]

Its submitted using post. Theres a lot of fields that are hidden, such as IP, timestamp, MAC, etc. I don't know alot about javascript, I know very little of it. So I kind of need you guys to write it the javascript.
Also, I don't want to refresh the page to submit it... Because then its kind of "not cool" lol.

Also, if possible can I block swear words from being submitted? Such as blocking some words from being displayed, instead, being replaced with *'s?

[bluewalrus]

It's going to need to be done through PHP, javascript, and some storage system, probably SQL. Please post everything you have so far and we will provide you with information so you can create this.

[jscheuer1]

You actually need very little javascript for this. You can post a form via jQuery's ajax() method and have it serialize() all of the form's inputs as the POST data. Then it's just like submitting the form, except that instead of reloading the page, you can import the results back to the page without reloading. For example:

<!DOCTYPE html>
<html>
<head>
<title>Serial Post Demo - jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	function update(e){
		e.preventDefault();
		$('#shoutcontainer').html('Loading . . .');
		$.ajax({
			type: 'post',
			url: 'page.php',
			cache: false,
			data: $(this).serialize(),
			success: function(msg){
				$('#shoutcontainer').html(msg);
			}
		});
	}
	$('#myform').submit(update);
});
</script>
</head>
<body>
<form id="myform">
<input type="hidden" name="username" value="Bob">
<input type="text" name="something">
<input type="submit" value="Go">
</form>
<div id="shoutcontainer"></div>
</body>
</html>

And then on page.php you can do whatever's required (substitutions, grab data, posts, whatever from database and/or feed. No javascript allowed on page.php though, as it will never be loaded into the browser.

Just to test the above I used this on page.php:

<?php
print_r($_POST);
?>

Try it out.