Insert Tree View Node using PHP Ajax

One of our previous post on Make Treeview from Mysql data by using Bootstrap Treeview plugin with PHP and Ajax and that post has received huge response from readers and request us to make this type of Dynamic Treeview in which we can add or create new node dynamically and make dynamic treeview hierarchical stucture using same Bootstrap plugin using PHP and Ajax. So, in this post we have add this topic in which you can learn how can we add or insert new node dynamically in Treeview using PHP Mysql Ajax and Boostrap Treeview plugin. By using this tutorial user can create multi level treeview node dynamically.

Bootstrap Tree view is a easy solution for display of hierarchical tree structures in the form of Tree View node and by using this plugin we can create multi level tree view nodes static or dynamically. For use this plugin we have to required jQuery library and Bootstrap library with this plugin library. This plugin has been initialize by using treeview() method and in this method data option is required, without data it will not display Tree view on web page. So, for initialize this plugin data is required in json format. Data must be in below format.

[  
    {  
        "text":"Chemicals",
        "nodes":[  
            {  
                "text":"Inorganic chemicals",
                "nodes":[  

                ]
            },
            {  
                "text":"Organic Chemicals",
                "nodes":[  

                ]
            }
        ]
    },
    {  
        "text":"Electronics",
        "nodes":[  
            {  
                "text":"Laptop",
                "nodes":[  
                    {  
                        "text":"Dell",
                        "nodes":[  
                            {  
                                "text":"i3 Processor",
                                "nodes":[  

                                ]
                            },
                            {  
                                "text":"i5 Processors",
                                "nodes":[  

                                ]
                            },
                            {  
                                "text":"i7 Processors",
                                "nodes":[  

                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

If data in above format then it will display above data in treeview form on web page. In this post we have take an example of category and display that category data in Treeview format. For create new node first we have make simple form for enter data into mysql table. Once data has been inserted into Mysql table then it will be added into parent category select box also. After insert of new data we want to add new not in Treeview. For this we have make one fill_treeview() function, this function has been fetch data from mysql table in JSON format and convert into treeview stucture using treeview() function. Below you can find complete source code of this tutorial which helps you to know how to add or create new node in Tree view with Bootstrap Tree view plugin using PHP Mysql and Ajax.

View Demo

Read Also

• Make Treeview using Bootstrap Treeview Ajax JQuery with PHP
• Sorting Table Row using Jquery Drag Drop with Ajax PHP
• Make Dynamic XML sitemap in PHP Script

Source Code

--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_category`
--

CREATE TABLE `tbl_category` (
  `category_id` int(11) NOT NULL,
  `category_name` varchar(200) NOT NULL,
  `parent_category_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_category`
--

INSERT INTO `tbl_category` (`category_id`, `category_name`, `parent_category_id`) VALUES
(2, 'Chemicals', 0),
(3, 'Inorganic chemicals', 2),
(4, 'Organic Chemicals', 2),
(5, 'Electronics', 0),
(6, 'Laptop', 5),
(7, 'Dell', 6),
(8, 'i3 Processor', 7),
(9, 'i5 Processors', 7),
(10, 'i7 Processors', 7);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_category`
--
ALTER TABLE `tbl_category`
  ADD PRIMARY KEY (`category_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_category`
--
ALTER TABLE `tbl_category`
  MODIFY `category_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;

index.php

<!DOCTYPE html>
<html>
 <head>
  <title>How to Add New Node in Dynamic Treeview using PHP Mysql 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 type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" />
  <style>
  </style>
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:900px;">
   <h2 align="center">How to Add New Node in Dynamic Treeview using PHP Mysql Ajax</h2>
   <br /><br />
   <div class="row">
    <div class="col-md-6">
     <h3 align="center"><u>Add New Category</u></h3>
     <br />
     <form method="post" id="treeview_form">
      <div class="form-group">
       <label>Select Parent Category</label>
       <select name="parent_category" id="parent_category" class="form-control">
       
       </select>
      </div>
      <div class="form-group">
       <label>Enter Category Name</label>
       <input type="text" name="category_name" id="category_name" class="form-control">
      </div>
      <div class="form-group">
       <input type="submit" name="action" id="action" value="Add" class="btn btn-info" />
      </div>
     </form>
    </div>
    <div class="col-md-6">
     <h3 align="center"><u>Category Tree</u></h3>
     <br />
     <div id="treeview"></div>
    </div>
   </div>
  </div>
 </body>
</html>
<script>
 $(document).ready(function(){

  fill_parent_category();

  fill_treeview();
  
  function fill_treeview()
  {
   $.ajax({
    url:"fetch.php",
    dataType:"json",
    success:function(data){
     $('#treeview').treeview({
      data:data
     });
    }
   })
  }

  function fill_parent_category()
  {
   $.ajax({
    url:'fill_parent_category.php',
    success:function(data){
     $('#parent_category').html(data);
    }
   });
   
  }

  $('#treeview_form').on('submit', function(event){
   event.preventDefault();
   $.ajax({
    url:"add.php",
    method:"POST",
    data:$(this).serialize(),
    success:function(data){
     fill_treeview();
     fill_parent_category();
     $('#treeview_form')[0].reset();
     alert(data);
    }
   })
  });
 });
</script>

database_connection.php

<?php

//database_connection.php

$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");

?>

fill_parent_category.php

<?php

//fill_parent_category.php

include('database_connection.php');

$query = "SELECT * FROM tbl_category ORDER BY category_name ASC";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

$output = '<option value="0">Parent Category</option>';

foreach($result as $row)
{
 $output .= '<option value="'.$row["category_id"].'">'.$row["category_name"].'</option>';
}

echo $output;

?>

add.php

<?php

//add.php

include('database_connection.php');

$data = array(
 ':category_name'  => $_POST['category_name'],
 ':parent_category_id' => $_POST['parent_category']
);

$query = "
 INSERT INTO tbl_category (category_name, parent_category_id) VALUES (:category_name, :parent_category_id)
";

$statement = $connect->prepare($query);

if($statement->execute($data))
{
 echo 'Category Added';
}


?>

fetch.php

<?php

//fetch.php

include('database_connection.php');

$parent_category_id = 0;

$query = "SELECT * FROM tbl_category";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

foreach($result as $row)
{
 $data = get_node_data($parent_category_id, $connect);
}

echo json_encode(array_values($data));

function get_node_data($parent_category_id, $connect)
{
 $query = "SELECT * FROM tbl_category WHERE parent_category_id = '".$parent_category_id."'";

 $statement = $connect->prepare($query);
 $statement->execute();
 $result = $statement->fetchAll();
 $output = array();
 foreach($result as $row)
 {
  $sub_array = array();
  $sub_array['text'] = $row['category_name'];
  $sub_array['nodes'] = array_values(get_node_data($row['category_id'], $connect));
  $output[] = $sub_array;
 }
 return $output;
}

?>