About Me

My photo

one who looks outside, dreams
one who looks inside, awakens!!

Get FREE updates!! subscribe!!

Delivered by FeedBurner

Like it? Follow up!! :)

Oct 13, 2013

Google like page load in Jquery ajax (dynamic page load)

Hi ,

Today, i would teach you a very simple method to load multiple pages into a single page, without showing page URL's.in the address bar.

I am using Jquery, ajax to achieve the below.

First, let us create a page html/php(say index.php) and let us create two DOM objects. one is the button and another division, where the external pages are loaded dynamically.


<input type="button" value="load"/> - creates the button.
<div id="page_loader"></div> - create div to load page into it.

Now , let us write a function in Jquery to load pages on the fly.

function loadpage(page){
  
    $.ajax({
        url:page,
        beforeSend:function(){
            $('#page_loader').html("Please wait...");
        },
        success:function(data){
            $('#page_loader').html(""); // to empty previous page contents.
            $('#page_loader').html(data);
        }
    });
}

Now , from the button click, pass the page that you would like to load.
For e.g , if you want to load a contact page contact.php.. simply call the function like this...


<input type="button" value="load" onclick="loadpage('contact.php')"/>

On click of the button , the contact.php page will be loaded into the "page_loader" division in the index.php page. Like this we can load 'n' number of pages in a single page.

Please subscribe for more cool codes :)

That's it guys feedback's are welcome! :)