All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

ajax load php into page div

  • # November 16, 2012 at 2:02 pm

    I’ve got a small php site where my index.php loads content based on the nav links — so a link “” will load the contact.php file after the header.php, nav.php, and before the footer.php. Works great.
    Now I want to use jQuery ajax to load the various ‘content’ php files based on the URL as in the sample above. How do I do that? I’ve tried using the tutorial here ( but it depends on using nice neat .html extensions for the links.

    # November 16, 2012 at 6:03 pm


    Have you tried this?

    jQuery’s .get( ) method

    # November 21, 2012 at 11:15 am

    got it. here’s what i did:

    var toLoad = $(this).attr(‘href’).match(/page=(.*)/)[1]+’.php’;
    function loadContent() {

    # November 21, 2012 at 11:19 am

    Is this solved?

    # January 30, 2013 at 12:02 am

    I apologize in advance if this is too much to ask. My situation sounds much like the original question. I’ve got a php site with divisions, “header”, “navigation”, “content”, and “footer” in the css and includes in the index.php file for them. My goal is to have a folder with all the content pages which will load into the content division of the index file by clicking on a link in the navigation.php file. This way all I have to do is add a link for a new content page. I’ve read many online articles relating to this but I’m not a coder and they always leave out where the code goes and which variables to change. If I could get some specific example of how to do this, I’d be most appreciative. Here’s a couple of sites I’ve made that I want to change and eliminate the side menu if it’s possible to have enough submenus in the navigation bar to give the content.php more width.

    # January 30, 2013 at 11:50 am

    I think I found a solution and I think I probably should’ve started a new thread with my question. Please just delete my two posts. FWIW, here’s what I did.

    put the following in the content.php file

    < ?php
    $default = “info/pageone.php”;
    $allowed = array (
    if( isset( $_POST[“P”] ) || isset( $_GET[“P”] ))
    $page = isset($_GET[“P”]) ? $_GET[“P”] : $_POST[“P”];

    if( in_array( trim ( $page ), $allowed ))
    $file = $page . “.php”;
    if( (file_exists( $file )))
    include( $file );
    include( $default );
    include( $default );
    include( $default );

    navigation.php has:

    Page One    
    Page Two     
    Page Three    

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed