jQuery用户界面对话框。NET按钮回发

我有一个jQuery UI对话框工作在我的ASP。NET页面:

jQuery(function() {
jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
});


jQuery(document).ready(function() {
jQuery("#button_id").click(function(e) {
jQuery('#dialog').dialog('option', 'position', [e.pageX + 10, e.pageY + 10]);
jQuery('#dialog').dialog('open');
});
});

我的div。

<div id="dialog" style="text-align: left;display: none;">
<asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" />
</div>

但是btnButton_Click从来没有被调用…我怎么解决这个问题呢?

更多信息:我添加了这段代码来移动div到窗体:

jQuery("#dialog").parent().appendTo(jQuery("form:first"));

但还是没有成功……

178591 次浏览
小开

这主要是因为jQuery使用DOM将对话框移到表单标记之外。将其移回表单标签内，应该可以正常工作。您可以通过检查Firefox中的元素来看到这一点。

小开
最佳答案

你离解很近了，只是拿错了对象。应该是这样的:

jQuery(function() {
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
dlg.parent().appendTo(jQuery("form:first"));
});
小开
正确移动对话框，但是你应该只在打开对话框的按钮中这样做。 下面是jQuery UI示例中的一些附加代码:

$('#create-user').click(function() {
$("#dialog").parent().appendTo($("form:first"))
$('#dialog').dialog('open');
})

在对话框中添加你的asp:button，它运行良好。

注意:您应该将<按钮>更改为<input type=按钮>，以防止单击“创建用户”按钮后回发。

小开 
$('#divname').parent().appendTo($("form:first"));

使用这段代码解决了我的问题，它在所有浏览器，Internet Explorer 7, Firefox 3和谷歌Chrome上都能运行。我开始喜欢jQuery…这是一个很酷的框架。

我也测试了部分渲染，这正是我想要的。< em >很棒!< / em >

<script type="text/javascript">
function openModalDiv(divname) {
$('#' + divname).dialog({ autoOpen: false, bgiframe: true, modal: true });
$('#' + divname).dialog('open');
$('#' + divname).parent().appendTo($("form:first"));
}


function closeModalDiv(divname) {
$('#' + divname).dialog('close');
}
</script>
...
...
<input id="Button1" type="button" value="Open 1" onclick="javascript:openModalDiv('Div1');" />
...
...
<div id="Div1" title="Basic dialog" >
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
postback test<br />
<asp:Button ID="but_OK" runat="server" Text="Send request" /><br />
<asp:TextBox ID="tb_send" runat="server"></asp:TextBox><br />
<asp:Label ID="lbl_result" runat="server" Text="prova" BackColor="#ff0000></asp:Label>
</ContentTemplate>
<asp:UpdatePanel>
<input id="Button2" type="button" value="cancel" onclick="javascript:closeModalDiv('Div1');" />
</div>
小开

Robert MacLean给出的答案有99%的正确率。但是，像我这样的人可能需要添加的唯一内容是，每当需要打开这个jQuery对话框时，不要忘记将它附加到parent。像下图:

var dlg = $('#questionPopup')。对话框(“开放”); dlg.parent () .appendTo($(“形式:第一”)),< /代码> < / p >

小开

顺便说一句，第一个技巧对我没用。

然而，那篇博客文章中的技巧做到了:

http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html

具体来说，将这个添加到对话框声明中:

  open: function(type,data) {
$(this).parent().appendTo("form");
}
小开

上面1718775 < a href = " https://stackoverflow.com/questions/757232/jquery-ui-dialog-with-asp-net-button-postback/1718775 " >肯< / >的答案对我有用。这个公认答案的问题在于，它只适用于页面上只有一个模态的情况。如果你有多个情态动词，你需要在初始化对话框的时候在“open”参数中做，而不是在初始化对话框之后。

open: function(type,data) { $(this).parent().appendTo("form"); }

如果您按照第一个接受的答案对多个情态句进行处理，那么您将只会得到页面上的最后一个情态句正确地触发回发，而不是所有回发。

小开

太棒了!这解决了我的ASP:Button事件没有在jQuery模态内发射的问题。请注意，下面使用jQuery UI模态允许按钮事件触发:

// Dialog Link
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
$('#dialog').parent().appendTo($("form:first"))
return false;
});

下面这一行是让它工作的关键!

$('#dialog').parent().appendTo($("form:first"))
小开

我不想在我的项目中的每个对话框都要解决这个问题，所以我创建了一个简单的jQuery插件。这个插件仅用于打开新的对话框并将它们放置在ASP。网表单中:

(function($) {
/**
* This is a simple jQuery plugin that works with the jQuery UI
* dialog. This plugin makes the jQuery UI dialog append to the
* first form on the page (i.e. the asp.net form) so that
* forms in the dialog will post back to the server.
*
* This plugin is merely used to open dialogs. Use the normal
* $.fn.dialog() function to close dialogs programatically.
*/
$.fn.aspdialog = function() {
if (typeof $.fn.dialog !== "function")
return;


var dlg = {};


if ( (arguments.length == 0)
|| (arguments[0] instanceof String) ) {
// If we just want to open it without any options
// we do it this way.
dlg = this.dialog({ "autoOpen": false });
dlg.parent().appendTo('form:first');
dlg.dialog('open');
}
else {
var options = arguments[0];
options.autoOpen = false;
options.bgiframe = true;


dlg = this.dialog(options);
dlg.parent().appendTo('form:first');
dlg.dialog('open');
}
};
})(jQuery);</code></pre>

因此，要使用插件，首先加载jQuery UI，然后加载插件。然后你可以做如下的事情:

$('#myDialog1').aspdialog(); // Simple
$('#myDialog2').aspdialog('open'); // The same thing
$('#myDialog3').aspdialog({title: "My Dialog", width: 320, height: 240}); // With options!

需要明确的是，这个插件假定你已经准备好在调用它时显示对话框。

小开

我只是在创建对话框后添加了以下一行:

$(".ui-dialog").prependTo("form");
小开

这对我来说是最明确的解决方案

var dlg2 = $('#dialog2').dialog({
position: "center",
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});


dlg2.parent().appendTo('form:first');
$('#dialog_link2').click(function(){
dlg2.dialog('open');

dlg2中的所有内容都可以插入到数据库中。不要忘记改变dialog变量来匹配你的。

小开

在使用modal:true选项时，使用这一行来实现此工作。

open: function (type, data) {
$('.ui-widget-overlay').appendTo("form"); $(this).parent().appendTo("form");
},
小开
$('#dialog').parent().appendTo($("form:first"))解决方案在IE 9中工作良好。但是在ie8中，它可以让对话框直接出现和消失。你不能看到这个，除非你放置一些警告，这样对话框似乎永远不会出现。 我花了一个上午的时间找到了一个在两个版本上都有效的解决方案，而在版本8和9上都有效的唯一解决方案是:

$(".ui-dialog").prependTo("form");

希望这能帮助其他有同样问题的人

小开

准确的解是;

$("#dialogDiv").dialog({ other options...,
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
小开

ASP。在你的ASP. NET中使用UseSubmitBehavior="false"。NET按钮:

<asp:Button ID="btnButton" runat="server"  Text="Button" onclick="btnButton_Click" UseSubmitBehavior="false" />

参考:按钮。UseSubmitBehavior属性< / >

小开

注意，在jQuery UI v1.10中有一个额外的设置。已经添加了一个“> < a href = " http://api.jqueryui.com/dialog/ option-appendTo appendTo < / >设置，以解决您用于将元素重新添加到表单中的ASP。网解决方案。

试一试:

$("#dialog").dialog({
autoOpen: false,
height: 280,
width: 440,
modal: true,
**appendTo**:"form"
});
小开

我知道这是一个老问题，但是对于任何有同样问题的人来说，有一个更新和更简单的解决方案:在jQuery UI 1.10.0中引入了“appendTo”选项

< a href = " http://api.jqueryui.com/dialog/ option-appendTo " > http://api.jqueryui.com/dialog/ option-appendTo < / >

$("#dialog").dialog({
appendTo: "form"
....
});

提交答案