My Modal is not firing on click of the button. I have tried every possible approach that I know and attempted all possible "Hit & Try" Methods. So I reverting to this forum for help. My Codes are follows:-
Main.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Bootstrap Modal with Dynamic MySQL Data using Ajax & 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>
</head>
<body>
<br /><br />
<div class="container" style="width:700px;">
<h3 align="center">Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</h3>
<br />
<div class="table-responsive">
<table id="recordsfromraky" class="table table-striped table-bordered">
</table>
</div>
</div>
</body>
</html>
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body" id="employee_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(){
fetchChange();
$('.view_data').click(function(){
var employee_id = $(this).attr("id");
var fired_button = $(this).val();
alert(fired_button);
$('#dataModal').modal("show");
});
function fetchChange() {
var finyear = "2017-18";
var cmdname = "HQ TC";
var stnname = "All Stations";
var statusname = "All Status";
var cfaname = "All CFA";
var wkcatname = "All Categories";
$.ajax({
url:"get_value.php",
method:"POST",
data:{finyear:finyear, wkcatname:wkcatname,cmdname:cmdname,stnname:stnname, statusname:statusname,cfaname:cfaname},
success:function(data){
$('#recordsfromraky').html(data);
}
});
};
});
</script>
get_value.php code is as follows:-
<?php
ob_start();
include_once $_SERVER['DOCUMENT_ROOT'] . '/CommandWks/phpAssets/dbconnect.php';
ini_set("xdebug.var_display_max_children", -1);
ini_set("xdebug.var_display_max_data", -1);
ini_set("xdebug.var_display_max_depth", -1);
$finyr = $_POST['finyear'];
$commdname = $_POST['cmdname'];
$stationname = $_POST['stnname'];
$statustype = $_POST['statusname'];
$cfanamed = $_POST['cfaname'];
$catname = $_POST['wkcatname'];
$finyr = str_replace('"', '', $finyr);
$commdname = str_replace('"', '', $commdname);
$stationname = str_replace('"', "'", $stationname);
$statustype = str_replace('"', "", $statustype);
$cfanamed = str_replace('"', '', $cfanamed);
$catname = str_replace('"', '', $catname);
//var_dump($_POST);////////////////////////////////////////
$wherefy ='';
$wherecmd ='';
$wherestn = '';
$wherestatus ='';
$wherecfa ='';
$wherecat ='';
$tcn='';
if (empty($finyr)){
$wherefy = '';
}else{
$tcn = "'" . '%' . str_replace(' ', '', $finyr) . '%' . "'";
$wherefy = 'WHERE (`amwplist`.`Work_ID_by_MoD` LIKE ' . $tcn . ')';
}
if (!empty($stationname)) {
if ($stationname === "All Stations"){
$wherestn='';
}else{
$tcn='';
$tcn = "'" . str_replace("''", "", $stationname) . "'";
$wherestn = 'AND (`stationlist`.`Station` = ' . $tcn . ')';
}
}else{
$wherestn='';
}
if (!empty($commdname)) {
if ($commdname === "All Commands"){
$wherecmd='';
}else{
$tcn='';
$tcn = "'" . '%'. str_replace(' ', '', $commdname) . '%' . "'";
$wherecmd = 'AND (`amwplist`.`Work_ID_by_MoD` LIKE ' . $tcn . ')';
}
}else{
$wherecmd='';
}
if (!empty($statustype)) {
if ($statustype === "All Status"){
$wherestatus='';
}else{
$tcn='';
$tcn = "'" . '%'. $statustype . '%' . "'";
$wherestatus = 'AND (`workstatuslist`.`Status_Type` LIKE ' . $tcn . ')';
}
}else{
$wherestatus='';
}
if (!empty($cfanamed)) {
if ($cfanamed === "All CFA"){
$wherecfa='';
}else{
$tcn='';
$tcn = "'" . '%'. $cfanamed . '%' . "'";
$wherecfa = 'AND (`cfalist`.`CFA` LIKE ' . $tcn . ')';
}
}else{
$wherecfa='';
}
if (!empty($catname)) {
if ($catname === "All Categories"){
$wherecat='';
}else{
$tcn='';
$tcn = "'" . '%'. $catname . '%' . "'";
$wherecat = 'AND (`workscategorylist`.`Category_Type` LIKE ' . $tcn . ')';
}
}else{
$wherecat='';
}
$WhereCondition = $wherefy . " " . $wherestatus . " " . $wherestn . " " . $wherecfa . " " . $wherecat . " " . $wherecmd;
//var_dump( $WhereCondition);
//var_dump($wherefy);
//var_dump($wherecmd);
//var_dump($wherestn);
//var_dump($wherestatus);
//var_dump($wherecfa);
//ovar_dump($wherecat);
$sql ="SELECT
*
FROM `amwplist`
LEFT OUTER JOIN `workscategorylist` ON `amwplist`.`Category_ID` = `workscategorylist`.`Category_ID`
INNER JOIN `stationlist` ON `amwplist`.`Station_ID` = `stationlist`.`Station_ID`
LEFT OUTER JOIN `commandhqlist` ON `stationlist`.`Command_ID` = `commandhqlist`.`CommandHQ_ID`
LEFT OUTER JOIN `sectorlist` ON `stationlist`.`Sector_ID` = `sectorlist`.`Sector_ID`
LEFT OUTER JOIN `celist` ON `stationlist`.`CE_ID` = `celist`.`CE_ID`
LEFT OUTER JOIN `cwelist` ON `stationlist`.`CWE_ID` = `cwelist`.`CWE_ID`
LEFT OUTER JOIN `gelist` ON `stationlist`.`GE_ID` = `gelist`.`GE_ID`
LEFT OUTER JOIN `ifalist` ON `amwplist`.`IFA_ID` = `ifalist`.`IFA_ID`
LEFT OUTER JOIN `cdalist` ON `stationlist`.`CDA_ID` = `cdalist`.`CDA_ID`
LEFT OUTER JOIN `cfalist` ON `amwplist`.`CFA_ID` = `cfalist`.`CFA_ID`
LEFT OUTER JOIN `workstatuslist` ON `amwplist`.`Status_ID` = `workstatuslist`.`Status_ID` " .
$WhereCondition . " " .
"ORDER BY substring_index(amwplist.Work_ID_by_MoD, '/', 1), CONVERT(substring_index(amwplist.Work_ID_by_MoD, '/', -1), UNSIGNED INTEGER)
";
$tableRow = '<thead>
<tr>
<th>Category Type</th>
<th>Station</th>
<th>MoD ID</th>
<th>Nomenclature</th>
<th>Cost</th>
<th>Status</th>
</tr>
</thead>
<tbody>';
$conn = new mysqli($DBSERVER, $DBUSER, $DBPASS, $DBNAME);
$result = mysqli_query($conn, $sql);
//var_dump($conn);
while ($row= mysqli_fetch_array($result)) {
//$idnumber = CONVERT(substring_index($row['Work_ID_by_MoD'], '/', -1), UNSIGNED INTEGER);
$tableRow = $tableRow . '<tr>' ;
$tableRow = $tableRow . '<td>'. $row['Category_Type'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Station'] . '</td>';
$trow = $row['Work_ID_by_MoD'];
//var_dump($trow);
//var_dump('<td><input type="button" name= "' . $row['Work_ID_by_MoD'] . '" value= "' . $row['Work_ID_by_MoD'] . '" id= "' . $row['Work_ID_by_MoD'] . '" class="btn btn-info btn-xs view_data" /></td>');
$tableRow = $tableRow . '<td><input type="button" name= "' . $trow . '"' . 'value= "' . $trow . '" id= "' . $trow . '" class="btn btn-info btn-xs view_data" /></td>';
$tableRow = $tableRow . '<td>'. $row['Nomenclature'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Cost'] . '</td>';
$tableRow = $tableRow . '<td>'. $row['Status_Type'] . '</td>';
$tableRow = $tableRow . '</tr>';
}
$tableRow = $tableRow . '</tbody>';
//var_dump($tableRow);
echo ($tableRow);
$conn->close();
ob_end_flush();
?>
The function .click() on clicking the MoD ID in the third column is not firing. The content of rows in this column looks like this:-
<input type="button" name="AMWP/2017-18/1" value="AMWP/2017-18/1" id="AMWP/2017-18/1" class="btn btn-info btn-xs view_data">
<input type="button" name="AMWP/2017-18/2" value="AMWP/2017-18/2" id="AMWP/2017-18/2" class="btn btn-info btn-xs view_data">
<input type="button" name="AMWP/2017-18/3" value="AMWP/2017-18/3" id="AMWP/2017-18/3" class="btn btn-info btn-xs view_data">
I now think that maybe there are Handle issues here because the table is being filled by get_value.php into main.php and then I am trying to fire Modal by clicking the button generated by get_value.php.
The problem is that you try to bind a click event on a non existing object. i.e. $('.view_data').click(... happens before your ajax call is finished and therefore there are no elements that have the class view_data.
You have two options:
1) don't bind the event on the button, but on body. I personally prefer this method because it doesn't bind the event but uses a delegation. It's easier to debug and maintain (especially if you end up having a lot of events in one document):
$('body').on('click', '.view_data', function(){
alert('clicked ' + $(this).val());
});
2) put the event binding in the success method of the ajax call AFTER you write the results to the DOM
fetchChange();
function fetchChange() {
var finyear = "2017-18";
var cmdname = "HQ TC";
var stnname = "All Stations";
var statusname = "All Status";
var cfaname = "All CFA";
var wkcatname = "All Categories";
$.ajax({
url:"get_value.php",
method:"POST",
data:{finyear:finyear, wkcatname:wkcatname,cmdname:cmdname,stnname:stnname, statusname:statusname,cfaname:cfaname},
success:function(data){
$('#recordsfromraky').html(data);
$('.view_data').click(function(){
var employee_id = $(this).attr("id");
var fired_button = $(this).val();
alert(fired_button);
$('#dataModal').modal("show");
});
}
});
};
});