Ajax php page and url change on load using load() function without refreshing


Ajax php page and url change on load using load() function without refreshing



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.


dropdown


dropdown-toggle


dropdown


dropdown-toggle



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">




PHONE: 01971982959




select($slgQuery);
if($socialMedia )
{
while($socialResult = $socialMedia->fetch_assoc()) {
?>
" target = "_blank">
" target = "_blank">
" target = "_blank">
" target = "_blank">
" target = "_blank">


</div>
</div>
</section>
<!-- Navbar Starts -->






Toggle navigation






select($slgQuery);
if($getTitle)
{
while($slgResult = $getTitle->fetch_assoc())
{
?>
" alt="logo" class="img-responsive">



<!-- Collect the nav links, forms, and other content for toggling -->
<!-- /.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">




PHONE: 01971982959




select($slgQuery);
if($socialMedia )
{
while($socialResult = $socialMedia->fetch_assoc()) {
?>
" target = "_blank">
" target = "_blank">
" target = "_blank">
" target = "_blank">
" target = "_blank">


</div>
</div>
</section>
<!-- Navbar Starts -->






Toggle navigation






select($slgQuery);
if($getTitle)
{
while($slgResult = $getTitle->fetch_assoc())
{
?>
" alt="logo" class="img-responsive">



<!-- Collect the nav links, forms, and other content for toggling -->
<!-- /.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;
});





What did you want to do after ajax call?
– DsRaj
Jul 3 at 4:36





I have 4 options is menu 1. Home, 2. post(dropdown).3. about(dynamic).4.Contact. When I click on home.The index.php load without refreshing. But i click on post, the dropdown menu won't work and it stuck,nothing happen but showed hash on url. I like to achieve, when click on every menu item another page load with change the url without refreshing the whole page.
– Ridwanur Khan
Jul 3 at 4:43





Okay that's make sense, But URL of browser you mean? See you can change the part's on the webpage but why URL ?
– DsRaj
Jul 3 at 4:50





And very first add the <li id="nav_link"> Id on the UL i.e: <ul id="nav_link"> and remove from <li>
– DsRaj
Jul 3 at 4:52





okay I understand what you asking.Actually i mean by url change like that..when i click on contact the url must be change like localhost/project/Template/contact.php from localhost/project/template/index.php. Does it make sense?
– Ridwanur Khan
Jul 3 at 4:58




1 Answer
1



Very First remove the id="nav_link" from <li> and add then add class on <ul>


id="nav_link"


<li>


<ul>



I will recommend that you one class and to add on your both <ul>


<ul>



From: <ul class="nav navbar-nav navbar-right">


<ul class="nav navbar-nav navbar-right">



To: <ul class="nav navbar-nav navbar-right nav_link">


<ul class="nav navbar-nav navbar-right nav_link">



Also for the secound <ul>
Add same class


<ul>





Now change in the jquery



from: $('#nav_link li a').click(function (e) {


$('#nav_link li a').click(function (e) {



To: $('.nav_link li a').click(function (e) {


$('.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;



});





All my js script in js.php and my navigation menu on header.php.If i include js.php in header.php, php dynamically loadjs.php in all other pages.Because header.php included in all pages.so, now it is not working.But if i include js.php in every page,it worked but dropdown still remain the same..getting bored of this problem.
– Ridwanur Khan
Jul 3 at 6:05





Load all the js and css on first page becuase you are not going to change the Page so you need to include everything on the default/first page.
– DsRaj
Jul 3 at 6:13





okay that's working fine but still stuck in dropdown menu
– Ridwanur Khan
Jul 3 at 7:37





Okay, what is the issue with dropdown?
– DsRaj
Jul 3 at 8:43





thanks for asking.. okay, when i click on the menu option post, toggle a drop down menu with post title.then i can choose any one and click on that,it load post page.But now the dorpdown not working and the url remain localhost/project/Template/index.php/# like that
– Ridwanur Khan
Jul 3 at 9:05






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

PHP contact form sending but not receiving emails

PHP contact form sending but not receiving emails I have created a contact form using PHP to send the data. The form seems to send fine as there are no errors and success message appears, however I am not receving the emails into the designated inbox. I am using PHPMailer as I originally tried just using the php 'mail' command which I now understand is a bit hit and miss. I cannot see why I would not be receving the emails so I would be very grateful for any help that could be given. I'm quite new to PHP so please be patient with me :) <?php use PHPMailerPHPMailerPHPMailer; use PHPMailerPHPMailerException; $msg = ""; if (isset($_POST['submit'])) { require 'phpmailer/src/Exception.php'; require 'phpmailer/src/PHPMailer.php'; require 'phpmailer/src/SMTP.php'; function sendemail ($to, $from, $body) { $mail = new PHPMailer(true); $mail->setFrom($from); $mail->addAddress($to); $ma...
Read more

Do graphics cards have individual ID by which single devices can be distinguished?

Do graphics cards have individual ID by which single devices can be distinguished? I have several graphics cards of the same manufacturer and same model and I want to distinguish them not only by the pcie socket they reside in but by some individual value I can read from the hardware. Is there such value and if so what would it be called and how could I access it? Right now I'm using modern nvidia cards (10xx series) and nvidia inspector.but I'd prefer if there was any value that was also applicable to amd. I have programming and scripting knowledge. I am running Windows 10 1 Answer 1 This is a powershell example to pull information from video cards. The DeviceID is supposed to be unique but only if the manufacturer supports Windows Display Driver Model (WDDM). (I copied this directly from docs.microsoft.com) $strComputer = "." $colItems = get-wmiobject -class "Win32_VideoC...
Read more

iOS Top Alignment constraint based on screen (superview) height

Image
iOS Top Alignment constraint based on screen (superview) height Let's say for example i want my view's top margin be 30 px for iPhone 6s and for the other screen i want to change this constants from 30 to X where X is proportional to total height of screen i.e. 36.5 for iPhone X, 33 for iPhone 6s plus, 25 for iPhone SE And so on .... I know i can take @IBOutlet of NSLayoutConstraint and change it programmatically but what i want is i want to set it like aspect ratio that we have for height width like subview's heigh width is proportional it's superview it changes with super view's height and width @IBOutlet NSLayoutConstraint 2 Answers 2 The constraint you need here is the superView's centerY set multiplier to 0.5 if you want the top anchor's constant to be 0.25 of screen height from the top , so adjust the multiplier according to this logic which is height_of_scre...
Read more