asp.net mvc всплывающее модальное чтение из строки таблицы - PullRequest
Новая
       21

asp.net mvc всплывающее модальное чтение из строки таблицы

0 голосов
/ 30 октября 2018

Я могу успешно прочитать выбранную строку таблицы в моем модале всплывающего окна, но если я собираюсь переместить мою кнопку для динамического чтения строки таблицы из javascript, все мои поля станут пустыми или не будут читать выбранную таблицу.

Вот мой Javascript, который строит строку моей таблицы вместе с обновлением моей кнопки для вызова модального всплывающего окна: 

 $.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>

И мой скрипт для чтения таблицы: 

 $(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())

        });
    });

Любое предложение или комментарий, почему я получаю нулевое значение из моего модального всплывающего окна. TIA

1 Ответ

0 голосов
/ 30 октября 2018

Предполагая, что ваша таблица содержит правильные данные, обработчик событий $(".btn").click() кажется неправильным, потому что вы можете вызвать другую кнопку с class="btn" вне строки таблицы (т.е. <button type="button" id="btnSave" ...>). Вместо этого вы должны обработать событие show.bs.modal из exampleModal, затем выполнить итерацию элементов строки и поместить все значения в соответствующие элементы <input>, упорядоченные по индексу столбца, как в примере ниже: 

$("#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());
    });
});

Примечание: Если вы хотите отправить значения текстового поля внутри модального режима, избегайте использования атрибута disabled, который запрещает публикацию значения, используйте вместо него readonly, например. <input type="text" id="id" readonly="readonly" />.

Рабочий пример (упрощенный): .NET Fiddle

Похожие проблемы:

Нажмите кнопку в строке таблицы и отобразите значения в модальном окне

...