Dynamic page load and replacing content

Tags: jQuery 4
Rate this post to improve.

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){
  $.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! 🙂

Code Snippets UX-UI

Join Discussion

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

All code will be displayed literally.

Discussion