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

Posted 2023-05-08

【中文标题】回发后未调用模态对话框的 onshow

【英文标题】：Modal dialog's onshow not called after postback

【发布时间】：2018-10-01 19:14:05

【问题描述】：

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

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

我正在使用 modal 的 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
);

【问题讨论】：

您检查错误了吗？你是说这个 fn populateMPOOEdit 没有被调用吗？

我没有看到任何错误；是的，一旦有回发，包含填充函数的 .on('show.bs.modal', function(e) ...) 部分就不会被命中。我可以看到它点击 showEdit() 然后 showEditModal() 但就是这样。

这是导致您回发的代码吗？ __doPostBack('btnSubmit', JSON.stringify( action: "SaveUpdate", Var1: var1, ..., Varn: varn ));

【参考方案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);

【讨论】：

当我用函数 myJsFunc() 替换 $(document).ready(function () 并在行后面添加代码时，我得到函数 myJsFunc in not defined。我在页面 load() 中添加了 RegisterClientScript。

你能确保你的

中声明了 myJsFunc ...然后将 Page.ClientScript.RegisterClientScript 更改为 Page.ClientScript.RegisterStartupScript - 我在那里犯了一个错误。

同样的事情。我将 $(document).ready() 中的所有内容都复制到了一个 js 函数中，将该函数移至 head 部分，删除了 $(document).ready()，添加了 registerstartup 脚本，仍然有同样的问题。

我将您的回复标记为答案；但是，我必须做一些更改：我创建了 js 函数，但只将 $(document).ready() 的 editModal 部分移到了它，其他所有内容都保持不变；将此函数移至 aspx 文件的 head 部分，将 page.clientscript... 添加到“if (!Page.IsPostBack)”的“else”部分中的 .cs 文件的 page_load() 中。然后它起作用了。

是的，基本上你只需要在 myJsFunc 被调用之前声明它。我通常在最后一个 标签附近的页面末尾调用我的 javascript 初始化方法，而不是使用 $(document).ready()。我认为这可能也有效......但我有一段时间没有使用网络表单，所以我有点破旧。