CODEWITHSUNDEEP
javascriptjquery
checkmate
checkmate

Reputation: 267

html Dynamic table edit button on click event does not load the modal

my end objective is to edit the json data and post back to the server if there is any update on the row

I am using the following code to get the json data to the table and add an edit button at the end column dynamically.

$.getJSON("echo_int_ip.php", function get_mem_update(json) {
                my_json = json;
                var tr;
                var n=5;

                for (var i = 0; i < n; i++) {

                    tr = $('<tr/>');
                    var mem_date = "<td style=\"min-width:90px\"><label id='mem_date'>" + my_json[i].id + "</label></td>";
                    tr.append(mem_date);
                    var mem_name = "<td class=\"contact_name\" style=\"min-width:150px\"><label id='mem_name'>" + my_json[i].fi_name + "</label></td>";
                    tr.append(mem_name);
                    var mem_reason = "<td><label id='mem_reason'>" + my_json[i].agent_ + "</label></td>";
                    tr.append(mem_reason);
                    var mem_comment = "<td style=\"max-width:150px\"><label id='mem_comment'>" + my_json[i].date + "</label></td>";
                    tr.append(mem_comment);
                    var mem_butn = "<td><input type=\"button\" id=\"btnedt\" value=\"Edit\" /></td>";
                    tr.append(mem_butn);
                    $('#table_member').append(tr);

                }
            });

according to the solution provided here, i have used the the following script to create an onclick event and get row data.

<script>
        $(document).ready(function () {
            $(document).on('click', '#btnedt', function() {
         //   alert($(this).closest('tr').find('.contact_name').text());
$("#newModal").modal("show");
            });
        });
    </script>

this is a sample modal i am currently trying to load but it does not work. i have spent hours trying figure out a way, but ended up asking from you experts. Thank you in advance

<div class="modal fade" id="newModal" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Error</h4>
                </div>
                <div class="modal-body">
                    <p> </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Upvotes: 1

Views: 1283

Answers (2)

Zeeshan Eqbal
Zeeshan Eqbal

Reputation: 260

Use class instead of multiple IDs

Share your modal code

var mem_butn = "<td><input type=\"button\" class=\"btnedt\" value=\"Edit\" /></td>";

<script>
    $(document).ready(function () {
         $('body').on('click', '.btnedt', function() {
              $("#newModal").modal("show");
         });
    });
</script>

Upvotes: 0

Qonvex620
Qonvex620

Reputation: 3972

First of all you can't have many id's with the same value in a one html page. Cause it will result an error in the future while your doing a lot of code to it. Please change your btnedt to a class not an id. then change your script like this.

<script>
    $(document).ready(function () {
         $(document).on('click', '.btnedt', function() {
              //   alert($(this).closest('tr').find('.contact_name').text());
              $("#newModal").modal("show");
         });
    });
</script>

if modal is already the issue. Then here some reason's why its not appearing

  1. Remove the fade class in your modal.
  2. The versions of your Javascript and Bootstrap does not match.
  3. You forgot to include bootstrap.js library in the document

please check this out enter link description here

Upvotes: 2

Related Questions