Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP - php

Question

I am trying to use this tutorial Here about using bootstrap modal to show dynamic MySQL Data using Ajax & PHP, the only difference is that I am using Stored Procedures to pull the data from MySQL.
I am using
My index:
<div class="col-md-12">
<ul class="contact_list">
<?php
if (isset($_POST['Search'])) {
$r = DB::Call("[spEmployeeSelectAll]", array("EmployeeCode" => \PDO::PARAM_STR, "FullName" => \PDO::PARAM_STR, "DepartmentID" => \PDO::PARAM_INT, "ProjectID" => \PDO::PARAM_INT), array($_POST['EmployeeCode'], $_POST['FullName'], $_POST['DepartmentID'], $_POST['ProjectID']));
foreach ($r as $key => $value) {
echo '
<li class="contact_item" >
<a href="#" data-toggle="modal" data-target="#modalLarge" data-id="' . $value['EmployeeCode'] . '" id="getUser">
<span class="contact_content">
<h2>' . $value['FullName'] . '</h2>
<span class="text-muted">' . $value['Designation'] . '</span>
<small class="text-muted">' . $value['Department'] . '</small>
</span>
</a>
</li>
';
}
}
?>
</ul>
</div>
<div id="view-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
<i class="glyphicon glyphicon-user"></i> User Profile
</h4>
</div>
<div class="modal-body">
<div id="modal-loader" style="display: none; text-align: center;">
<!-- ajax loader -->
<img src="ajax-loader.gif">
</div>
<!-- mysql data will be load here -->
<div id="dynamic-content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My Function:
(document).ready(function(){
$(document).on('click', '#getUser', function(e){
e.preventDefault();
var uid = $(this).data('EmployeeCode'); // get id of clicked row
$('#dynamic-content').html(''); // leave this div blank
$('#modal-loader').show(); // load ajax loader on button click
$.ajax({
url: 'getuser.php',
type: 'POST',
data: 'id='+uid,
dataType: 'html'
})
.done(function(data){
console.log(data);
$('#dynamic-content').html(''); // blank before load.
$('#dynamic-content').html(data); // load here
$('#modal-loader').hide(); // hide loader
})
.fail(function(){
$('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
$('#modal-loader').hide();
});
});
});
getuser.php
<?php
include 'config.php';
$r = DB::Call("[spEmployeeSelectAll]", array("EmployeeCode" => \PDO::PARAM_STR, "FullName" => \PDO::PARAM_STR, "DepartmentID" => \PDO::PARAM_INT, "ProjectID" => \PDO::PARAM_INT), array($_POST['EmployeeCode'], $_POST['FullName'], $_POST['DepartmentID'], $_POST['ProjectID']));
if (isset($_REQUEST['EmployeeCode'])) {
?>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<tr>
<th>First Name</th>
<td><?php echo $value['FullName']; ?></td>
</tr>
<tr>
</table>
</div>
<?php
}
?>
My Stored Procedures Code:
ALTER PROCEDURE [dbo].[spEmployeeSelectAll]
#EmployeeCode AS NVARCHAR(50) = '',
#FullName AS NVARCHAR(250)= '',
#DepartmentID AS NVARCHAR(250) = 0,
#ProjectID AS VARCHAR(250) = 0
AS
BEGIN
SELECT Employee.EmployeeID,
Employee.EmployeeCode,
Employee.FullName,
Department.Department,
Designation.Designation,
Project.Project
FROM tbEmployee Employee
INNER JOIN tbDesignation Designation ON Employee.DesignationID = Designation.DesignationID
INNER JOIN tbDepartment Department ON Employee.DepartmentID = Department.DepartmentID
INNER JOIN tbProject Project ON Employee.ProjectID = Project.ProjectID
WHERE Employee.IsDeleted = 0
AND Employee.EmployeeCode LIKE '%' + #EmployeeCode + '%'
AND Employee.FullName LIKE '%' + #FullName + '%'
AND Employee.DepartmentID = CASE WHEN #DepartmentID > 0 THEN #DepartmentID ELSE Employee.DepartmentID END
AND Employee.ProjectID = CASE WHEN #ProjectID > 0 THEN #ProjectID ELSE Employee.ProjectID END
END
My issue is when every I click on the link for the modal to show up .. nothing show up and the console show me this warning:
Synchronous XMLHttpRequest on the main thread is deprecated because of
its detrimental effects to the end user's experience. For more help,
check https://xhr.spec.whatwg.org/.
Any ideas about how to solve this issue?