I am recently Creating a Blog site and it is based on php version 5.6.Now I am stuck over a week to achieve "ajax page load as well as url changing when click on navigation without refreshing the entire page". I have followed many suggestion from stakeoverflow and jQuery Forum.But own't make it properly. I have menu with dropdown and also have dropdown-toggle data attribute. Somtimes my code works fine but dropdown and dropdown-togglewon't work. Can anyone give me the way to achieve this.I am just a beginner of ajax. Here is my code.
header.php
<?php
require_once "../vendor/autoload.php";
include "../lib/Database.php";
include "../config/config.php";
include "../helpers/Format.php";
$fm= new Format();
$db = new Database();
$query ="SELECT * FROM `tbl_post` LIMIT 5";
$post = $db->select($query);
?>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<?php include '../scripts/meta.php';?>
<?php include '../scripts/css.php';?>
<?php include "../scripts/js.php";?>
</head>
<style>
.row{
margin:0;
}
</style>
<body>
<!-- header starts -->
<header>
<section id="smedia">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 navbar-left">
<p><a href="../Template/contact.php">PHONE: 01971982959</a> </p>
</div>
<div class="col-sm-4">
<?php
$slgQuery = "SELECT * FROM `tbl_social` WHERE `id`= '1'";
$socialMedia = $db->select($slgQuery);
if($socialMedia )
{
while($socialResult = $socialMedia->fetch_assoc()) {
?>
<a href="<?php echo $socialResult['fb']; ?>" target = "_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['tw']; ?>" target = "_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['pin']; ?>" target = "_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['gplus']; ?>" target = "_blank"> <i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['ln']; ?>" target = "_blank"> <i class="fa fa-linkedin" aria-hidden="true"></i></a>
<?php
}
}
?>
</div>
</div>
</div>
</section>
<!-- Navbar Starts -->
<div class="row">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../Template/index.php">
<?php
$slgQuery = "SELECT * FROM `title_slogan` WHERE `id`= '1'";
$getTitle = $db->select($slgQuery);
if($getTitle)
{
while($slgResult = $getTitle->fetch_assoc())
{
?>
<img src="../Dashboard/admin/<?php echo $slgResult['logo'];?>" alt="logo" class="img-responsive">
<?php
}
}
?>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php
$path = $_SERVER['SCRIPT_FILENAME'];
$currentPage = basename($path,'.php');
?>
<li <?php if($currentPage == 'index'){echo 'class ="active"';}?>><a href="../Template/index.php">Home <span class="sr-only">(current)</span></a></li>
<li <?php if($currentPage == 'Excellent'){echo 'class ="active"';}?>>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Post<span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<?php
if ($post){
while($result = $post->fetch_assoc())
{
?>
<li><a href="../Template/Excellent.php?id=<?php echo $result['id'];?>"><p><?php echo $result['title'];?></p></a></li>
<?php }
}else{
echo "data not Found!!";
}?>
</ul>
</li>
<?php
$aboutQuery = "select * from `tbl_page`";
$navigation = $db->select($aboutQuery);
if ($navigation)
{
while($aboutResult = $navigation->fetch_assoc())
{
?>
<li id="nav_link"
<?php if (isset($_GET['pageid'])&& $_GET['pageid']== $aboutResult['id'])
{
echo 'class ="active"';
}
?>
> <a href="../Template/page.php?pageid=<?php echo $aboutResult['id'];?>"><?php echo $aboutResult['name'];?>
</a>
</li>
<?php
}
}
?>
<li <?php if($currentPage == 'contact'){echo 'class ="active"';}?> ><a href="../Template/contact.php">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- Navbar Ends -->
</header>
<!-- header ended -->
js.php
$('#nav_link li a').click(function (e) {
e.preventDefault();
var navPage=$(this).attr('href');
// alert(navPage);
$(document.body).load(navPage).fadeIn('slow');
$('.dropdown-toggle').dropdown();
if(navPage!==location.href){
window.history.pushState({path:navPage},'',navPage);
}
return false;
});
Any help will be appriciate or please enlighten me.Thanks in advence
Update HERE IS THE UPDATE
header.php
<?php
// require_once "../vendor/autoload.php";
include "../lib/Database.php";
include "../config/config.php";
include "../helpers/Format.php";
$fm= new Format();
$db = new Database();
$query ="SELECT * FROM `tbl_post` LIMIT 5";
$post = $db->select($query);
?>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<?php include '../scripts/meta.php';?>
<?php include '../scripts/css.php';?>
</head>
<style>
.row{
margin:0;
}
</style>
<body>
<!-- header starts -->
<header>
<section id="smedia">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 navbar-left">
<p><a href="../Template/contact.php">PHONE: 01971982959</a> </p>
</div>
<div class="col-sm-4">
<?php
$slgQuery = "SELECT * FROM `tbl_social` WHERE `id`= '1'";
$socialMedia = $db->select($slgQuery);
if($socialMedia )
{
while($socialResult = $socialMedia->fetch_assoc()) {
?>
<a href="<?php echo $socialResult['fb']; ?>" target = "_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['tw']; ?>" target = "_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['pin']; ?>" target = "_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['gplus']; ?>" target = "_blank"> <i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['ln']; ?>" target = "_blank"> <i class="fa fa-linkedin" aria-hidden="true"></i></a>
<?php
}
}
?>
</div>
</div>
</div>
</section>
<!-- Navbar Starts -->
<div class="row">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../Template/index.php">
<?php
$slgQuery = "SELECT * FROM `title_slogan` WHERE `id`= '1'";
$getTitle = $db->select($slgQuery);
if($getTitle)
{
while($slgResult = $getTitle->fetch_assoc())
{
?>
<img src="../Dashboard/admin/<?php echo $slgResult['logo'];?>" alt="logo" class="img-responsive">
<?php
}
}
?>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right nav_link">
<?php
$path = $_SERVER['SCRIPT_FILENAME'];
$currentPage = basename($path,'.php');
?>
<li <?php if($currentPage == 'index'){echo 'class ="active"';}?>><a href="../Template/index.php">Home <span class="sr-only">(current)</span></a></li>
<li <?php if($currentPage == 'Excellent'){echo 'class ="active"';}?>>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Post<span class="caret"></span></a>
<ul class="dropdown-menu nav_link" aria-labelledby="dLabel">
<?php
if ($post){
while($result = $post->fetch_assoc())
{
?>
<li><a href="../Template/Excellent.php?id=<?php echo $result['id'];?>"><p><?php echo $result['title'];?></p></a></li>
<?php }
}else{
echo "data not Found!!";
}?>
</ul>
</li>
<?php
$aboutQuery = "select * from `tbl_page`";
$navigation = $db->select($aboutQuery);
if ($navigation)
{
while($aboutResult = $navigation->fetch_assoc())
{
?>
<li
<?php if (isset($_GET['pageid'])&& $_GET['pageid']== $aboutResult['id'])
{
echo 'class ="active"';
}
?>
> <a href="../Template/page.php?pageid=<?php echo $aboutResult['id'];?>"><?php echo $aboutResult['name'];?>
</a>
</li>
<?php
}
}
?>
<li <?php if($currentPage == 'contact'){echo 'class ="active"';}?> ><a href="../Template/contact.php">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- Navbar Ends -->
</header>
<!-- header ended -->
js.php
$('.nav_link li a').click(function (e) {
e.preventDefault();
var navPage= $(this).attr('href');
//alert(navPage);
$(document.body).load(navPage).fadeIn('slow');
$(".dropdown-toggle").dropdown();
if(navPage!==location.href){
window.history.pushState({path:navPage},'',navPage);
}
return false;
});
Very First remove the id="nav_link" from <li> and add then add class on <ul>
I will recommend that you one class and to add on your both <ul>
From: <ul class="nav navbar-nav navbar-right">
To: <ul class="nav navbar-nav navbar-right nav_link">
Also for the secound <ul>
Add same class
Now change in the jquery
from: $('#nav_link li a').click(function (e) {
To: $('.nav_link li a').click(function (e) {
As # is for Id and . is for Class Learn more about this at here: Selector
Extra Update
There are a lot of ways to do this but will let you know the one which is useful with current code
you need to stop the jquery code if there is # in the URL and that is for post menu
$('.nav_link li a').click(function (e) {
e.preventDefault();
var navPage= $(this).attr('href');
if(navPage != "#"){
// your code
}
return false;
});