Results 1 to 10 of 10

Thread: Including a page

  1. #1
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Including a page

    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?

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    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.
    Code:
    <div id="shoutcontainer">
    <?php include "file.ext";?>
    </div>
    Corrections to my coding/thoughts welcome.

  3. #3
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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!
    Last edited by Techykid3; 08-28-2011 at 04:18 PM.

  4. #4
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

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

    Code:
    <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
    Code:
    <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>
    Last edited by bluewalrus; 08-28-2011 at 05:10 PM. Reason: Add timed update
    Corrections to my coding/thoughts welcome.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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!

  7. #7
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    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.
    Corrections to my coding/thoughts welcome.

  8. #8
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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?

  9. #9
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    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.
    Corrections to my coding/thoughts welcome.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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 Code:
    <?php
    print_r
    ($_POST);
    ?>
    Try it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •