1

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

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

Noman
  • 1,459
  • 2
  • 18
  • 38
Akshay Shrivastav
  • 1,115
  • 4
  • 17
  • 43
  • you are generating multiple elements with the same id ("view-details"). That's invalid HTML. Element IDs must be unique. Use classes instead (e.g. `$(".view-details").click(...` and `
    – ADyson Sep 20 '16 at 13:59

2 Answers2

0

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

ADyson
  • 57,178
  • 14
  • 51
  • 63
  • i did it as per u told so i also changed the class in confirm-isse as i have posted the .js code also just below the .view-details you have recommended as soon as i click on confirm issue it does not add the attr of disabled but if the but it as id="" instead of class it only disables the very 1st value in the table – Akshay Shrivastav Sep 20 '16 at 14:33
0

#view-details id always unique so your modal will only work with first where ever it comes.

For more details about Difference between id and class in CSS and when to use it

so you need to add a class to open model, and some change in your code

HTML :

id='view-details' to <div class='btn btn-primary view-details'>

JS:

$( "body" ).on( "click", ".view-details", function() {
   var certificateId = $( this ).attr('value');
  // .... Rest of your code here
});

Why Use jQuery .on() because it will bind click handler to every button holding view-details class.

var certificateId = $( this ).attr('value');

Will give you current clicked button's attribute value.

Community
  • 1
  • 1
Noman
  • 4,088
  • 1
  • 21
  • 36