How to change the content of a div without reloading the webpage?

Question

I have a website, that uses PHP to select the content,

<div>  
    <? include ("navigation.php"); // navigation.php generates the menu ?>
</div>
<div>
    <?      
        $type = $_GET["type"];
        switch ($type) {
        case "page" :
            include "Text.php";
            break;  
        case "news":
            include "news_2.php";
            break;
        default :
            include "main.php";     
        }
    ?>
</div>

The url is of the format domain.com/index.php?type . I need to change the block #content without reloading the whole page, how can I do this?

Answer 1

As you've tagged the question with "jquery" I assume you know what that is, and that you're loading it into your page.

All you need to is give your div and ID... content here

And then use a bit of jquery.. in its simplest form just to load your content from 'myurl.php' into 'mydiv' when the page has finished loading:

$(document).ready(function() { 
  $("#mydiv").load("myurl.php");
});

You'll no doubt want some logic to determine what loads, and under what circumstances. If you need to pass data back to the URL then you'll need to go for jquery ajax ($.ajax). Its all pretty easy, loads of examples on the web, and good docs on the JQuery website.

Answer 2

This would best be done with Ajax. I like using jQuery's ajax function. Something like this:

function load(page){    
    var datastring='ANY DATA YOU WANT TO SEND';

    $.ajax({
        type: "POST",
        url: 'your/pagehtml/',
        data: "bust="+Date()+datastring,
        dataType: "html",
        cache: false,
        success: function(html){ 
            $('#content').html(html)
        }
    });
    return false;
}

You wouldn't need to send the page in the URL this way. Anytime you change the url, you must be loading a different page. Outside of .htaccess rewrite. Which isn't what you need.

Fire this on click or whatever you want.

Answer 3

If you're using jQuery, it's pretty easy. You didn't post what is supposed to trigger the change, so I'll assume you have a list of links in another element with an id of nav.

Read more about the jQuery Ajax request here: http://api.jquery.com/jQuery.ajax/

//run on page load
$(function(){   
    //bind a click event to the nav links
    $("#nav a").bind("click", function(e){ 

        //keep the links from going to another page by preventing their default behavior
        e.preventDefault();

        //this = link; grab the url
        var pageLocation = this.href;

        //fire off an ajax request
        $.ajax({ 
            url: pageLocation, 

            //on success, set the html to the responsetext
            success: function(data){ 
                $("#content").html(data.responseText); 
            } 
        });
    });
});

I'd also suggest doing some code cleanup like caching your $("#content") element on the load event (something like window.container = $("#container"), and using window.container later on), but I left it as-is so that everything remains clear.