JQuery UI模式对话框触发ASP.Net更新面板控件

本文关键字：更新 Net 控件 ASP UI 模式 对话框 JQuery | 更新日期: 2023-09-27 18:29:57

我有许多服务器端生成的HyperLinks

 <a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_1" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a>
 <a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_2" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a>
 <a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2428_3" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a>
 <a id="ctl00_ContentPlaceHolder1_APMySlides_unlinkImage_2424_3" title="Click Here to remove this image from this application." class="APMySlides_unlinkImage" href="#"></a>

触发更新的部分

 <asp:HiddenField ID="delhiddenfield" runat="server" />
 <asp:Button ID="lauchdelete" runat="server" Text="" OnClick="removeLink" CssClass="lauchdelete" style="display:none;" />
 <div id="deleteconfirm" title="Are you sure?" style="display:none;">Are you sure you want to remove this image from this application?</div>

JQuery的一小部分，当点击时调用另一个函数

 var del = '<%=delhiddenfield.ClientID %>';
 $(function(){
     $('.APMySlides_unlinkImage').click(function (event) { triggerdel(event); });
 });
 function triggerdel(event) {
        var caller = event.target || event.srcElement;
        // get the id vals
        var idsplit = caller.id.split("_");
        if (idsplit.length > 2) {
            $('#' + del).val(idsplit[idsplit.length - 2] + "_" + idsplit[idsplit.length - 1]);
            $("#deleteconfirm").dialog({
                resizable: false,
                height: 140,
                modal: true,
                buttons: {
                    "Delete": function () {
                        // this section is supposed to trigger the update
                        $('.lauchdelete').click();
                        $('#' + del).val('');
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        }
    }

如果我在launchdelete按钮中放入OnClientClick="alert（'woo lauchdelete clicked'）"，它会触发，但我的代码隐藏不会调用。然而，如果我去掉模式对话框，如下所示：

    function triggerdel(event) {
        var caller = event.target || event.srcElement;
        // get the id vals
        var idsplit = caller.id.split("_");
        if (idsplit.length > 2) {
            $('#' + del).val(idsplit[idsplit.length - 2] + "_" + idsplit[idsplit.length - 1]);
            $('.lauchdelete').click();
            $('#' + del).val('');
        }
    }

代码正常工作，并触发后面的代码。我能看到的唯一区别是对话框控件，但为什么呢？有没有办法让控件按预期触发，同时按下模式对话框删除按钮？

JQuery UI模式对话框触发ASP.Net更新面板控件

打开对话框后，您应该确保删除按钮在表单标记中。jQueryUI喜欢在body标记的末尾转储对话框内容，这将把它的内容放在form标记之外。因此，如果在form标记之外的元素上调用click，则不会触发回发事件。

一些你可以尝试的东西：

  1. 打开对话框后检查了dom。删除按钮是在表单标记内部还是外部？如果它在外面，那就是你的问题。分离对话框，然后将其重新附加到表单标签中：

    var$d=$（'#deleteconfirm'）.destrict（）；

    $（'form'）.append（$d）；

  2. 从删除事件处理程序返回false

  3. 将"$（'.lauchdelete'）.click（）"包装在0:的setTimeout中

    setTimeout（function（）{$（'.lauchdelete'）.click（）；｝，0）；

  4. 而不是调用.click（）；直接致电__doPostBack：

    var$deleteButton=$（'launchDelete'）；

    var delBtnUniqueName=$deleteButton.attr（'name'）；

    __doPostBack（delBtnUniqueName）；

使用appendto 后，您可以从此处获得帮助

示例代码

$("#deleteconfirm").parent().appendTo($("form:first"));

一切看起来都很好。当你按下按钮时，你能控制对象看看它是否找到它吗？

buttons: {
    "Delete": function () {
        // What's the output here?
        console.log($('.lauchdelete'));
    }
}
相关文章：