javascript - 回发后未调用模态对话框的 onshow

Question

我有一个 Bootstrap 模式对话框，当用户单击 jQuery 数据表中的“编辑”时，我用它来填充数据。此模式上有一个“取消”和“提交”按钮。

当我打开模式并单击“取消”，然后选择另一个表格行并单击“编辑”时，一切都很好；每次单击“编辑”时，数据都会正确填充。但是，如果我通过单击模式上的“提交”进行回发，然后再次单击“编辑”，模式将打开并且没有数据。

我使用模态的 on('show.bs.modal', ...) 来填充它，并且在回发完成后它永远不会被命中。

// This is called when "Edit" in data table row is clicked
function showEdit(var1, var2) {debugger
    $('#hfVar1').val(var1);
    $('#hfVar2').val(var2);
    showEditModal();
}

function showEditModal() {debugger
    $("#spnEditHeader").text("Edit Something");
    $('#editModal').modal('show');
}

$(document).ready(function () {
    // This populates the jQuery data table
    showTable(somthing, anotherThing);

    // This is executed as long there is no postback; 
    // once a postback is perfoemd this is not hit, modal not populated
    $('#editModal').modal({
        keyboard: true,
        backdrop: "static",
        show: false
    }).on('show.bs.modal', function (e) {debugger
        var var1= $('#hfVar1').val();
        var var2= $('#hfVar2').val();

        //make ajax call to populate items
        populateMPOOEdit(var1, var2);
    });
    ....
});

//This is the button in modal that causes postback
<div class="modal-footer">
    <div id="divEditButtons" style="text-align: center;">
        <button id="btnCancel" class="btn btn-info2" data-dismiss="modal" aria-hidden="true" aria-label="Cancel">Cancel</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button id="btnSubmit" class="btn btn-primary" aria-hidden="true" aria-label="Update">Update</button>
    </div>
</div>

// "Submit" button's click handler
$(document).on("click", "#btnSubmit", function (event) {
    // Validate data (client side validation)
    var isValid = validateUpdate();

    // Also need a server side validation checking for duplicate name, using ajax to do this
    $.ajax({
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        url: '<%= ResolveUrl("services/mpoo.asmx/NameExists") %>',
        cache: false,
        data: JSON.stringify({ "Name": name }),
    }).done(function (data) {
        var result = data.d;

        if (result != '') {
            nameExists = JSON.parse(data.d);

            if (nameExists == "true") {
                $("#lblErrName").text("Duplicate Name");
                $("#lblEditErrName").show();
                isValid = false;
            }
            if (isValid) {
                __doPostBack('btnSubmit', JSON.stringify({
                    action: "SaveUpdate", Var1: var1, ..., Varn: varn
                }));
                $('#editModal').modal('hide');
            }
        }
    });
    return false;  // to prevent modal from closing if there are errors on page
});

Answer 1

创建一个像这样的函数:

//basically everything you had in your document.ready function
function myJsFunc() {
  // This populates the jQuery data table
  showTable(somthing, anotherThing);

  // This is executed as long there is no postback; 
  // once a postback is perfoemd this is not hit, modal not populated
  $('#editModal').modal({
    keyboard: true,
    backdrop: "static",
    show: false
  }).on('show.bs.modal', function (e) {debugger
    var var1= $('#hfVar1').val();
    var var2= $('#hfVar2').val();

    //make ajax call to populate items
    populateMPOOEdit(var1, var2);
  });
....
}

然后在代码隐藏的 Page_Load 事件处理程序中，尝试添加以下内容:

Page.ClientScript.RegisterStartupScript(this.GetType(), "some random name for your script", "myJsFunc();", true);