Home » How to change content and URL without refreshing page using ajax – jquery – php
How to • Php

How to change content and URL without refreshing page using ajax – jquery – php

June 30, 2018

In this article, I will explain to you how to change content and URL without refreshing page using ajax – jquery. All website owner wants their site to run very speedily. So for decrease website loading speed, I have created one script which includes PHP, jquery and ajax code.

Due to the slow website speed, I have created this script for all of the users. Website speed is now the main factor in SEO. So you have to try this script if your website taking a long time to load. If you don’t have a knowledge of Ajax and jquery, Please learn the basics first.

I have created one demo also for your better understanding. Also, you can find the source code link at the bottom of the page. Let’s start now.
View Demo

Change content and URL without refreshing page using ajax – jquery – php

change content and URL without refreshing page

Here is the core part of the code. I have divided it into two parts. First is jQuery portion and second is ajax portion.

Part 1: jQuery Code (It is used to change the url of the website)

$(function(){
   $("a[rel='tab']").click(function(e){
	pageurl = $(this).attr('href');
	$.ajax({url:pageurl+'?rel=tab',success: function(data){
	   $('#content').html(data);
	}});
	if(pageurl!=window.location){
	   window.history.pushState({path:pageurl},'',pageurl);	
	}
	return false;  
   });
});
Part 2: Ajax Code (It is used to fetch data of other pages)

$(window).bind('popstate', function() {
   $.ajax({url:location.pathname+'?rel=tab',success: function(data){
	$('#content').html(data);
   }});
});

Let’s take a review of full script step by step

I have created six files for the whole script and create a demo.

(1) Create “header.php” file then copy below code and paste it.

<?php
	ini_set("error_reporting", 1);
	header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
	header("Cache-Control: post-check=0, pre-check=0", false);
	header("Pragma: no-cache");
	if($_GET['rel']!='tab'){
?>
<html>
<head>
   <style>
        *{margin:0px; padding:0px; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
        #menu{font-size:20px;width:100%; height:60px; background:rgba(212,212,212,0.6); text-align:center;}
        #menu a{line-height:2em; font-size:24px; text-decoration:none; color: #fff; font-weight:bold}
	h1 {
        font-family: Helvetica,Arial, sans-serif;
        text-align: center;
        text-shadow: 2px 2px 0px rgba(255,255,255,.7), 5px 7px 0px rgba(0, 0, 0, 0.1);
        font-size:60px; 
        color:#fff;
        line-height:8em;
        }
	.page { width:100%; height:550px; }
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script>
	$(function(){
		$("a[rel='tab']").click(function(e){
			pageurl = $(this).attr('href');
			$.ajax({url:pageurl+'?rel=tab',success: function(data){
				$('#content').html(data);
			}});
			if(pageurl!=window.location){
				window.history.pushState({path:pageurl},'',pageurl);	
			}
			return false;  
		});
	});
	$(window).bind('popstate', function() {
		$.ajax({url:location.pathname+'?rel=tab',success: function(data){
			$('#content').html(data);
		}});
	});
   </script>
</head>
<body>

<div id='menu'>
   <a rel='tab' href='index.php'>Home</a> | |
   <a rel='tab' href='about-us.php'>About Us</a> | |
   <a rel='tab' href='contact-us.php'>Contact Us</a>
</div>

<div id='content'>
<?php } ?>
(2) Create “footer.php” file then copy below code and paste it.

</body>
</html>
(3) Create “index.php” file then copy below code and paste it.

<?php include 'header.php'; ?>

<div class="page">
<h1>This Is <strong>Home</strong> Page</h1>
</div>

<?php if($_GET['rel']!='tab'){ echo "</div>";} ?>
<?php include('footer.php'); ?>
(4) Create “home.php” file

<?php include 'header.php'; ?>

<div class="page">
  <h1>This Is <strong>Home</strong> Page</h1>
</div>

<?php if($_GET['rel']!='tab'){ echo "</div>";} ?>
<?php include('footer.php'); ?>
(5) Create “about-us.php” file then copy below code and paste it.

<?php include 'header.php'; ?>

<div class="page">
  <h1>This Is <strong>About Us</strong> Page</h1>
</div>

<?php if($_GET['rel']!='tab'){ echo "</div>";} ?>
<?php include('footer.php'); ?>
(6) Create “contact-us.php” file then copy below code and paste it.

<?php include 'header.php'; ?>

<div class="page">
  <h1>This Is <strong>Contact Us</strong> Page</h1>
</div>

<?php if($_GET['rel']!='tab'){ echo "</div>";} ?>
<?php include('footer.php'); ?>

That’s it finally you can run the code and execute it in your browser. As a result, you will see the URL and content is change when you click links without page refresh.

Also, you can download the source code from below link and view the demo.

Download Script   View Demo

Releated Post

I hope you will like this tutorial and enjoyed it. If you have any questions then please comment below your question or contact me by contact us form. Please share this post with your friends.