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

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.

About the author

John Patel

John Patel is an experienced blogger and web developer. He always likes to learn something new. He is helping the new developers through Web development and SEO(Search Engine Optimization) tutorials, tips and tricks articles.

6 Comments

Click here to post a comment

  • You have made some really good points there.
    I looked on the internet for additional information about
    the issue and found most people will go along with your views on this
    site.

  • Having read this I thought it was very enlightening. I appreciate you taking the time and effort to put this article together.
    I once again find myself spending way too much time both reading and leaving comments.

  • Nice post. I was checking continuously this blog and I’m impressed!
    Extremely helpful information specially the last part: I care for such info a lot. I was seeking this particular info for a very long time.
    Thank you and best of luck.

SUBSCRIBE TO JOIN US

Join as a subscriber and get notifications of our latest articles,tutorials & tips/tricks directly to your inbox. For Free.
%d bloggers like this: