Diálogo da UI do jQuery com postagem do botão ASP.NET


295

Eu tenho uma caixa de diálogo jQuery UI funcionando muito bem na minha 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');
    });
});

Minha div:

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

Mas o btnButton_Click nunca é chamado ... Como posso resolver isso?

Mais informações: adicionei este código para mover div para o formulário:

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

Mas ainda sem sucesso ...


LOL ... no começo eu pensei que você roubou minha pergunta, mas depois eu vi você perguntar primeiro. Eu fiz a mesma pergunta para FancyBox - stackoverflow.com/questions/2686362/…
nikib3ro

1
Há uma resposta melhor do que chamar explicitamente appendTo (). Verifique este stackoverflow.com/a/20589833/2487549
Foreever

Respostas:


314

Você está perto da solução, apenas obtendo o objeto errado. Deve ser assim:

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

e se tiver uma opção modal definida como true? no meu caso, a solução é perfeita, mas sem o modal - com o modal, o div criado para o efeito modal é o lugar sobre o diálogo com o método parent ()
SammuelMiranda

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

O uso desse código resolveu meu problema e funcionou em todos os navegadores, Internet Explorer 7, Firefox 3 e Google Chrome. Começo a amar o jQuery ... É uma estrutura legal.

Também testei com renderização parcial, exatamente o que estava procurando. Ótimo!

<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 exemplo completo me ajudou a reunir o que estava faltando ao encontrar esse problema. Obrigado!
Dillie-O

34

FWIW, a forma: primeira técnica não funcionou para mim.

No entanto, a técnica nesse artigo do blog fez:

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

Especificamente, adicionando isso à declaração de diálogo:

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

1
se você não fizer isso em um painel de atualização, esse método é a única maneira de conseguir que meus botões (que eu quero fazer uma postagem completa) funcionem.
Merritt

+1 para este é o único código que funcionou para mim. não estou usando o painel de atualização. OBRIGADO!!! salvou o meu dia!
Albert Laure

+1: Isso funcionou para mim quando as soluções acima não funcionaram. E eu estou usando o UpdatePanel.
Vivian River

A solução mais simples e melhor para obter a caixa de diálogo novamente no comportamento Formulário para PostBack.
GoldBishop

28

Esteja ciente de que há uma configuração adicional na jQuery UI v1.10. Foi adicionada uma configuração appendTo , para resolver a solução alternativa do ASP.NET que você está usando para adicionar novamente o elemento ao formulário.

Experimentar:

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

Isso não funciona para mim com 2 caixas de diálogo jquery na mesma página. Eu gostaria que fosse, pois é a solução certa.
Matthew Bloqueio

3
As técnicas parent (). AppendTo ("form") não funcionaram com uma caixa de diálogo modal porque a div de sobreposição fica fora do formulário e acaba cobrindo a caixa de diálogo (tornando-a inoperante). Usando essa nova propriedade appendTo com o jquery 1.10, a div de sobreposição foi colocada no lugar certo, para que o diálogo modal funcionasse corretamente.
humbads

Esta deve ser a resposta correta agora, porque a biblioteca da UI do jquery foi atualizada para adicionar a configuração appendTo. Obrigado @Mike me salvou muito tempo.
AJP

24

A resposta de Ken acima fez o truque para mim. O problema com a resposta aceita é que ela só funciona se você tiver um único modal na página. Se você possui vários modais, precisará fazê-lo em linha no parâmetro "aberto" ao inicializar a caixa de diálogo, não após o fato.

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

Se você fizer o que a primeira resposta aceita informar com vários modais, você só obterá o último modal na página funcionando disparando postbacks corretamente, não todos.


1
+1 Absolutamente verdadeiro. Corrigido meu problema para mim. Mas por que isso é necessário? Eu não consigo descobrir isso.
Colin

21

Principalmente porque o jQuery move a caixa de diálogo para fora das tags de formulário usando o DOM . Mova-o de volta para dentro das tags de formulário e deve funcionar bem. Você pode ver isso inspecionando o elemento no Firefox.


Eu mudei para dentro do formulário: jQuery ("# ​​dialog"). Parent (). AppendTo (jQuery ("form: first")); Mas o problema ainda está lá ... #
Paul

Você não está registrando nenhum outro evento jquery no objeto btnButton, está?
Chad Ruppert

e quando você está colocando de volta no formulário? imediatamente após aberto?
Chad Ruppert

jQuery (function () {jQuery ("# ​​dialog"). dialog ({arrastável: true, redimensionável: true, show: 'Transfer', hide: 'Transfer', width: 320, autoOpen: false, minHeight: 10, minwidth : JQuery ("# ​​dialog"). Parent (). AppendTo (jQuery ("form: first"));}); é o que deveria ser.
Chad Ruppert

e ainda sem alegria? no mínimo, quando você clica no botão, se em um formulário, deve causar uma postagem. Você está recebendo erros de JS? O modal não está fechando ou nada?
Chad Ruppert

8

Eu não queria ter que solucionar esse problema em todas as caixas de diálogo do meu projeto, então criei um simples plugin jQuery. Este plugin é apenas para abrir novas caixas de diálogo e colocá-las no formulário 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>

Portanto, para usar o plug-in, você primeiro carrega a interface do usuário do jQuery e depois o plug-in. Então você pode fazer algo como o seguinte:

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

Para ficar claro, este plug-in pressupõe que você está pronto para mostrar a caixa de diálogo quando a chama.



7

Fantástico! Isso resolveu meu problema com o evento ASP: Button não sendo acionado dentro do jQuery modal. Observe que o uso do modal da interface do usuário do jQuery permite o acionamento do evento do botão:

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

A seguinte linha é a chave para fazer isso funcionar!

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

3

Acabei de adicionar a seguinte linha depois que você criou a caixa de diálogo:

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

3

Esta foi a solução mais clara para mim

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 o conteúdo dentro dele dlg2estará disponível para inserção no seu banco de dados. Não se esqueça de alterar a dialogvariável para corresponder à sua.



1

A solução de Robert MacLean com maior número de votos está 99% correta. Mas a única adição que alguém pode exigir, como eu fiz, é sempre que você precisar abrir esse diálogo do jQuery, não se esqueça de anexá-lo ao pai. Como abaixo:

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


como indicado na minha resposta acima mais de 2 anos atrás, mas obrigado mesmo assim!
24415 Mike

1

Use esta linha para fazer isso funcionar enquanto usa a opção modal: true.

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

1

A $('#dialog').parent().appendTo($("form:first"))solução funciona bem no IE 9. Mas no IE 8, a caixa de diálogo aparece e desaparece diretamente. Você não pode ver isso, a menos que coloque alguns alertas, de modo que parece que a caixa de diálogo nunca aparece. Passo uma manhã encontrando uma solução que funciona nas duas versões e a única solução que funciona nas versões 8 e 9 é:

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

Espero que isso ajude outras pessoas que estão enfrentando o mesmo problema


3
Eu acredito que você pode apenas definir a UseSubmitBehaviorpropriedade de Button como falsevalor. Desta forma, você não precisa de nenhum appendou prependchamadas.
Yuriy Rozhovetskiy

1

Mova a caixa de diálogo da maneira certa, mas você deve fazê-lo apenas no botão que abre a caixa de diálogo. Aqui está um código adicional no exemplo da UI do jQuery:

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

Adicione o seu asp:buttondentro da caixa de diálogo, e ele funciona bem.

Nota: você deve alterar o <botão> para <tipo de entrada = botão> para impedir a postagem após clicar no botão "criar usuário".


0

A solução exata é;

$("#dialogDiv").dialog({ other options...,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    }
});
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.