Akshay Shrivastav Akshay Shrivastav - 1 year ago 64
jQuery Question

How to get the value of the button in a table if it has multiple records

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">
<th>Sr No</th>
<th>Reg Number</th>
<th>From Hospital</th>
<?php $Viewer->showAllData(); ?>
<th>Sr No</th>
<th>Reg Number</th>
<th>From Hospital</th>
</div><!-- /.box-body -->
</div><!-- /.box -->

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);

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";
$bg = "bg-warning";
$issuestatus = "btn btn-warning";

echo "
<tr class='odd gradeX ".$bg."'>
<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>
$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(){})

var certificateId = $("#view-details").attr('value');

url: 'get_data.php?id=getCertificateDetails',
type: 'POST',
dataType: 'html',
data: {certificate_id : certificateId},
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";
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 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>"+
"<hr /><h4 class='text-center'>Home Details</h4>"+
"<hr /><h4 class='text-center'>Other Details</h4>"+
"<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>"+


The problem arises when lets take a scenario
have a look at this screenshot

enter image description here

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

Answer Source

you are generating multiple elements with the same id ("view-details"). That's invalid HTML. Element IDs must be unique. Your click event handler will only work on the first one because it considers that all the later ones are not valid.

Use classes instead (e.g. $( "body" ).on( "click", ".view-details"... instead of $("#view-details").click(... and <div class='btn btn-primary view-details'... as the button (instead of id="view-details")

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download