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/index.php?type. I need to change the block #content without reloading the whole page, how can I do this?

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./index.php?type. I need to change the block #content without reloading the whole page, how can I do this?

• php
• javascript
• jquery
• ajax

3 Answers 3

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.

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.

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./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.