Tuesday 7 March 2017

Dynamic Menu with Dynamic content in PHP using Jquery Ajax



In this post you can find out how to make dynamic menu in PHP and How to load dynamic content into this menu by using Ajax JQuery with PHP. Initializing of web page with dynamic content get from database is a very simple task if you have use Jquery with Ajax. We have already seen many web tutorial on fetch dynamic data fetch from database by using Ajax Jquery on different event.

In this tutorial first we will make dynamic menu from mysql table by using simple PHP Script. For making Dynamic menu we have use Bootstrap Framework navigation bar code. By using Bootstrap Navigation Bar we will make simple menu at header of the page. And after this we will modify code and put PHP script for making dynamic menu. While making of menu we will add one id tag in html list tag and in this tag value we will store dynamic page id which are fetch from table. We will use value of this id in Jquery code for fetching particular page details from Database by using Ajax.

In Jquery code we have make one function. That function will fetch particular page details from database based on page id. When ever this function will called it will fetch page details from database and display on web page. After making of function, we have write jquery code on .nav class of Bootstrap Navigation Bar with list tag. So when ever we have click on menu it will fetch id from list tag. In id we have store the value of page id. After getting value of page id we have called function which fetch particular page data from database. But now this function will received dynamic page id when we have click on any menu item. So this way on every click on menu it load particular page details on web page. So this is our simple web tutorial on Make Dynamic menu in PHP and Load Dynamic content by using Ajax JQuery.






Source Code


index.php

 
  <?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM pages";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | Dynamic Menu with Dynamic content in PHP using Jquery Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center">Dynamic Menu with Dynamic content in PHP using Jquery Ajax</h2>
   <br />
   <nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
           <a class="navbar-brand" href="#">Webslesson Tutorial</a>
        </div>
        <ul class="nav navbar-nav">
      <?php
      while($row = mysqli_fetch_array($result))
      {
       echo '
       <li id="'.$row["page_id"].'"><a href="#">'.$row["page_title"].'</a></li>
       ';
      }
      ?>
        </ul>
     </div>
   </nav>
   <br />
   <span id="page_details"></span>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 
 function load_page_details(id)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{id:id},
   success:function(data)
   {
    $('#page_details').html(data);
   }
  });
 }

 load_page_details(1);

 $('.nav li').click(function(){
  var page_id = $(this).attr("id");
  load_page_details(page_id);
 });
 
 
});
</script>
 

fetch.php


 
  <?php 
//fetch.php
if(isset($_POST["id"]))
{
 $connect = mysqli_connect("localhost", "root", "", "testing");
 $query = "SELECT * FROM pages WHERE page_id = '".$_POST["id"]."'";
 $result = mysqli_query($connect, $query);
 $output = '';
 while($row = mysqli_fetch_array($result))
 {
  $output .= '
  <h1>'.$row["page_title"].'</h1>
  <p>'.$row["page_description"].'</p>
  ';
 }
 echo $output;
}


?>
 

6 comments:

  1. To me, all your works are awesome and great. But it is to difficult for me as a new comer to follow. I mean, I don't have the idea where the starting point is to learn PHP, MySQL, Ajax and jQuery.

    I have been looking tutorials in this kind which start from beginner, intermeadiate, and advance.

    If you could make it, people like me will appreciate it very much.

    Nyoman, Bali, Indonesia

    ReplyDelete
  2. think u very much it s very well

    ReplyDelete
  3. Hi can you do the same thing with bootstrap nav's (not nav bar)?

    ReplyDelete
  4. hi it is so intersting, but i want to ask you can i do when the content is also dynamique and from database

    ReplyDelete
  5. Very useful simple code and so good thanks to provide code.

    ReplyDelete