Dynamic Page Content Replacement using AJAX and PHP Tutorial

Dynamic Page Content Replacement using AJAX and PHP Tutorial

In this tutorial, I will show you how to use PHP and jQuery to dynamically change webpage content.

All this code should be done in the <HEAD> portion of your index page:

Include the various javascript files needed:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.history.js"></script>

Create a PHP multi-dimensional array of all pages:

<?php

    $pages = Array(
        Array(page => ‘main.php’, title => ‘Home’, hash => ‘main’),
        Array(page => ‘portfolio.php’, title => ‘Portfolio’, hash => ‘portfolio’),
        Array(page => ‘templates.php’, title => ‘Templates’, hash => ‘templates’),
        Array(page => ‘price.php’, title => ‘Pricing’, hash => ‘price’),
        Array(page => ‘contact.php’, title => ‘Contact Us’, hash => ‘contact’),
        Array(page => ‘policy.php’, title => ‘Privacy Policy’, hash => ‘policy’)
    );

?>

Since PHP is pre-processed at the server, we can use the array created above to populate a javascript associative array:

<script type="text/javascript">
    // [CDATA[

    var pages = [
        <?php
        $i = 0; // count variable
        $end = "' },\n"; // variable for the end of the array variable
        $page_count = count($pages); // number of pages for the site

        foreach ($pages as $page) { // Iterate through the PHP array
            if ($i++ == $page_count) { // current page is last page,
                $end = "' }\n"; // close the array.
            }

            echo "\t\t{ title: '{$page['title']}', hash: '" . $page['hash'] . $end; // output the array values for the javascript array
        }
    
        ?>
    ];

    // ]]
</script>

<script type="text/javascript">

    // <!–
    // PageLoad function
    // This function is called when:
    // 1. after calling $.historyInit();
    // 2. after calling $.historyLoad();
    // 3. after pushing “Go Back" button of a browser

    function pageload(hash) {
        // hash contains a value, let’s use it.
        if(hash) {
            // restore ajax loaded state
            // Load data from the server and place the returned HTML into
            // the matched element.
            $(“#art-content").load(hash + “.php?noheader=false",
                null,
                contentLoaded); // javascript function contentLoaded() function is called

	    cur_hash = hash;
        } else { // otherwise, load the home page
            // start page
            $(“#art-content").load(“main.php?noheader=false",
                null,
                contentLoaded);

            cur_hash = ‘main’;

            <?php 
                $page[‘page’] = ‘main.php’;
            ?>
        }
    }

    $(document).ready(function(){
        // After the DOM is done loading,
        // Initialize history plugin.
        // The callback is called at once by present location.hash.
        $.historyInit(pageload);

        // set onlick event for buttons
        $(“a[rel=’history’]").click(linkClick);
    });

    function contentLoaded() {
        // for each page, make any links that go to that page
        // use the hash-mark href instead and have rel=’history’
        // so that they use the jquery history plugin to process
        // and load their content through ajax instead of a link
        $(function() {
            $.each(pages, function(i, val) {
            $(‘a[href=’ + val[‘hash’] + ‘.php]’)
                .attr(‘rel’, ‘history’)
                .attr(‘href’, ‘#’ + val[‘hash’])
                .click(linkClick);
            });
        });

        if(cur_hash) {
            cur_hash = cur_hash.replace(/^.*#/, ");
            $(“a[rel=’history’]").removeClass(‘active’);
            $(‘#l_’ + cur_hash).addClass(‘active’);
        }
    }

    var cur_hash;

    function linkClick() {
        cur_hash = this.href;
        cur_hash = cur_hash.replace(/^.*#/, ");

	// moves to a new page.
        // pageload is called at once.
        $.historyLoad(cur_hash);

        $(‘#link’).attr(‘href’).valueOf() = cur_hash;

        return false;
    }

    // –>
</script>

For more info on the jQuery Library, visit their website at http://jquery.com/.

Now for the html part…

<ul class="art-menu">
    <?php

    /*construct the menu from the item array built in the head section */
    foreach ($pages as $item) {
        echo “<li><a id=\"l_{$item[‘hash’]}\" href=\"{$item[‘page’]}\"><span class=\"l\"></span><span class=\"r\"></span><span class=\"t\">{$item[‘title’]}</span></a></li>\n";
    }

    ?>

    <li>
        <a href="https://manzwebdesigns.com/" title="Opens in new window" target="_blank">
            <span class="l"></span><span class="r"></span><span>MWD Events</span>
        </a>
    </li>
</ul>

<div class="art-content">
    <!—jQuery code dumps the requested content here –>
</div>

Leave a Comment

Scroll to Top