asp.net mvc pop-up modal read from table row

Question

I can successfully read my selected table row to my pop-up modal but if I am going to move my button to dynamic reading of table row from javascript all of my fields will become empty or did not read the selected table.

Here my Javascript that build my table row together with my button update to call pop-up modal:

 $.get("/Home/GetItem", function (data) {
    tempDIM = JSON.parse(data);
    if (tempDIM[0]["status"] == "SUCCESS") {
        for (var i = 1; i < tempDIM.length - 1; i++) {
            $("#TableBody").append("<tr>" +
                "<th scope='row'>" + (i + 1) + "</th>" +
                "<td id='" + tempDIM[i]["id"] + "'>" + tempDIM[i]["id"] + "</td>" +
                "<td>" + tempDIM[i]["name"] + "</td>" +
                "<td>" + tempDIM[i]["address"] + "</td>" +
                "<td>" + tempDIM[i]["age"] + "</td>" +
                "<td>" + tempDIM[i]["status"] + "</td>" +
                '<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Update</button></td>' +                        
                "</tr > ");
        }
    }
});

Modal:

<table class="table" style="margin-top:10px">
        <thead>
            <tr>                    
                <th>id</th>
                <th>name</th>
                <th>address</th>
                <th>age</th>
                <th>status</th>
            </tr>
        </thead>
    </table>



   <table class="table table-striped" id="tBody">
       <tbody id="TableBody"></tbody>
    </table>



 <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-target="#exampleModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"><b>Update Selected Details</b></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>id:</label>
                        <input type="text" id="id" disabled />
                    </div>
                    <div class="form-group">
                        <label>name :</label>
                        <input type="text" id="name" disabled />
                    </div>
                    <div class="form-group">
                        <label>address :</label>
                        <input type="text" id="address" disabled />
                    </div>
                    <div class="form-group">
                        <label>age:</label>
                        <input type="text" id="age" disabled />
                    </div>
                    <div class="form-group">
                        <label>status:</label>
                        <input type="text" id="status" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" id="btnSave" onclick="SaveChanges()" class="btn btn-primary" data-dismiss="modal">Save changes</button>

                </div>
            </div>
        </div>
    </div>

And my script for reading the table:

 $(function () {
        $(".btn").click(function () {

            var $row = $(this).closest("tr"),       // Finds the closest row <tr>
                $tds = $row.find("td");             // Finds all children <td> elements

            $("#id").val($row.find('td:eq(0)').text())
            $("#name").val($row.find('td:eq(1)').text())
            $("#address").val($row.find('td:eq(2)').text())
            $("#age").val($row.find('td:eq(3)').text())
            $("#status").val($row.find('td:eq(4)').text())

        });
    }); 

Any suggestion or comments why I am getting null value from my pop-up modal. TIA

Answer 1

Assumed that your table contains proper data, $(".btn").click() event handler seems to be wrong because you may call other button with class="btn" outside the table row (i.e. <button type="button" id="btnSave" ...>). You should handle show.bs.modal event from exampleModal instead, then iterate row elements and put all values into corresponding <input> elements ordered by column index like example below:

$("#exampleModal").on('show.bs.modal', function (e) {
    var $button = $(e.relatedTarget);
    var $row = $button.closest("tr");
    var $tds = $row.find("td");

    $.each($tds, function(i, value) {
        $("input:eq(" + i + ")").val($(this).text());
    });
});

Note: If you want to submit textbox values inside the modal, avoid using disabled attribute which prevents the value from being posted, use readonly instead e.g. <input type="text" id="id" readonly="readonly" />.

Working example (simplified): .NET Fiddle

Related issue:

Click button on row of the table and show values in modal-window