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

Question

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>

provide code of "#newModal" also – tuhin47 Jan 18 '20 at 14:28 — tuhin47, Jan 18 '20 at 14:28
@tuhin47 added, sorry it was missed – checkmate Jan 18 '20 at 15:05 — checkmate, Jan 18 '20 at 15:05

Qonvex620 · Accepted Answer · 2020-01-18T15:46:33.453

1

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

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

please check this out enter link description here

edited Jan 18 '20 at 15:46

answered Jan 18 '20 at 15:18

Qonvex620

3,819
1
8
15

Hi, i tried, yet modal does not show, however i checked with setting out an alert, it works. therefore, its just the modal that does not pops – checkmate Jan 18 '20 at 15:31
are you sure the modal actually works inside $(document).on('click', '.btnedt', function() {. I checked everything you mentioned but no. I looked into many answers but nothing was found in the aforementioned function. – checkmate Jan 18 '20 at 15:59
Definitely it will work. That's impossible. If that's the case then can you show it in jsfiddle or show all what you have. – Qonvex620 Jan 18 '20 at 16:05
Hey, code actually works, i have missed a div in the previous modal. – checkmate Jan 18 '20 at 16:11

score 0 · Answer 2 · answered Jan 18 '20 at 16:13

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>

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

2 Answers2

Use class instead of multiple IDs