This is my following code in front End:
<div class="panel panel-primary">
<div class="panel-heading text-center text-uppercase">Birth Certificates For Overall (Pending, Completed)</div>
<div class="panel-body">
<div class="box-body">
<table id="viewer" class="table table-bordered">
<thead>
<tr>
<th>Sr No</th>
<th>Reg Number</th>
<th>From Hospital</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php $Viewer->showAllData(); ?>
</tbody>
<tfoot>
<tr>
<th>Sr No</th>
<th>Reg Number</th>
<th>From Hospital</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
This is my classes code in it of which i have called the object:
public function showAllData()
{
$query = "SELECT * FROM certificate_details ORDER BY created DESC";
$connection = $this->establish_connection();
$details = $connection->query($query);
$connection->close();
if($details->num_rows > 0)
{
$counter = 1;
while($detail = $details->fetch_assoc())
{
$status = $detail['status'];
if($status == 0)
{
$bg = "bg-danger";
$issuestatus = "btn btn-success";
$message = "Confirm Issue!";
}
elseif($status == 1)
{
$bg = "bg-success";
$issuestatus = "btn btn-success disabled";
$message = "Certificate Issued";
}
else
{
$bg = "bg-warning";
$issuestatus = "btn btn-warning";
}
echo "
<tr class='odd gradeX ".$bg."'>
<td>".$counter."</td>
<td>".$detail['registration_number']."</td>
<td>".$this->getHospitalInfo($detail['user_id'])."</td>
<td style='margin: 0;'><div class='btn btn-primary' href='#' value='".$detail['id']."' id='view-details'>View Details</div><div style='margin-left: 10px;' class='".$issuestatus."' href='#' value='".$detail['id']."' id='confirm-issue'>".$message."</div></td>
</tr>
";
$counter = $counter + 1;
}
}
}
I have give a specific id to the button i.e id="view-details" and in the value section it hold the unique value
This is the following JQuery Code which i am triggering whenever i am calling the ("#view-details").click(function(){})
$("#view-details").click(function()
{
var certificateId = $("#view-details").attr('value');
$.ajax({
url: 'get_data.php?id=getCertificateDetails',
type: 'POST',
dataType: 'html',
data: {certificate_id : certificateId},
})
.done(function(resp)
{
var data = $.parseJSON(resp);
if(data.status == 1)
{
var message = "Certificate is Already Issued";
var btn_status = "btn btn-success disabled";
}
else if(data.status == 0)
{
var message = "Click To Confirm Issue!";
var btn_status = "btn btn-danger";
}
else
{
var message = "Technical Issue";
var btn_status = "btn btn-danger disabled";
}
var data = "<div class='modal-dialog'>"+
"<div class='modal-content'>"+
"<div class='modal-header' align='center'>"+
"<h3 class='modal-title'>Certificate Details Are As Follows</h3>"+
"</div>"+
"<div class='modal-body'>"+
"<b>Registration Number</b> : "+data.reg_number+
"<br /><b>Baby's Birth Date</b> : "+data.birth_date+
"<br /><b>Baby's Birth Time</b> : "+data.birth_time+
"<br /><b>Baby's Gender</b> : "+data.gender+
"<br /><b>Baby's Full Name</b> : "+data.baby_name+
"<br /><b>Father's Full Name</b> : "+data.fathers_name+
"<br /><b>Mother's Full Name</b> : "+data.mothers_name+
"<br /><b>Parent's Address While Baby's Birth</b> : "+data.while_baby_birth_parents_address+
"<br /><b>Parent's Permanent Address</b> : "+data.parents_permanent_address+
"<hr /><h4 class='text-center'>Hospital Details</h4>"+
data.hospital_detail+
"<hr /><h4 class='text-center'>Home Details</h4>"+
data.home_detail+
"<hr /><h4 class='text-center'>Other Details</h4>"+
data.other_detail+
"</div>"+
"<div class='modal-footer'>"+
"<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>"+
"<a href='#' class='"+btn_status+"' id='confirm-issue'>"+message+"</a>"+
"</div>"+
"</div>"+
"</div>";
$('#viewDetails').html(data);
$('#viewDetails').modal('show');
})
.fail(function()
{
console.log("error");
});
});
The problem arises when lets take a scenario have a look at this screenshot
when i click on view details of the very first record the modal is called, but when i click on the next view details the modal doesn't appear. it seems that the modal appears only for the very 1st record present in the table
please can anyone help me with this code