JQuery UI Диалог с обратной передачей кнопки ASP.NET
У меня есть 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"));
Но все же безуспешно...
17 ответов
Вы близки к решению, просто получаете не тот объект. Должно быть так:
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");
}
Имейте в виду, что в jQuery UI v1.10 есть дополнительная настройка. Был добавлен параметр appendTo, который используется для обхода обходного пути ASP.NET, который вы используете для повторного добавления элемента в форму.
Пытаться:
$("#dialog").dialog({
autoOpen: false,
height: 280,
width: 440,
modal: true,
**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, а затем плагин. Затем вы можете сделать что-то вроде следующего:
$('#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/
$("#dialog").dialog({
appendTo: "form"
....
});
Фантастика! Это решило мою проблему с ASP: событие Button не запускалось внутри модального jQuery. Обратите внимание: использование модального интерфейса jQuery со следующим разрешает запуск события кнопки:
// 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 переменная, чтобы соответствовать вашему.
Я только что добавил следующую строку после того, как вы создали диалог:
$(".ui-dialog").prependTo("form");
С ASP.NET просто используйте UseSubmitBehavior="false" в вашей кнопке ASP.NET:
<asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" UseSubmitBehavior="false" />
Используйте эту строку, чтобы сделать эту работу, используя опцию 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");
Надеюсь, что это помогает другим, которые борются с той же проблемой
Решение от Роберта Маклина с наибольшим количеством голосов правильное на 99%. Но единственное дополнение, которое может потребоваться, как и я, это когда вам нужно открыть это диалоговое окно jQuery, не забудьте добавить его к родителю. Как ниже:
var dlg = $('#questionPopup').dialog( 'open');
dlg.parent().appendTo($("form:first"));
Переместите диалоговое окно в правильном направлении, но вы должны сделать это только при нажатии кнопки, открывающей диалоговое окно. Вот некоторый дополнительный код в образце пользовательского интерфейса jQuery:
$('#create-user').click(function() {
$("#dialog").parent().appendTo($("form:first"))
$('#dialog').dialog('open');
})
Добавьте свой asp:button внутри диалога, и он работает хорошо.
Примечание: вы должны изменить
Точное решение есть;
$("#dialogDiv").dialog({ other options...,
open: function (type, data) {
$(this).parent().appendTo("form");
}
});