动态填充模态弹出窗口

Question

我试图解决在 jQuery 数据表中停留在当前页面上的问题。单击一行中的“编辑”链接时，它将打开一个模式弹出窗口并填充控件。这需要将页面再次设置为第 1 页的回发。整个上午都在寻找解决方案，但都没有奏效。

所以我决定使用 ajax 填充模态；解决了我的分页问题，​​但不知何故未填充模态中的控件。

这是我尝试过的：

<div class="modal fade" id="editModal" role="dialog" aria-labelledby="editLabel" aria-hidden="true">
    <div class="modal-dialog fade in ui-draggable">
        <div class="modal-content">
            <div class="modal-header ui-draggable-handle">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title"><span id="spnEditHeader"></span></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-3">
                        ....
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="ddlArea">Area</label>
                            <asp:DropDownList runat="server"
                                ID="ddlArea"
                                ClientIDMode="Static"
                                CssClass="form-control"
                                DataTextField="AreaName"
                                DataValueField="AreaID"
                                AppendDataBoundItems="true">
                                <asp:ListItem Text="Select Area" Value="-1" />
                            </asp:DropDownList>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <label for="ddlDistrict">District</label>
                            <asp:DropDownList runat="server"
                                ID="ddlDistrict"
                                Enabled="false"
                                ClientIDMode="Static"
                                CssClass="form-control"
                                DataTextField="DistrictName"
                                DataValueField="DistrictID"
                                AppendDataBoundItems="true">
                                <asp:ListItem Text="Select District" Value="-1" />
                            </asp:DropDownList>
                        </div>
                    </div>
                </div>

（部分数据表有编辑链接）：

tblMPOO = $('#tblMPOO').DataTable({
    jQueryUI: true,
    data: [],
    dom: 'lfrtip',
    stateSave: true,
    stateDuration: 60 * 10,
    order: [[0, "asc"], [1, "asc"], [2, "asc"]],
    "columns": [
        {
            "data": "MPOOID"
        }, { ...
        }, {
            "render": function (data, type, row) {
                    var cellContent = '';
                    cellContent =
                        "<a href='javascript:' onclick=\"showEdit('" + row.MPOOID + "'); \">Edit</a> &nbsp; | &nbsp;" +
                        "<a href='javascript:' onclick=\"deleteCourse('" + row.MPOOID + "', '" + row.DistrictID + "'); \">Delete</a>";
                    return cellContent;
            }
        ],
        "pageLength": 15,
        processing: true
});


$(document).ready(function () {
    $('#editModal').modal({
        keyboard: true,
        backdrop: "static",
        show: false
    }).on('show.bs.modal', function (e) {debugger
        //var mpooID = $(e.relatedTarget).data('MPOOID');
        var mpooID = $('#hfMPOOID').val();
        //make ajax call to populate items
        populateMPOOEdit(mpooID);
    });

    $(".modal-dialog").draggable({
        handle: ".modal-header"
    });
});

function showEdit(MPOOID) {debugger
    $('#hfMPOOID').val(MPOOID);
    showEditModal();
}

function showEditModal() {
    some other stuff here ...

    $('#editModal').modal('show');
}

function populateMPOOEdit(mpooID) {
    $.ajax({
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        url: '<%= ResolveUrl("services/mpoo.asmx/GetMPOOListByMPOOID") %>',
        cache: false,
        data: JSON.stringify({ "MPOOID": mpooID }),
    }).done(function (result) {
        jResult = JSON.parse(result.d);
        $.each(jResult, function (val, txt) {debugger
            $('#tbMPOOName').val = txt.MPOOName;
           // $('#tbMgrFN').val = txt.ManagerFirstName; <--- This is wrong, corrected below
            $('#tbMgrFN').val(txt.ManagerFirstName); 
            $('#tbMgrLN').val(txt.ManagerLastName);
            $('#tbPhone').val(txt.Phone);
            $('#tbEmail').val(txt.Email);
            var AreaID = txt.AreaID;
            var DistrictID = txt.DistrictID;
            $("#ddlArea")[0].selectedIndex = 0;
            $("#ddlDistrict")[0].selectedIndex = 0;
            $("#ddlArea").val(AreaID);
            $("#ddlArea").change(); <-- added this to force its onchange event to fire
            $("#ddlDistrict").val(DistrictID); <-- This still doesn't work
        });
    }).fail(function (jqXHR, textStatus, errorThrown) {
        var errMsg = textStatus + ' - ' + errorThrown + '... Status: ' + jqXHR.status + ",  ResponseText: " + jqXHR.responseText;
    });
}

另一个问题，在相同的上下文中：我使用 ajax 根据另一个下拉列表中的选择更改来填充一个下拉列表（两个下拉列表都在上述模式中）。我使用第一个 DDL 的 onchange() 来填充第二个 DDL。工作正常。

假设这个问题已经解决并填充了控件，那么在 js 函数中设置第一个下拉菜单的值会触发其 onchange 事件吗？

更新

我进行了一些更改，解决了控件值未填充的问题；在更新的代码中标记它们。在“populateMPOOEdit()”中，我还强制触发 Area 下拉列表的 onchange() 事件。但是，在下一行，当我设置 District 下拉列表的选定值时，它不起作用（一些时间问题？）

Answer 1

这个问题的答案在另一篇文章中，我专门询问了如何使用 ajax 处理两个内衬下拉列表。 Answer here