動態填充模態彈出窗口

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函數中設置first drop down的值是否會觸發其onchange事件？

更新資料

我進行了一些更改，以解決控件值未填充的問題。 在更新的代碼中標記了它們。 在“ populateMPOOEdit（）”中，我還強制觸發了Area下拉列表的onchange（）事件。 但是，在下一行中，當我設置“區域”下拉列表的選定值時，它不起作用（某些計時問題？）

Answer 1

這個問題的答案是在另一篇文章中，我專門詢問了如何使用ajax處理兩個行內的下拉列表。 在這里回答