[英]jQuery UI Dialog with ASP.NET button postback
我有一個jQuery UI Dialog在我的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"));
但仍然沒有成功......
你接近解決方案,只是得到錯誤的對象。 它應該是這樣的:
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"));
});
$('#divname').parent().appendTo($("form:first"));
使用此代碼解決了我的問題,它適用於每個瀏覽器,Internet Explorer 7,Firefox 3和Google Chrome。 我開始喜歡jQuery ......這是一個很酷的框架。
我也測試過部分渲染,正是我正在尋找的東西。 大!
<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>
FWIW,形式:第一種技術對我不起作用。
但是,該博客文章中的技術做到了:
http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html
具體來說,將其添加到對話框聲明中:
open: function(type,data) {
$(this).parent().appendTo("form");
}
肯的上面的答案為我做了訣竅。 接受的答案的問題是它只有在頁面上有一個模態時才有效。 如果你有多個模態,你需要在初始化對話框時在“open”參數中內聯,而不是在事后。
open: function(type,data) { $(this).parent().appendTo("form"); }
如果你做的第一個接受的答案告訴你多個模態,你只會得到頁面上的最后一個模式正確地觸發回發,而不是全部。
主要是因為jQuery使用DOM將對話框移動到表單標記之外。 將其移回到表單標記內,它應該可以正常工作。 你可以通過檢查Firefox中的元素來看到這一點。
我不想為我的項目中的每個對話框解決這個問題,所以我創建了一個簡單的jQuery插件。 此插件僅用於打開新對話框並將它們放在ASP.NET表單中:
(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!
需要說明的是,此插件假定您在調用對話框時已准備好顯示對話框。
我知道這是一個老問題,但對於任何有相同問題的人來說,有一個更新更簡單的解決方案:jQuery UI 1.10.0中引入了“appendTo”選項
http://api.jqueryui.com/dialog/#option-appendTo
$("#dialog").dialog({
appendTo: "form"
....
});
太棒了! 這解決了我的ASP問題:按鈕事件沒有在jQuery模式中觸發。 請注意,使用帶有以下內容的jQuery UI模式可以觸發按鈕事件:
// Dialog Link
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
$('#dialog').parent().appendTo($("form:first"))
return false;
});
以下行是實現此功能的關鍵!
$('#dialog').parent().appendTo($("form:first"))
這對我來說是最清晰的解決方案
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
變量以匹配您的dialog
變量。
使用ASP.NET只需在ASP.NET按鈕中使用UseSubmitBehavior="false"
:
<asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" UseSubmitBehavior="false" />
我在創建對話框后添加了以下行:
$(".ui-dialog").prependTo("form");
Robert MacLean獲得最高票數的解決方案是正確的99%。 但是,正如我所做的那樣,有人可能需要的唯一補充是,無論何時需要打開這個jQuery對話框,都不要忘記將它附加到父級。 如下所示:
var dlg = $('#questionPopup').dialog( 'open'); dlg.parent().appendTo($("form:first"));
使用modal:true選項時,使用此行可以完成此操作。
open: function (type, data) {
$('.ui-widget-overlay').appendTo("form"); $(this).parent().appendTo("form");
},
$('#dialog').parent().appendTo($("form:first"))
解決方案在IE 9中運行正常。但在IE 8中,它使對話框顯示並直接消失。 除非您發出一些警報,否則您看不到此對話框,因此您無法看到此信息。 我花了一個上午找到適用於這兩個版本的解決方案,唯一適用於版本8和9的解決方案是:
$(".ui-dialog").prependTo("form");
希望這有助於其他與同一問題相關的人
以正確的方式移動對話框,但您應該只在打開對話框的按鈕中執行此操作。 以下是jQuery UI示例中的一些其他代碼:
$('#create-user').click(function() {
$("#dialog").parent().appendTo($("form:first"))
$('#dialog').dialog('open');
})
在對話框中添加你的asp:button
,它運行良好。
注意:您應該將<button>更改為<input type = button>以防止在單擊“創建用戶”按鈕后進行回發。
確切的解決方案是;
$("#dialogDiv").dialog({ other options...,
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.