Dynamic page load and replacing content

Hi ,

Today, I would like to 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 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){
      $('#page_loader').html("Please wait...");
      $('#page_loader').html(""); // to empty previous page contents.

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! 🙂

Join the Conversation


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

  1. I was actually looking for this resource a few weeks back. Thanks for sharing with us your wisdom.This will absolutely going to help me in my projects .