CODEWITHSUNDEEP
phpjqueryajax
Harlow
Harlow

Reputation: 153

Dynamically load PHP within a main page

I'm pretty new when it comes to PHP and AJAX, so I keep running into issues, and after scouring the web for ideas, I've come up short. I'm looking for a method to dynamically load content (PHP/HTML mixture) on one main page. The main page would include navigation, and once a link within this navigation is clicked, the content in the main content div would change. Pretty simple, right, but I've been a big struggle bus on this topic.

The method I've liked the best so far is CSS-Tricks Rethinking Dynamic Page Replacing Content which uses the HTML5 History API. I liked that it allowed the use of the back and forward browser buttons, but I could not get it to work in Chrome.

This isn't your typical "help me figure out what's wrong with my code" question, so I apologize in advance. Mostly I'm looking for a bit of advice on how best to find a solution to this problem.

Upvotes: 0

Views: 3365

Answers (3)

Palak Taneja
Palak Taneja

Reputation: 2061

Here is a simple example to make you understand :

Make an ajax call on click of the navigation links,

<p id="test">CLICK ME</p>

<p id="result">Your result</p>

Ajax code within the script tags is as follows : 

$(document).ready(function() {  

$("#test").click(function(){

    $.ajax({
        url : 'testing.php',
        type : 'GET',
        async : 'true',
        cache : 'false',

        success : function(data, textStatus, xhr)
        {
            $('#result').empty().html(data);
        },
    });

});
});

Note : the ajax call url can be php or html page or even text file where you have the result to be shown on the main page division.

Upvotes: 0

Clarissa
Clarissa

Reputation: 115

Go with Ajax... I was in a similar situation a couple of weeks ago. I didn't know much about it, but this site is quite helpful: http://www.w3schools.com/ajax/ajax_example.asp

It has simple examples that will help you to understand how the calls work. I hope it helps. It is difficult to give more specific advice since you don't explain much about your application.

Upvotes: 1

Lawrence Cherone
Lawrence Cherone

Reputation: 46602

This can be done with AJAX, you will need a content/view/page anchor to determine what content is loaded, then you can use that to load content from your php,

Heres a snippet of jQuery code that uses #hash to determine content, so http://example.com/#home will do an ajax request for $_POST['view']='home'

$(function(){
    // Detect hashchange (browser back/forward buttons)
    $(window).bind('hashchange', function() { 
      load_content();
    });
    // Init content
    load_content();
});

function load_content(){
    //get the hash
    var page = window.location.hash;
    page = page.substring(1);
    if(page == ''){
        page='home';
    }

    //get the content, replace any - with / so php can route to sub actions ect
    $.post("./", { 'view': page.replace("-","/") },
    function(data) {
        //load the content into the load container
        $("#load").html(data).fadeIn('slow');
    });
}

<div id="load"></div>

Then you can simply find the route to your script within php with:

$route      = explode('/',$_POST['view']);
$controller = (!empty($route[0])) ? $route[0] : null;
$action     = (!empty($route[1])) ? $route[1] : null;

Upvotes: 0

Related Questions