Dynamic page load and replacing content

()

Today, I would like to share with 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 following.

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.

Page loader jquery example

<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 on a single page.

I hope this was helpful. Please share, comment and subscribe.

Hit Like if this article was useful to you!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Leave a Reply

Your email address will not be published. Required fields are marked *