Cuadro de diálogo jQuery UI con devolución de botones ASP.NET


295

Tengo un jQuery UI Dialog 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:

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

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

Más información: agregué este código para mover div al formulario:

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

Pero aún sin éxito ...


LOL ... al principio pensé que robaste mi pregunta, pero luego vi que primero preguntaste. He hecho la misma pregunta para FancyBox - stackoverflow.com/questions/2686362/…
nikib3ro

1
Hay una mejor respuesta que llamar explícitamente appendTo (). Compruebe esto stackoverflow.com/a/20589833/2487549
Foreever

Respuestas:


314

Estás cerca de la solución, solo obtienes 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"));
});

¿Qué pasa si tiene una opción modal establecida en verdadero? en mi caso, la solución es perfecta, pero sin el modal: con el modal, el div creado para el efecto modal se coloca sobre el diálogo con el método parent ()
SammuelMiranda

37
$('#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 jQuery ... Es un marco genial.

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

<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>

Este ejemplo completo me ayudó a reconstruir lo que me faltaba al encontrarme con este problema. ¡Gracias!
Dillie-O

34

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

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

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

Específicamente, agregando esto a la declaración de diálogo:

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

1
si no lo hace en un panel de actualización, este método es la única forma en que podría hacer que mis botones (que quiero hacer una devolución de datos completa) funcionen.
Merritt

+1 para esto, este es el único código que funcionó para mí. No estoy usando el panel de actualización. ¡¡¡GRACIAS!!! me salvó el día!
Albert Laure el

+1: Esto funcionó para mí cuando las soluciones anteriores no funcionaron. Y estoy usando UpdatePanel.
Vivian River

La solución más simple y mejor para volver a colocar el cuadro de diálogo en el formulario para el comportamiento PostBack.
GoldBishop

28

Tenga en cuenta que hay una configuración adicional en jQuery UI v1.10. Se ha agregado una configuración appendTo 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"
});

Esto no funciona para mí con 2 cuadros de diálogo jquery en la misma página. Ojalá lo hiciera, ya que es la solución correcta.
Matthew Lock

3
Las técnicas parent (). AppendTo ("formulario") no funcionaron con un cuadro de diálogo modal porque el div de superposición permanece fuera del formulario y termina cubriendo el cuadro de diálogo (haciéndolo inoperable). Al usar esta nueva propiedad appendTo con jquery 1.10, el div de superposición se colocó en el lugar correcto, por lo que el diálogo modal funcionó correctamente.
humbads

Esta debería ser la respuesta correcta ahora porque la biblioteca jquery UI se ha actualizado para agregar la configuración appendTo Gracias @ Mike me ahorró mucho tiempo.
AJP

24

La respuesta de Ken arriba hizo el truco para mí. El problema con la respuesta aceptada es que solo funciona si tiene un solo modal en la página. Si tiene varios modales, deberá hacerlo en línea en el parámetro "abierto" mientras inicializa el diálogo, no después del hecho.

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

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


1
+1 Absolutamente cierto. Solucionó mi problema para mí. ¿Pero por qué es necesario? No puedo entender eso.
Colin

21

Principalmente es porque jQuery mueve el diálogo fuera de las etiquetas de formulario usando el DOM . Vuelva a colocarlo dentro de las etiquetas de formulario y debería funcionar bien. Puede ver esto inspeccionando el elemento en Firefox.


Lo moví dentro de form: jQuery ("# ​​dialog"). Parent (). AppendTo (jQuery ("form: first")); Pero el problema sigue ahí ...
Paul

No estás registrando ningún otro evento jquery en el objeto btnButton, ¿verdad?
Chad Ruppert el

y cuando lo vuelves a poner en el formulario? inmediatamente después de abrir?
Chad Ruppert el

jQuery (function () {jQuery ("# ​​dialog"). dialog ({draggable: true, redimensionable: true, show: 'Transfer', hide: 'Transfer', width: 320, autoOpen: false, minHeight: 10, minwidth : 10}); jQuery ("# ​​dialog"). Parent (). AppendTo (jQuery ("form: first"));}); es lo que debería ser.
Chad Ruppert el

y todavía no hay alegría? al menos cuando hace clic en el botón, si está en un formulario, debería causar una publicación. ¿Estás recibiendo errores de JS? ¿El modal no se cierra ni nada?
Chad Ruppert el

8

No quería tener que solucionar este problema para cada diálogo en mi proyecto, así que creé un simple complemento jQuery. Este complemento es simplemente para abrir nuevos cuadros de diálogo y colocarlos 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 (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>

Entonces, para usar el complemento, primero cargue jQuery UI 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 ser claros, este complemento supone que está listo para mostrar el cuadro de diálogo cuando lo llame.



7

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

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

3

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

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

3

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 del dlg2estará disponible para insertar en su base de datos. No olvides cambiar la dialogvariable para que coincida con la tuya.



1

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 requerir, como lo hice yo, es que cada vez que necesite abrir este cuadro de diálogo jQuery, no olvide agregarlo a los padres. Como abajo:

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


como se indicó en mi respuesta anterior hace más de 2 años, ¡pero gracias de todos modos!
Mike

1

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

1

La $('#dialog').parent().appendTo($("form:first"))solución 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, por lo que parece que el cuadro de diálogo nunca aparece. Me 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.


3
Creo que puede establecer la UseSubmitBehaviorpropiedad de Button en falsevalor. De esta manera no necesitas ninguna appendo prependllamadas.
Yuriy Rozhovetskiy

1

Mueva el cuadro de 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:buttondentro del diálogo, y se ejecuta bien.

Nota: debe cambiar el <botón> a <input type = button> para evitar la devolución de datos después de hacer clic en el botón "crear usuario".


0

La solución exacta es;

$("#dialogDiv").dialog({ other options...,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    }
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.