How Can I Bootstrap Model in bootgrid command button

[zaibtabs]

Hi Everyone, I am new to this and so far I manage to run a jquery.bootgrid and data is displayed nicely with edit and delete buttons, however I am struggling to open a modal window and on.click of edit the select record.

Please can someone help. here is my ajax.js script code. further down is a fetchrecord.php file, which i would like to display in a modal window with save and close button.

$(document).ready(function(){

 var employeeTable = $('#employee_grid').bootgrid({
  ajax: true,
  rowSelect: true,
  post: function()
  {
   return{
    id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
   };
  },
  url: "fetch_data.php",
  formatters: {
   "commands": function(column, row)
   {

    return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.emp_id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> " + 
                        "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.emp_id + "\"><span class=\"glyphicon glyphicon-trash\"></span></button>";
    }
            }
                                                });

// On load of document, pick row-id and perform crud operations.  
// This is where I am having problems.

 $(document).on("loaded.rs.jquery.bootgrid", function () {
   //Remove event handlers
   $(this).find(".command-edit").off();
   $(this).find(".command-delete").off();
   $(this).find(".command-add").off();

   $(this).find(".command-edit").on("click", function (e) {
     alert("You pressed edit on row: " + $(this).data("row-id"));
   }).end().find(".command-delete").on("click", function (e) {
     alert("You pressed delete on row: " + $(this).data("row-id"));
   }).end().find(".command-add").on("click", function (e) {
     /* Yout button logic */
   });
});
}); 

My php fetchsinglerecord.php code.

<?php
//fetch_single.php

include_once("db_connect.php");

if(isset($_POST["eid"]))
{
 $output = array" ";

 $query = "SELECT * FROM employee WHERE id = '".$_POST["eid"]."'";
 $result = mysqli_query($connection, $query);
 while($row = mysqli_fetch_array($result))
 {
  $output["id"] = $row["id"];
  $output["employee_name"] = $row["employee_name"];
  $output["employee_salary"] = $row["employee_salary"];
  $output["employee_age"] = $row["employee_age"];

 }
 echo json_encode($output);
}
echo json_encode($output);
?>

How do i get this record from fetchsingle.php in a modal window. Please helpl

[zaibtabs]

Here is my model window

<div id="userModal" class="modal fade">
    <div class="modal-dialog">
        <form method="post" id="user_form" enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Edit User</h4>
                </div>
                <div class="modal-body">
                    <label>Employee Name</label>
                    <input type="text" name="employee_name" id="employee_name" class="form-control" />
                    <br />
                    <label>Employee Salary</label>
                    <input type="text" name="employee_salary" id="employee_salary" class="form-control" />
                    <br />
                    <label>Employee Age</label>
                    <input type="text" name="employee_age" id="employee_age" class="form-control" />

                </div>
                <div class="modal-footer">
                    <input type="hidden" name="user_id" id="user_id" />
                    <input type="hidden" name="operation" id="operation" />
                    <input type="submit" name="action" id="action" class="btn btn-success" value="Add" />
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>