title: Ajax php page and url change on load using load() function without refreshing
body: <p>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 <code>dropdown</code> and also have <code>dropdown-toggle</code> data attribute. Somtimes my code works fine but <code>dropdown</code> and <code>dropdown-toggle</code>won't work. Can anyone give me the way to achieve this.I am just a beginner of ajax. Here is my code.</p>
  
  <p><strong>header.php</strong></p>
  
  <pre><code>        &lt;?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-&gt;select($query);
      ?&gt;
      &lt;!doctype html&gt;
      &lt;html lang="en" xmlns="http://www.w3.org/1999/html"&gt;
      &lt;head&gt;
          &lt;?php  include '../scripts/meta.php';?&gt;
          &lt;?php  include '../scripts/css.php';?&gt;
      &lt;?php include "../scripts/js.php";?&gt;
      &lt;/head&gt;
      &lt;style&gt;
          .row{
              margin:0;
          }
      &lt;/style&gt;
      &lt;body&gt;
      &lt;!-- header starts --&gt;
      &lt;header&gt;
          &lt;section id="smedia"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-xs-12 col-sm-8 navbar-left"&gt;
                          &lt;p&gt;&lt;a href="../Template/contact.php"&gt;PHONE: 01971982959&lt;/a&gt; &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-4"&gt;
                          &lt;?php
                          $slgQuery = "SELECT * FROM `tbl_social` WHERE `id`= '1'";
                          $socialMedia = $db-&gt;select($slgQuery);
                          if($socialMedia )
                          {
                          while($socialResult = $socialMedia-&gt;fetch_assoc()) {
                          ?&gt;
                          &lt;a href="&lt;?php echo $socialResult['fb']; ?&gt;" target = "_blank"&gt;&lt;i class="fa fa-facebook-official" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href="&lt;?php echo $socialResult['tw']; ?&gt;" target = "_blank"&gt;&lt;i class="fa fa-twitter" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href="&lt;?php echo $socialResult['pin']; ?&gt;" target = "_blank"&gt;&lt;i class="fa fa-pinterest-p" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href="&lt;?php echo $socialResult['gplus']; ?&gt;" target = "_blank"&gt; &lt;i class="fa fa-google-plus" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href="&lt;?php echo $socialResult['ln']; ?&gt;" target = "_blank"&gt; &lt;i class="fa fa-linkedin" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;?php
                          }
                          }
                          ?&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;!-- Navbar Starts --&gt;
          &lt;div class="row"&gt;
          &lt;nav class="navbar navbar-default"&gt;
              &lt;div class="container"&gt;
                  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="../Template/index.php"&gt;
                      &lt;?php
                      $slgQuery = "SELECT * FROM `title_slogan` WHERE `id`= '1'";
                      $getTitle = $db-&gt;select($slgQuery);
                      if($getTitle)
                      {
                          while($slgResult = $getTitle-&gt;fetch_assoc())
                          {
                      ?&gt;
                    &lt;img src="../Dashboard/admin/&lt;?php echo $slgResult['logo'];?&gt;" alt="logo" class="img-responsive"&gt;
                              &lt;?php
                          }
                      }
                      ?&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
                  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;?php
                          $path = $_SERVER['SCRIPT_FILENAME'];
                          $currentPage = basename($path,'.php');
                          ?&gt;
                          &lt;li &lt;?php if($currentPage == 'index'){echo 'class ="active"';}?&gt;&gt;&lt;a  href="../Template/index.php"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
                          &lt;li &lt;?php if($currentPage == 'Excellent'){echo 'class ="active"';}?&gt;&gt;
  
                              &lt;a   href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Post&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
                              &lt;ul class="dropdown-menu" aria-labelledby="dLabel"&gt;
                                  &lt;?php
                                  if ($post){
                                  while($result = $post-&gt;fetch_assoc())
                                  {
                                  ?&gt;
                                  &lt;li&gt;&lt;a href="../Template/Excellent.php?id=&lt;?php echo $result['id'];?&gt;"&gt;&lt;p&gt;&lt;?php echo $result['title'];?&gt;&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;?php }
                                  }else{
                                      echo "data not Found!!";
                                  }?&gt;
                              &lt;/ul&gt;
  
                          &lt;/li&gt;
                            &lt;?php
                           $aboutQuery = "select * from `tbl_page`";
                           $navigation = $db-&gt;select($aboutQuery);
                           if ($navigation)
                           {
                               while($aboutResult = $navigation-&gt;fetch_assoc())
                               {
                                   ?&gt;
  
                          &lt;li id="nav_link"
                              &lt;?php if (isset($_GET['pageid'])&amp;&amp; $_GET['pageid']== $aboutResult['id'])
                              {
                                  echo 'class ="active"';
                              }
                              ?&gt;
                          &gt; &lt;a href="../Template/page.php?pageid=&lt;?php  echo $aboutResult['id'];?&gt;"&gt;&lt;?php  echo $aboutResult['name'];?&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                                   &lt;?php
                               }
                           }
                          ?&gt;
                          &lt;li &lt;?php if($currentPage == 'contact'){echo 'class ="active"';}?&gt; &gt;&lt;a href="../Template/contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
              &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
          &lt;/nav&gt;
          &lt;/div&gt;
          &lt;!-- Navbar Ends --&gt;
      &lt;/header&gt;
      &lt;!-- header ended --&gt;
  </code></pre>
  
  <p><strong>js.php</strong></p>
  
  <pre><code> $('#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;
   });
  </code></pre>
  
  <p>Any help will be appriciate or please enlighten me.Thanks in advence</p>
  
  <p><strong>Update</strong>
  HERE IS THE UPDATE</p>
  
  <p><strong>header.php</strong></p>
  
  <pre><code>        &lt;?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-&gt;select($query);
      ?&gt;
      &lt;!doctype html&gt;
      &lt;html lang="en" xmlns="http://www.w3.org/1999/html"&gt;
      &lt;head&gt;
          &lt;?php  include '../scripts/meta.php';?&gt;
          &lt;?php  include '../scripts/css.php';?&gt;
      &lt;/head&gt;
      &lt;style&gt;
          .row{
              margin:0;
          }
      &lt;/style&gt;
      &lt;body&gt;
      &lt;!-- header starts --&gt;
      &lt;header&gt;
          &lt;section id="smedia"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-xs-12 col-sm-8 navbar-left"&gt;
                          &lt;p&gt;&lt;a href="../Template/contact.php"&gt;PHONE: 01971982959&lt;/a&gt; &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-4"&gt;
                          &lt;?php
                          $slgQuery = "SELECT * FROM `tbl_social` WHERE `id`= '1'";
                          $socialMedia = $db-&gt;select($slgQuery);
                          if($socialMedia )
                          {
                          while($socialResult = $socialMedia-&gt;fetch_assoc()) {
                          ?&gt;
                          &lt;a href="&lt;?php echo $socialResult['fb']; ?&gt;" target = "_blank"&gt;&lt;i class="fa fa-facebook-official" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href="&lt;?php echo $socialResult['tw']; ?&gt;" target = "_blank"&gt;&lt;i class="fa fa-twitter" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href="&lt;?php echo $socialResult['pin']; ?&gt;" target = "_blank"&gt;&lt;i class="fa fa-pinterest-p" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href="&lt;?php echo $socialResult['gplus']; ?&gt;" target = "_blank"&gt; &lt;i class="fa fa-google-plus" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href="&lt;?php echo $socialResult['ln']; ?&gt;" target = "_blank"&gt; &lt;i class="fa fa-linkedin" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;?php
                          }
                          }
                          ?&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;!-- Navbar Starts --&gt;
          &lt;div class="row"&gt;
          &lt;nav class="navbar navbar-default"&gt;
              &lt;div class="container"&gt;
                  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="../Template/index.php"&gt;
                      &lt;?php
                      $slgQuery = "SELECT * FROM `title_slogan` WHERE `id`= '1'";
                      $getTitle = $db-&gt;select($slgQuery);
                      if($getTitle)
                      {
                          while($slgResult = $getTitle-&gt;fetch_assoc())
                          {
                      ?&gt;
                    &lt;img src="../Dashboard/admin/&lt;?php echo $slgResult['logo'];?&gt;" alt="logo" class="img-responsive"&gt;
                              &lt;?php
                          }
                      }
                      ?&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
                  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                      &lt;ul class="nav navbar-nav navbar-right nav_link"&gt;
                          &lt;?php
                          $path = $_SERVER['SCRIPT_FILENAME'];
                          $currentPage = basename($path,'.php');
                          ?&gt;
                          &lt;li &lt;?php if($currentPage == 'index'){echo 'class ="active"';}?&gt;&gt;&lt;a  href="../Template/index.php"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
                          &lt;li &lt;?php if($currentPage == 'Excellent'){echo 'class ="active"';}?&gt;&gt;
  
                              &lt;a  href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Post&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu nav_link"  aria-labelledby="dLabel"&gt;
                                  &lt;?php
                                  if ($post){
                                  while($result = $post-&gt;fetch_assoc())
                                  {
                                  ?&gt;
                                  &lt;li&gt;&lt;a href="../Template/Excellent.php?id=&lt;?php echo $result['id'];?&gt;"&gt;&lt;p&gt;&lt;?php echo $result['title'];?&gt;&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;?php }
                                  }else{
                                      echo "data not Found!!";
                                  }?&gt;
                              &lt;/ul&gt;
  
                          &lt;/li&gt;
                            &lt;?php
                           $aboutQuery = "select * from `tbl_page`";
                           $navigation = $db-&gt;select($aboutQuery);
                           if ($navigation)
                           {
                               while($aboutResult = $navigation-&gt;fetch_assoc())
                               {
                                   ?&gt;
  
                          &lt;li
                              &lt;?php if (isset($_GET['pageid'])&amp;&amp; $_GET['pageid']== $aboutResult['id'])
                              {
                                  echo 'class ="active"';
                              }
                              ?&gt;
                          &gt; &lt;a href="../Template/page.php?pageid=&lt;?php  echo $aboutResult['id'];?&gt;"&gt;&lt;?php  echo $aboutResult['name'];?&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                                   &lt;?php
                               }
                           }
                          ?&gt;
                          &lt;li &lt;?php if($currentPage == 'contact'){echo 'class ="active"';}?&gt; &gt;&lt;a href="../Template/contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
              &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
          &lt;/nav&gt;
          &lt;/div&gt;
          &lt;!-- Navbar Ends --&gt;
      &lt;/header&gt;
      &lt;!-- header ended --&gt;
  </code></pre>
  
  <p><strong>js.php</strong></p>
  
  <pre><code>   $('.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;
   });
  </code></pre>