jQuery对话框+ ASP.NET按钮 - 奇怪的行为

Having this div:

有这个div:

<div id="advSearchDialog" style="visibility:hidden;">
    <xx:search ID="searchUC" runat="server" />
</div>

And a button:

还有一个按钮:

<input type="button" id="btnAdvSearch" value="Search" />

I turn it into a jQuery dialog, where the button opens the dialog:

我把它变成一个jQuery对话框,按钮打开对话框:

$(document).ready(function() {
    $('#advSearchDialog').dialog({
        autoOpen: false,
        height: 500,
        width: 600,
        modal: true,
        bgiframe: true,
        title: 'Avanceret søgning',
        open: function(type, data) {
            $(this).parent().appendTo("form");
        }
    });

    $('#btnAdvSearch').click(function() {
        $('#advSearchDialog').css('visibility', 'visible');
        $('#advSearchDialog').dialog('open');
    });
});

Using ASP.NET, I get a problem.

使用ASP.NET,我遇到了问题。

If I push some other button on the ASP.NET page (inside an update panel), and after that clicks the btnAdvSearch button, nothing happens. Why is that?

如果我按下ASP.NET页面上的其他按钮(在更新面板内),然后单击btnAdvSearch按钮,则没有任何反应。这是为什么?

Thanks in advance

提前致谢

2 个解决方案

#1

maybe the partial page refresh removes your click event, hard to say without seeing the whole page.

也许部分页面刷新会删除您的点击事件,很难说没有看到整个页面。

the solutions to that problem would be using jquery live events http://docs.jquery.com/Events/live

该问题的解决方案是使用jquery现场活动http://docs.jquery.com/Events/live

hth

#2

Check the emitted HTML using firebug or somthing similar and you will probably notice that your button is no longer inside the form tags and is at the end of the body tag.

使用类似于firebug或类似的东西检查发出的HTML,您可能会注意到您的按钮不再位于表单标记内,并且位于body标记的末尾。

In you're OK button callback you can use something like

在你是OK按钮回调你可以使用类似的东西

dialogBox.appendTo($('#FormIdHere'));

dialogBox is a variable set as so

dialogBox是一个如此设置的变量

var dialogBox = $('#DialogDiv').dialog({ autoOpen: false });

This should add your button back into the form.

这应该将您的按钮添加回表单。

EDIT:

Here is a code snippet I've recently used (all the code below is fired within an onload function but reasonPostBack must be declared outside the onload function)

这是我最近使用的代码片段(下面的所有代码都是在onload函数中触发但是必须在onload函数之外声明reasonPostBack)

var button = $('input.rejectButton');
reasonPostBack = button.attr('onclick');
button.removeAttr('onclick');

var dialogBox = $('#ReasonDiv').dialog({ autoOpen: false, title: 'Please enter a reason', modal: true, bgiframe: true, buttons: { "Ok": function() {

            if ($('input.reasonTextBox').val().length > 0) {
                $(this).dialog('close');
                dialogBox.appendTo($('#theform'));
                reasonPostBack();
            }
            else 
            {
                  alert('You must enter a reason for rejection');
            }
        }
    }
});


button.click(function() {
    dialogBox.dialog('open');
    return false;
});

First i take a reference to the .Net postback with

首先,我参考.Net回发

var reasonPostBack = button.attr('onclick');

and hold it for later then strip the click event from the button to stop the post back ocurring "automatically". I then build the dialog box and add an anonymous function for the OK button, this runs my code to test if there is anything in a text box, if there isn't it simply alerts the user otherwise it;

并保留它以便稍后从按钮中剥离点击事件以停止后退“自动”发布。然后我构建对话框并为OK按钮添加一个匿名函数,这将运行我的代码来测试文本框中是否有任何内容,如果没有,它只是提醒用户,否则它;

Closes the div

关闭div

$(this).dialog('close');

Adds the div back inside the form tags ready for the post back

在表格标签内添加div,准备回发

dialogBox.appendTo($('#theform'));

and then calls the original postback

然后调用原始回发

reasonPostBack();

Finally the last bit of code

最后一点代码

button.click(function() {
    dialogBox.dialog('open');
    return false;
});

adds our own event handler to the .Net button to open the dialog that was instantiated earlier.

将我们自己的事件处理程序添加到.Net按钮以打开之前实例化的对话框。

HTH

OneSHOT

#1