动态填充模态弹出窗口

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（）事件。但是，在下一行，当我设置区下拉的选定值时，它不起作用（某些时间问题？）

Answer 1

回答这个问题的是另一篇文章，我特意询问如何使用ajax处理两个带衬里的下拉列表。 Answer here