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>