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

api-platform.com Unable to generate an IRI for the item of type

api-platform.com Unable to generate an IRI for the item of type I'm trying to setup my first api-platform instance and have run into some presumably noob questions around IDE. What i'm trying to do is setting up an register and reset entity in order to deal with registrations and password reminders from an app. And then have the entity's passed to a custom controller to do some checks, balances and mails afterwards (haven’t gotten around to that yet). But I keep running into this error when posting to my custom entities: { "@context": "/api/contexts/Error", "@type": "hydra:Error", "hydra:title": "An error occurred", "hydra:description": "Unable to generate an IRI for the item of type "AppXXXUserBundleEntityRegister"", "trace": [ { "namespace": "", "short_class": "", "c
Read more

How to set up datasource with Spring for HikariCP?

How to set up datasource with Spring for HikariCP? Hi I'm trying to use HikariCP with Spring for connection pool. I'm using jdbcTempLate and JdbcdaoSupport. This is my spring configuration file for datasource: <bean id="dataSource" class="com.zaxxer.hikari.HikariDataSource"> <property name="dataSourceClassName" value="oracle.jdbc.driver.OracleDriver"/> <property name="dataSource.url" value="jdbc:oracle:thin:@localhost:1521:XE"/> <property name="dataSource.user" value="username"/> <property name="dataSource.password" value="password"/> </bean> But unfortunately the following error message is generating: Cannot resolve reference to bean 'dataSource' while setting bean property 'dataSource'; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'dataSource'
Read more

Display dokan vendor name on Woocommerce single product pages

Display dokan vendor name on Woocommerce single product pages With woocommerce I am using Dokan plugin and I am trying to display the vendor name, rating and vendor location on single product pages. I tried this code to display vendor name but no luck: //show store name add_action( 'woocommerce_single_product_summary', 'show_store_name', 20 ); function show_store_name() { printf( '<b>Seller Name:</b> <a href="%s">%s</a>', dokan_get_store_url( $author->ID ), $store_info['store_name'] ); } Any help is appreciated. 1 Answer 1 I don't use dokan plugin. Here is the way to get the (post) author ID and to make your code work: add_action( 'woocommerce_single_product_summary', 'display_author_name', 20 ); function display_author_name() { // Get the author ID (the vendor ID) $vendor_id = get_post_field( &#
Read more