JQuery Ajax Dynamic Treeview using PHP MySQL Example

Today, We want to share with you JQuery Ajax Dynamic Treeview using PHP MySQL Example.In this post we will show you Dynamic Tree with JSTree, PHP and MySQL, hear for Dynamic Treeview Menu using PHP, MySQL and AJAX Example we will give you demo and example for implement.In this post, we will learn about Create Dynamic Treeview Example using JQuery Ajax in PHP MySQL with an example.

JQuery Ajax Dynamic Treeview using PHP MySQL Example

There are the Following The simple About JQuery Ajax Dynamic Treeview using PHP MySQL Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop Dynamic Treeview with jQuery & Laravel PHP Example, so the some major files and Directory structures for this example is following below.

  • index.php
  • database_conn.php
  • calldo_ajax.php

Step 1: Create member table

member table:

simple mysql Run This Query and save Database structures.

CREATE TABLE IF NOT EXISTS `member` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `parent_id` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2

Step 2: Create index.php File

This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.php.

index.php

<!DOCTYPE html>
<html>
<head>
  <title>Create Dynamic Treeview Example with PHP MySQL - Pakainfo.com</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" />
  <script type="text/javascript" charset="utf8" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" charset="utf8" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
</head>
<body>
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h1>Create Dynamic Treeview Example with PHP MySQL - pakainfo.com</h1>
    </div>
    <div class="panel-body">
      <div class="col-md-8" id="live_tree_json_view">
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
   var liveMemberData;
   $.ajax({
        type: "GET",
        url: "/calldo_ajax.php",
        dataType: "json",
        success: function(response)
        {
          initTree(response)
        }
  });
  function initTree(liveMemberData) {
    $('#live_tree_json_view').treeview({data: liveMemberData});
  }
});
</script>
</body>
</html>

Step 3: Create AJAX and Config File

database_conn.php

<?php
    $hostName = "localhost";
    $username = "atmiys";
    $password = "jdaits";
    $dbname = "customtree";
    $mysqli = new mysqli($hostName, $username, $password, $dbname);
?>

calldo_ajax.php
<?php
    require 'database_conn.php';
    $masterKey = '0';
    $sql = "SELECT * FROM member";
    $response = $mysqli->query($sql);
      if(mysqli_num_rows($response) > 0)
      {
          $data = membersTree($masterKey);
      }else{
          $data=["id"=>"0","name"=>"No Members available in member list","text"=>"No Members is available in member list","nodes"=>[]];
      }
      function membersTree($masterKey)
      {
          require 'database_conn.php';
          $sql = 'SELECT id, name from member WHERE parent_id="'.$masterKey.'"';
          $response = $mysqli->query($sql);
          while($value = mysqli_fetch_assoc($response)){
             $id = $value['id'];
             $dataRow[$id]['id'] = $value['id'];
             $dataRow[$id]['name'] = $value['name'];
             $dataRow[$id]['text'] = $value['name'];
             $dataRow[$id]['nodes'] = array_values(membersTree($value['id']));
          }
          return $dataRow;
      }
      echo json_encode(array_values($data));
?>

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about JQuery Ajax Dynamic Treeview using PHP MySQL Example.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   PHP MySQL Database Connectivity Examples
  2.   How to Create html to pdf using php | Convert HTML to PDF using PHP
  3.   Stripe API Webhook upgrade and downgrade Subscriptions
  4.   Vue js Multiple Tag Input with Dynamic Autocomplete
  5.   how to clear cache in laravel 5/6/7?
  6.   Ajax Autocomplete Live Search Suggestion using PHP MySQL
  7.   Laravel 6 tree view Plugins using jQuery Example
  8.   5 Star Product Rating Review Widget in CSS
  9.   Difference between break and continue
  10.   PHP Autocomplete Input tags with Dynamic Data using jquery Ajax