Dynamic page load and replacing the content

Hi, Let us see today and understand the concept of dynamic page loading, how to achieve to create a dynamic page replacing content with HTML, jQuery. This method will not change the URL in the address bar location since it is async.
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, to which 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.