Tuesday, 16 May 2017

JSON - Dynamic Dependent Select Box using Jquery and Ajax



How to make dynamic dependent dropdown list by using Jquery Ajax and JSON. Using of dependent select box will be a require functionality if there is a dependency between options of the select box fields. Dependent dropdown list box when we have select in parent select box then it will allowed to refresh child select box data without refresh of web page. In this post we have JSON file to store data for fill parent and child select box and in that file we have give relationship between Parent data with Child. We will use Ajax Jquery for fetch data from JSON file and filled parent select box. This is a very simple Ajax JQuery code hope you like this.

The dynamic dependent dropdown list box is most required for Country State and City select box. So in this post we have made relational select box of Country State City by using JQuery Ajax with JSON array data file. Here first we will filled Parent select box of with Country list fetch from JSON file by using Ajax with JQuery. And here State dependent dynamic select box data has been filled based on selection of parent Country select box. And Same way City dynamic dependent select box data has been filled based on selection of it's parent State drop down list box. That means State data has been related with selection of Country and list of City data has been related with selection of state. So here when we have select any country from select box then here it will fetch state data which are related with particular country and same way when we have select any state from select box then it will fetch city data which are related with particular state by using Ajax JQuery without refresh of web page.

In one of our previous web tutorial we have already made dynamic dependent select box by using JQuery Ajax with PHP and Mysql. But here we have do something different here we have fetch data from JSON file by JQuery Ajax and here we have not make any PHP sever side script for fetch data from Mysql database but we have use JSON File and in that we have store country state city data with state data related with country and city data has been related with state. So here we have make simple light weight dynamic dependent dropdown list box because here we have perform all operation at client side not perform any server script for fetch data from Database. So if you have developed any website and in that you have to require any dynamic dependent select box then you can choose this type JSON with Ajax JQuery instead of using PHP Mysql with Aajx JQuery.

So lastly this is our simple web tutorial on How to make dynamic dependent select by using JSON with Ajax Jquery. I hope you have enjoy this post. Please keep visit out website for Accessing Web tutorial with Source Code and online demo.







Source Code



<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | JSON - Dynamic Dependent Dropdown List using Jquery and 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" style="width:600px;">
   <h2 align="center">JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</h2><br /><br />
   <select name="country" id="country" class="form-control input-lg">
    <option value="">Select country</option>
   </select>
   <br />
   <select name="state" id="state" class="form-control input-lg">
    <option value="">Select state</option>
   </select>
   <br />
   <select name="city" id="city" class="form-control input-lg">
    <option value="">Select city</option>
   </select>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){

 load_json_data('country');

 function load_json_data(id, parent_id)
 {
  var html_code = '';
  $.getJSON('country_state_city.json', function(data){

   html_code += '<option value="">Select '+id+'</option>';
   $.each(data, function(key, value){
    if(id == 'country')
    {
     if(value.parent_id == '0')
     {
      html_code += '<option value="'+value.id+'">'+value.name+'</option>';
     }
    }
    else
    {
     if(value.parent_id == parent_id)
     {
      html_code += '<option value="'+value.id+'">'+value.name+'</option>';
     }
    }
   });
   $('#'+id).html(html_code);
  });

 }

 $(document).on('change', '#country', function(){
  var country_id = $(this).val();
  if(country_id != '')
  {
   load_json_data('state', country_id);
  }
  else
  {
   $('#state').html('<option value="">Select state</option>');
   $('#city').html('<option value="">Select city</option>');
  }
 });
 $(document).on('change', '#state', function(){
  var state_id = $(this).val();
  if(state_id != '')
  {
   load_json_data('city', state_id);
  }
  else
  {
   $('#city').html('<option value="">Select city</option>');
  }
 });
});
</script>


country_state_city.json



[
 {
  "id":"1",
  "name":"USA",
  "parent_id":"0"
 }, 
 {
  "id":"2",
  "name":"Canada",
  "parent_id":"0"
 }, 
 {
  "id":"3",
  "name":"Australia",
  "parent_id":"0"
 }, 
 {
  "id":"4",
  "name":"New York",
  "parent_id":"1"
 }, 
 {
  "id":"5",
  "name":"Alabama",
  "parent_id":"1"
 }, 
 {
  "id":"6",
  "name":"California",
  "parent_id":"1"
 }, 
 {
  "id":"7",
  "name":"Ontario",
  "parent_id":"2"
 }, 
 {
  "id":"8",
  "name":"British Columbia",
  "parent_id":"2"
 }, 
 {
  "id":"9",
  "name":"New South Wales",
  "parent_id":"3"
 }, 
 {
  "id":"10",
  "name":"Queensland",
  "parent_id":"3"
 }, 
 {
  "id":"11",
  "name":"New York city",
  "parent_id":"4"
 }, 
 {
  "id":"12",
  "name":"Buffalo",
  "parent_id":"4"
 }, 
 {
  "id":"13",
  "name":"Albany",
  "parent_id":"4"
 }, 
 {
  "id":"14",
  "name":"Birmingham",
  "parent_id":"5"
 }, 
 {
  "id":"15",
  "name":"Montgomery",
  "parent_id":"5"
 }, 
 {
  "id":"16",
  "name":"Huntsville",
  "parent_id":"5"
 }, 
 {
  "id":"17",
  "name":"Los Angeles",
  "parent_id":"6"
 }, 
 {
  "id":"18",
  "name":"San Francisco",
  "parent_id":"6"
 }, 
 {
  "id":"19",
  "name":"San Diego",
  "parent_id":"6"
 }, 
 {
  "id":"20",
  "name":"Toronto",
  "parent_id":"7"
 }, 
 {
  "id":"21",
  "name":"Ottawa",
  "parent_id":"7"
 }, 
 {
  "id":"22",
  "name":"Vancouver",
  "parent_id":"8"
 }, 
 {
  "id":"23",
  "name":"Victoria",
  "parent_id":"8"
 }, 
 {
  "id":"24",
  "name":"Sydney",
  "parent_id":"9"
 }, 
 {
  "id":"25",
  "name":"Newcastle",
  "parent_id":"9"
 }, 
 {
  "id":"26",
  "name":"City of Brisbane",
  "parent_id":"10"
 }, 
 {
  "id":"27",
  "name":"Gold Coast",
  "parent_id":"10"
 }
]


Saturday, 13 May 2017

Live Table Data Edit Delete using Tabledit Plugin in PHP



In this blog We have discussion on one more Jquery Table plugin like Tabledit. We will learn how to live table data edit or update, delete or remove and restore by using Jquery Tabledit plugin with PHP script and Mysql database. In one of the previous post we have seen X-editable JQuery plugin for perform operation like update of table data live with PHP and Mysql. The use of this plugin same functionality like update of table data live without refresh of web page.

In this plugin there is some advance feature like delete or remove of table data, with this plugin we can also perform restore of data operation also. By using this plugin we can make table as simple inline editor that means we can edit table data without opening of other window but can edit table on same position. This plugin is easily integrate with Bootstrap framework, so If we have use Bootstrap framework for web development then we do not want to write any style sheet code for table, button etc. If you have use this plugin in your web application then do want to write any code for update, delete or restore button, but this plugin has made button code when we have called this plugin.

If you have developed any single page crud application then in that application you can use this plugin for update or delete data server side operation by using this plugin. This plugin has use Ajax request so you can perform all operation without refresh of web page. If you want to use this plugin application then you should have table, because this plugin has been called on table tag, on other tag this plugin has not been worked. So if you have table then in jquery code you have Tabledit() method for called this plugin. Under this method there are many options available, but url and columns options is required. In url option you can define server script file in which you can write update or delete data operation and columns option there two other option like identifier and editable. In identifier option we can define table cell number in which we have store id of table primary key data and in editable option we can define in which table cell you want to activate editable column. In this option we can define table cell number and table column name we want to define for activate editable column. There are many option are available here for read complete documentation, example and download plugin.






Source Code


index.php



<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_user ORDER BY id DESC";
$result = mysqli_query($connect, $query);
?>
<html>  
 <head>  
          <title>Live Table Data Edit Delete using Tabledit Plugin in PHP</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.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.6/js/bootstrap.min.js"></script>            
    <script src="jquery.tabledit.min.js"></script>
    </head>  
    <body>  
  <div class="container">  
   <br />  
   <br />  
   <br />  
            <div class="table-responsive">  
    <h3 align="center">Live Table Data Edit Delete using Tabledit Plugin in PHP</h3><br />  
    <table id="editable_table" class="table table-bordered table-striped">
     <thead>
      <tr>
       <th>ID</th>
       <th>First Name</th>
       <th>Last Name</th>
      </tr>
     </thead>
     <tbody>
     <?php
     while($row = mysqli_fetch_array($result))
     {
      echo '
      <tr>
       <td>'.$row["id"].'</td>
       <td>'.$row["first_name"].'</td>
       <td>'.$row["last_name"].'</td>
      </tr>
      ';
     }
     ?>
     </tbody>
    </table>
   </div>  
  </div>  
 </body>  
</html>  
<script>  
$(document).ready(function(){  
     $('#editable_table').Tabledit({
      url:'action.php',
      columns:{
       identifier:[0, "id"],
       editable:[[1, 'first_name'], [2, 'last_name']]
      },
      restoreButton:false,
      onSuccess:function(data, textStatus, jqXHR)
      {
       if(data.action == 'delete')
       {
        $('#'+data.id).remove();
       }
      }
     });
 
});  
 </script>


action.php



<?php  
//action.php
$connect = mysqli_connect('localhost', 'root', '', 'testing');

$input = filter_input_array(INPUT_POST);

$first_name = mysqli_real_escape_string($connect, $input["first_name"]);
$last_name = mysqli_real_escape_string($connect, $input["last_name"]);

if($input["action"] === 'edit')
{
 $query = "
 UPDATE tbl_user 
 SET first_name = '".$first_name."', 
 last_name = '".$last_name."' 
 WHERE id = '".$input["id"]."'
 ";

 mysqli_query($connect, $query);

}
if($input["action"] === 'delete')
{
 $query = "
 DELETE FROM tbl_user 
 WHERE id = '".$input["id"]."'
 ";
 mysqli_query($connect, $query);
}

echo json_encode($input);

?>


Database



--
-- Database: `testing`
--

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

--
-- Table structure for table `tbl_user`
--

CREATE TABLE IF NOT EXISTS `tbl_user` (
  `id` int(11) NOT NULL,
  `first_name` varchar(250) NOT NULL,
  `last_name` varchar(250) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_user`
--

INSERT INTO `tbl_user` (`id`, `first_name`, `last_name`) VALUES
(2, 'John', 'Smith'),
(3, 'Carol', 'Ferrari'),
(4, 'Darrell', 'Mitten'),
(5, 'Elizbeth', 'Noyes'),
(6, 'Edna', 'William'),
(7, 'Roy', 'Hise'),
(8, 'Sheila', 'Aguinaldo'),
(9, 'Peter', 'Goad'),
(10, 'Kenneth', 'Simons'),
(11, 'Dona', 'Huber'),
(12, 'William', 'Soliz'),
(13, 'Nelson', 'Dismuke'),
(14, 'Sarah', 'Thomas');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_user`
--
ALTER TABLE `tbl_user`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_user`
--
ALTER TABLE `tbl_user`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=17;

Wednesday, 10 May 2017

Make Treeview using Bootstrap Treeview Ajax JQuery with PHP



If you are looking for tutorial on how to create dynamic treeview in PHP, then in this post you can find something like that. This post has been cover topic like How to make dynamic treeview by using Bootstrap Treeview plugin with Ajax Jquery in PHP. This post will help you to create stylish treeview menu in PHP by using Bootstrap Treeview plugin. By using this plugin we can create simple and beautiful hierarchical dynamic treeview structure in our PHP script with Ajax JQuery and with Bootstrap.

If you want to create treeview in your web application then you should use this Bootstrap Treeview plugin for display menu in hierarchical treeview structures. This plugin can easily integrate withing Bootstrap 3. For use this plugin first we want to make Data structure in JSON format according this requirement of this plugin. So For make dynamic treeview, first in PHP we want to fetch data from database and then after store data into PHP Array and after using reference array we make PHP array according to Data structure requirement of Bootstrap Treeview plugin. After make PHP Array Data Structure according to requirement of Plugin now we want to convert into JSON by using json_encode() function. After converting into JSON string we have send this data to Ajax request success callback function. And under this function we have called Bootstrap Treeview plugin by treeview() method. By using this method we can called Bootstrap Plugin for make Hierarchical Treeview. Under this method we have write data option in this option we can define data which we have received from server. This data is nothing by Array of object and this plugin will display that data on web page in Treeview format.

So this way we can make simple dynamic treeview for our web application by using Bootstrap Treeview plugin in PHP Script with Ajax JQuery. If you have work on any large data driven enterprise level application and in that application there is large amount of different menu. Then at that time you have one question how to manage all menu in one application. So at that time you can display your menu in hierarchical treeview format in which you can store all menu under sub menu etc. e.g. In your project you have use category and sub category, so you can display category sub category under Treeview format.

So this is our simple web tutorial on How to create Dynamic Treeview in PHP by using Bootstrap Treeview plugin with Ajax JQuery. I hope you have find something new this tutorial and you have learn something new from this tutorial. So, please keep visit our website.





Source Code


index.php



<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | Make Treeview using Bootstrap Treeview Ajax JQuery with PHP</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">Make Treeview using Bootstrap Treeview Ajax JQuery with PHP</h2>
   <br /><br />
   <div id="treeview"></div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $.ajax({ 
   url: "fetch.php",
   method:"POST",
   dataType: "json",       
   success: function(data)  
   {
  $('#treeview').treeview({data: data});
   }   
 });
 
});
</script>


fetch.php



<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "testing1");
$query = "
 SELECT * FROM country_state_city
";
$result = mysqli_query($connect, $query);
//$output = array();
while($row = mysqli_fetch_array($result))
{
 $sub_data["id"] = $row["id"];
 $sub_data["name"] = $row["name"];
 $sub_data["text"] = $row["name"];
 $sub_data["parent_id"] = $row["parent_id"];
 $data[] = $sub_data;
}
foreach($data as $key => &$value)
{
 $output[$value["id"]] = &$value;
}
foreach($data as $key => &$value)
{
 if($value["parent_id"] && isset($output[$value["parent_id"]]))
 {
  $output[$value["parent_id"]]["nodes"][] = &$value;
 }
}
foreach($data as $key => &$value)
{
 if($value["parent_id"] && isset($output[$value["parent_id"]]))
 {
  unset($data[$key]);
 }
}
echo json_encode($data);
/*echo '<pre>';
print_r($data);
echo '</pre>';*/

?>


Database



--
-- Database: `testing1`
--

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

--
-- Table structure for table `country_state_city`
--

CREATE TABLE IF NOT EXISTS `country_state_city` (
  `id` int(11) NOT NULL,
  `name` varchar(250) NOT NULL,
  `parent_id` int(11) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=latin1;

--
-- Dumping data for table `country_state_city`
--

INSERT INTO `country_state_city` (`id`, `name`, `parent_id`) VALUES
(1, 'USA', 0),
(2, 'Canada', 0),
(3, 'Australia', 0),
(4, 'New York', 1),
(5, 'Alabama', 1),
(6, 'California', 1),
(7, 'Ontario', 2),
(8, 'British Columbia', 2),
(9, 'New South Wales', 3),
(10, 'Queensland', 3),
(11, 'New York city', 4),
(12, 'Buffalo', 4),
(13, 'Albany', 4),
(14, 'Birmingham', 5),
(15, 'Montgomery', 5),
(16, 'Huntsville', 5),
(17, 'Los Angeles', 6),
(18, 'San Francisco', 6),
(19, 'San Diego', 6),
(20, 'Toronto', 7),
(21, 'Ottawa', 7),
(22, 'Vancouver', 8),
(23, 'Victoria', 8),
(24, 'Sydney', 9),
(25, 'Newcastle', 9),
(26, 'City of Brisbane', 10),
(27, 'Gold Coast', 10);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `country_state_city`
--
ALTER TABLE `country_state_city`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `country_state_city`
--
ALTER TABLE `country_state_city`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=28;

Saturday, 6 May 2017

Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP



In this post we are going to discuss how to create multiple select dropdown listbox with checkbox select option by using Bootstrap Multiselect plugin. In one of the previous post we have already made discussion on multiple select dropdown list by using Bootstrap plugin, but in that plugin there is no functionality of checkbox option select. If you have use this plugin for make multiple select dropdown list then for select multiple option there is checkbox, so by check checkbox we can select multiple option from dropdown list box.

In this post we will discuss how to use this Bootstrap Multiselect plugin for make multiple select option with checkbox in dropdown list box. So we will make simple application in PHP for inserting the value of this multiple selected option so we can understand how to use this type of multiple select option with PHP for make real type of web application.

For called this plugin we have use multiselect() method, by using this method we can called this plugin in jquery. In this method there is many option are available to make multi select checkbox option dropdown as per our requirement. For example suppose you want to enable search filter into your dropbox then you have to add enableFiltering option into your method with true. So this plugin will search textbox into your dropdown listbox. So you can easily search your option by writing query into textbox.

If you have developed any web application and in which you want to required user can select multiple option from dropdown, so if you have use simple select box with multiple attribute, then user can select multiple option, but your form user interface will not be attractive and user will face problem to select multiple option. But suppose you have use this plugin then user can easily understand regarding he can select multiple option from list of option. Here we will seen simple example with this type of multi select dropdown list box. We will insert value of multi select dropdown by using Ajax JQuery with PHP.





Source Code


index.php



<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.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.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:600px;">
   <h2 align="center">Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP</h2>
   <br /><br />
   <form method="post" id="framework_form">
    <div class="form-group">
     <label>Select which Framework you have knowledge</label>
     <select id="framework" name="framework[]" multiple class="form-control" >
      <option value="Codeigniter">Codeigniter</option>
      <option value="CakePHP">CakePHP</option>
      <option value="Laravel">Laravel</option>
      <option value="YII">YII</option>
      <option value="Zend">Zend</option>
      <option value="Symfony">Symfony</option>
      <option value="Phalcon">Phalcon</option>
      <option value="Slim">Slim</option>
     </select>
    </div>
    <div class="form-group">
     <input type="submit" class="btn btn-info" name="submit" value="Submit" />
    </div>
   </form>
   <br />
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $('#framework').multiselect({
  nonSelectedText: 'Select Framework',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth:'400px'
 });
 
 $('#framework_form').on('submit', function(event){
  event.preventDefault();
  var form_data = $(this).serialize();
  $.ajax({
   url:"insert.php",
   method:"POST",
   data:form_data,
   success:function(data)
   {
    $('#framework option:selected').each(function(){
     $(this).prop('selected', false);
    });
    $('#framework').multiselect('refresh');
    alert(data);
   }
  });
 });
 
 
});
</script>


insert.php



<?php 
//insert.php
$connect = mysqli_connect("localhost", "root", "", "testing");
if(isset($_POST["framework"]))
{
 $framework = '';
 foreach($_POST["framework"] as $row)
 {
  $framework .= $row . ', ';
 }
 $framework = substr($framework, 0, -2);
 $query = "INSERT INTO like_table(framework) VALUES('".$framework."')";
 if(mysqli_query($connect, $query))
 {
  echo 'Data Inserted';
 }
}
?>

Thursday, 4 May 2017

Facebook Style Popup Notification using PHP Ajax Bootstrap



This is one more post on Facebook style notification and in this post we have make simple Facebook type Footer Pop up notification by using PHP script with Ajax Jquery method and Bootstrap framework. In one of the previous post we have already made discussion on How to make Facebook style header notification by using PHP code with Bootstrap Ajax and JQuery. In that post we have display notification alert on page header pop up number and after click on notification menu we can seen list of notification. But in this post if any event has made done then we will pop up notification on left bottom side of page and after some time of interval notification alert message will be disappear from web page.

This is the second part of Facebook style notification alert by using PHP language with Ajax Jquery and Bootstrap. This type of feature we have seen in Facebook, if you have familiar with Facebook, then in that if you have share any link or image and some one has like or share your post or image then you have seen pop up notification with message on web page left bottom side and after some time of interval that alert notification has been remove from webpage. So here some one has like or share you photo or link then one event has been occur and that event notification you have seen on your web page.

So this type of Notification system we have going to develop in PHP by using Ajax JQuery method with Bootstrap framework. We have use simple Form data insert data event has use to implement this pop up alert notification system. So when we have enter data into database then at that time we will received alert pop up notification on web page. We have use Ajax with Jquery for fetch data from database. And for display Alert notification we have use Bootstrap alert class. So By using Bootstrap Ajax JQuery with PHP we have make simple Facebook style pop up notification feature. I hope you will enjoy this post and learn something new from this post. So, Keep visiting our website for web tutorial.






Source Code


index.php



<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | Facebook Style Popup Notification using PHP Ajax Bootstrap</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>
  <style>
  #alert_popover
  {
   display:block;
   position:absolute;
   bottom:50px;
   left:50px;
  }
  .wrapper {
    display: table-cell;
    vertical-align: bottom;
    height: auto;
    width:200px;
  }
  .alert_default
  {
   color: #333333;
   background-color: #f2f2f2;
   border-color: #cccccc;
  }
  </style>
 </head>
 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center">Facebook Style Popup Notification using PHP Ajax Bootstrap</h2>
   <br />
   
   <br />
   <form method="post" id="comment_form">
    <div class="form-group">
     <label>Enter Subject</label>
     <input type="text" name="subject" id="subject" class="form-control" />
    </div>
    <div class="form-group">
     <label>Enter Comment</label>
     <textarea name="comment" id="comment" class="form-control" rows="5"></textarea>
    </div>
    <div class="form-group">
     <input type="submit" name="post" id="post" class="btn btn-info" value="Post" />
    </div>
   </form>

   <div id="alert_popover">
    <div class="wrapper">
     <div class="content">

     </div>
    </div>
   </div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){

 setInterval(function(){
  load_last_notification();
 }, 5000);

 function load_last_notification()
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   success:function(data)
   {
    $('.content').html(data);
   }
  })
 }

 $('#comment_form').on('submit', function(event){
  event.preventDefault();
  if($('#subject').val() != '' && $('#comment').val() != '')
  {
   var form_data = $(this).serialize();
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
     $('#comment_form')[0].reset();
    }
   })
  }
  else
  {
   alert("Both Fields are Required");
  }
 });
});
</script>


fetch.php



<?php
//fetch.php;
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM comments WHERE comment_status = 0 ORDER BY comment_id DESC";
$result = mysqli_query($connect, $query);
$output = '';
while($row = mysqli_fetch_array($result))
{
 $output .= '
 <div class="alert alert_default">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <p><strong>'.$row["comment_subject"].'</strong>
   <small><em>'.$row["comment_text"].'</em></small>
  </p>
 </div>
 ';
}
$update_query = "UPDATE comments SET comment_status = 1 WHERE comment_status = 0";
mysqli_query($connect, $update_query);
echo $output;

?>


insert.php



<?php
//insert.php
if(isset($_POST["subject"]))
{
 $connect = mysqli_connect("localhost", "root", "", "testing");
 $subject = mysqli_real_escape_string($connect, $_POST["subject"]);
 $comment = mysqli_real_escape_string($connect, $_POST["comment"]);
 $query = "
  INSERT INTO comments(comment_subject, comment_text)
 VALUES ('$subject', '$comment')
 ";
 mysqli_query($connect, $query);
}
?>


Database



--
-- Database: `testing`
--

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

--
-- Table structure for table `comments`
--

CREATE TABLE IF NOT EXISTS `comments` (
  `comment_id` int(11) NOT NULL,
  `comment_subject` varchar(250) NOT NULL,
  `comment_text` text NOT NULL,
  `comment_status` int(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `comments`
--
ALTER TABLE `comments`
  ADD PRIMARY KEY (`comment_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `comments`
--
ALTER TABLE `comments`
  MODIFY `comment_id` int(11) NOT NULL AUTO_INCREMENT;

Wednesday, 26 April 2017

How to Load Data in Modal with Next & Previous button by Ajax PHP



If you are looking for tutorial on Bootstrap Modal with Dynamic data, then you in this post you can find not only how to load dynamic data into pop up bootstrap modal but also you can also find previous and next records button also by using Ajax Jquery with PHP. In one of the our previous post we have already made discussion on How to load dynamic data into Bootstrap modal by using Ajax PHP. But in this post we have include feature of previous and next button also.

If you have already load data into Bootstrap modal, so at that time you have seen one id records then after if you want to see next records then you have to close modal and click on next records view button. But now we have make simple tutorial in which you can see all records details on single modal by clicking on previous and next button. So on single modal we can see all records details one by one on single click and we do have to go next modal.

So if you have developed any web based application and in that application you have used Bootstrap modal for display dynamic data then you can add this features also. So user can view all records details one by one on single modal by clicking on Previous records button or Next records button. Here if you have load first records button then at that time previous button will be disabled because if you have load first records then there is no previous records so previous button will be disabled at that time and same way if you have view last records then at that time next button will be disabled. So if you have developed any web based application by using PHP Ajax with Bootstrap and if you have load dynamics data into modal then you can add this type of feature also to view previous and next records details on same modal by click on button.

I hope you have learn something new from this post. Please keep visit our website. Here you can also find source code and online demo. So keep enjoying PHP programming.







Source Code


index.php



<?php 
//index.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_posts ORDER BY post_id ASC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | Modal with Dynamic Previous & Next Data Button by Ajax PHP</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">
   <h2 align="center">Modal with Dynamic Previous & Next Data Button by Ajax PHP</h2>
   <br />
   <div class="table-responsive">
    <table class="table table-striped table-bordered">
     <tr>
      <th>Post</th>
      <th>Post Title</th>
      <th>Author</th>
      <th>View</th>
     </tr>
     <?php
     while($row = mysqli_fetch_array($result))
     {
      echo '
      <tr>
       <td>'.$row["post_id"].'</td>
       <td>'.$row["post_title"].'</td>
       <td>'.$row["post_author"].'</td>
       <td><button type="button" name="view" class="btn btn-info view" id="'.$row["post_id"].'" >View</button></td>
      </tr>
      ';
     }
     ?>
    </table>
   </div>
   
  </div>
 </body>
</html>

<div id="post_modal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content"> 
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Post Details</h4>
   </div>
   <div class="modal-body" id="post_detail">

   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
  </div>
 </div>
</div>


<script>
$(document).ready(function(){
 
 function fetch_post_data(post_id)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{post_id:post_id},
   success:function(data)
   {
    $('#post_modal').modal('show');
    $('#post_detail').html(data);
   }
  });
 }

 $(document).on('click', '.view', function(){
  var post_id = $(this).attr("id");
  fetch_post_data(post_id);
 });

 $(document).on('click', '.previous', function(){
  var post_id = $(this).attr("id");
  fetch_post_data(post_id);
 });

 $(document).on('click', '.next', function(){
  var post_id = $(this).attr("id");
  fetch_post_data(post_id);
 });
 
});
</script>


fetch.php



<?php
//fetch.php
if(isset($_POST["post_id"]))
{
 $connect = mysqli_connect("localhost", "root", "", "testing");
 $output = '';
 $query = "SELECT * FROM tbl_posts WHERE post_id = '".$_POST["post_id"]."'";
 $result = mysqli_query($connect, $query);
 while($row = mysqli_fetch_array($result))
 {
  $output .= '
  <h2>'.$row["post_title"].'</h2>
  <p><label>Author By - '.$row["post_author"].'</label></p>
  <p>'.$row["post_description"].'</p>
  ';
  $query_1 = "SELECT post_id FROM tbl_posts WHERE post_id < '".$_POST['post_id']."' ORDER BY post_id DESC LIMIT 1";
  $result_1 = mysqli_query($connect, $query_1);
  $data_1 = mysqli_fetch_assoc($result_1);
  $query_2 = "SELECT post_id FROM tbl_posts WHERE post_id > '".$_POST['post_id']."' ORDER BY post_id ASC LIMIT 1";
  $result_2 = mysqli_query($connect, $query_2);
  $data_2 = mysqli_fetch_assoc($result_2);
  $if_previous_disable = '';
  $if_next_disable = '';
  if($data_1["post_id"] == "")
  {
   $if_previous_disable = 'disabled';
  }
  if($data_2["post_id"] == "")
  {
   $if_next_disable = 'disabled';
  }
  $output .= '
  <br /><br />
  <div align="center">
   <button type="button" name="previous" class="btn btn-warning btn-sm previous" id="'.$data_1["post_id"].'" '.$if_previous_disable.'>Previous</button>
   <button type="button" name="next" class="btn btn-warning btn-sm next" id="'.$data_2["post_id"].'" '.$if_next_disable.'>Next</button>
  </div>
  <br /><br />
  ';
 }
 echo $output;
}

?>

Monday, 24 April 2017

Multiple Select option by using Bootstrap Select Plugin in PHP Ajax



In this post we have learn one more Jquery plugin for Bootstrap framework, here we are going to discuss Bootstrap Select plugin which is useful to make stylish select box with option of multiple selection. This plugin is easily integrate with Bootstrap library. There are many plugin like datepicker, colorpicker, select with search and many more available for Bootstrap, this all plugin we can easily integrate within Bootstrap framework.

Bootstrap Select plugin make stylish Select box with selection of multiple option at one time. By using this plugin you can also activate search feature under selection box also. So if your selection box has many option then at that time this search option will be useful to find option from select box.

In this post we have make discussion on how to use this Bootstrap Select plugin within form select tag and how to activate this plugin on select tag. For initialize this plugin we have to define .selectpicker class into select tag class attribute and then after in JQuery code we have write selectpickert() method with selector of .selectpicker class. By this method we can activate this plugin feature into particular select with class name .selectpickert.

After initialize Bootstrap Select Plugin now we want to submit value of selected multiple option to server, when we have directly submit value of this multiple select box then it will submit value of last selected option, so for submit value of all selected option we have to store value of select box into one hidden field and via value of this hidden field we can submit the value of multiple select box. So this way we can use Bootstrap Select Plugin for web development and we have also discuss how to submit the value of multiple option select box. So if you have develop application and you have want to assign multiple option with search feature then you can use this plugin which is very easy to use and you can also use this plugin with single selection option. So it depends on you how to use this plugin as per requirement.







Source Code


index.php


<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | How to Use Bootstrap Select Plugin with PHP JQuery</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>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
  
 </head>
 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center">How to Use Bootstrap Select Plugin with PHP JQuery</h2>
   <br />
   <div class="col-md-4" style="margin-left:200px;">
    <form method="post" id="multiple_select_form">
     <select name="framework" id="framework" class="form-control selectpicker" data-live-search="true" multiple>
      <option value="Laravel">Laravel</option>
      <option value="Symfony">Symfony</option>
      <option value="Codeigniter">Codeigniter</option>
      <option value="CakePHP">CakePHP</option>
      <option value="Zend">Zend</option>
      <option value="Yii">Yii</option>
      <option value="Slim">Slim</option>
     </select>
     <br /><br />
     <input type="hidden" name="hidden_framework" id="hidden_framework" />
     <input type="submit" name="submit" class="btn btn-info" value="Submit" />
    </form>
    <br />
    
   </div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $('.selectpicker').selectpicker();

 $('#framework').change(function(){
  $('#hidden_framework').val($('#framework').val());
 });

 $('#multiple_select_form').on('submit', function(event){
  event.preventDefault();
  if($('#framework').val() != '')
  {
   var form_data = $(this).serialize();
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
     //console.log(data);
     $('#hidden_framework').val('');
     $('.selectpicker').selectpicker('val', '');
     alert(data);
    }
   })
  }
  else
  {
   alert("Please select framework");
   return false;
  }
 });
});
</script>


insert.php



<?php
//insert.php
/*echo $_POST["framework"];
echo '<br />';
echo $_POST["hidden_framework"];*/

$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "INSERT INTO like_table(framework) VALUES ('".$_POST["hidden_framework"]."')";
if(mysqli_query($connect, $query))
{
 echo 'Data Inserted';
}
?>