jQuery UI Dialog con devolución de botón ASP.NET

Tengo un diálogo de jQuery UI que funciona muy bien en mi página 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'); }); }); 

Mi div:

 

Pero el btnButton_Click nunca se llama … ¿Cómo puedo resolver eso?

Más información: Agregué este código para mover div a la forma:

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

Pero aún sin éxito …

Estás cerca de la solución, solo consigues el objeto equivocado. Debería ser así:

 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")); 

El uso de este código resolvió mi problema y funcionó en todos los navegadores, Internet Explorer 7, Firefox 3 y Google Chrome. Empiezo a amar a jQuery … Es un marco genial.

También he probado con render parcial, exactamente lo que estaba buscando. ¡Estupendo!

  ... ...  ... ... 
postback test


FWIW, la forma: primera técnica no funcionó para mí.

Sin embargo, la técnica en ese artículo de blog lo hizo:

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

Específicamente, agregando esto a la statement del diálogo:

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

Tenga en cuenta que hay una configuración adicional en jQuery UI v1.10. Hay una configuración appendTo que se ha agregado para abordar la solución alternativa de ASP.NET que está utilizando para volver a agregar el elemento al formulario.

Tratar:

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

La respuesta de Ken arriba es lo que hizo el truco. El problema con la respuesta aceptada es que solo funciona si tiene un solo modal en la página. Si tiene múltiples modales, tendrá que hacerlo en línea en el parámetro “abrir” al inicializar el diálogo, no después del hecho.

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

Si haces lo que te dice la primera respuesta aceptada con múltiples modales, solo obtendrás el último modal en la página que funciona correctamente, no todos ellos.

Principalmente se debe a que jQuery mueve el diálogo fuera de las tags de formulario usando el DOM . Vuelva a colocarlo dentro de las tags de formulario y debería funcionar bien. Puedes ver esto inspeccionando el elemento en Firefox.

No quería tener que solucionar este problema para cada diálogo en mi proyecto, así que creé un plugin jQuery simple. Este complemento es meramente para abrir nuevos diálogos y ubicarlos dentro del formulario 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 (ie 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 progtwigtically. */ $.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);

Entonces, para usar el complemento, primero carga la interfaz de usuario de jQuery y luego el complemento. Entonces puedes hacer algo como lo siguiente:

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

Para que quede claro, este complemento supone que está listo para mostrar el diálogo cuando lo llame.

¡Fantástico! Esto resolvió mi problema con ASP: evento de botón que no se activa dentro de jQuery modal. Tenga en cuenta que el uso de la interfaz de usuario de jQuery con lo siguiente permite que el evento de botón se active:

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

¡La siguiente línea es la clave para que esto funcione!

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

Sé que esta es una vieja pregunta, pero para cualquiera que tenga el mismo problema, hay una solución más nueva y simple: se ha introducido una opción “appendTo” en jQuery UI 1.10.0

http://api.jqueryui.com/dialog/#option-appendTo

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

Acabo de agregar la siguiente línea después de crear el cuadro de diálogo:

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

Esta fue la solución más clara para mí

 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'); 

Todo el contenido dentro de dlg2 estará disponible para insertarse en su base de datos. No olvides cambiar la variable de dialog para que coincida con la tuya.

Con ASP.NET simplemente use UseSubmitBehavior="false" en su botón ASP.NET:

  

Referencia: Button.UseSubmitBehavior Property

La solución de Robert MacLean con el mayor número de votos es 99% correcta. Pero la única adición que alguien podría necesitar, como yo lo hice, es que cada vez que necesite abrir este diálogo de jQuery, no olvide agregarlo al padre. Como abajo:

var dlg = $('#questionPopup').dialog( 'open'); dlg.parent().appendTo($("form:first"));

Use esta línea para hacer que esto funcione mientras usa la opción modal: true.

 open: function (type, data) { $('.ui-widget-overlay').appendTo("form"); $(this).parent().appendTo("form"); }, 

La solución $('#dialog').parent().appendTo($("form:first")) funciona bien en IE 9. Pero en IE 8 hace que el diálogo aparezca y desaparezca directamente. No puede ver esto a menos que coloque algunas alertas para que parezca que el diálogo nunca aparece. Paso una mañana buscando una solución que funcione en ambas versiones y la única solución que funciona en ambas versiones 8 y 9 es:

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

Espero que esto ayude a otros que están luchando con el mismo problema

Mueva el diálogo de la manera correcta, pero debe hacerlo solo en el botón que abre el cuadro de diálogo. Aquí hay un código adicional en la muestra de jQuery UI:

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

Agregue su asp:button dentro del cuadro de diálogo, y funciona bien.

Nota: debe cambiar el a para evitar la devolución de datos después de hacer clic en el botón “crear usuario”.

La solución exacta es;

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