Boîte de dialogue jQuery UI avec le bouton ASP.NET

Question

J'ai une boîte de dialogue jQuery UI fonctionnant très bien sur ma page 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');
    });
});
 

Ma div:

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

Mais le btnButton_Click n'est jamais appelé ... Comment puis-je résoudre ça?

Plus d'informations: J'ai ajouté ce code pour déplacer div en forme:

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

Mais toujours sans succès ...

Answer 1

Vous êtes proche de la solution, juste obtenir le mauvais objet. Ça devrait être comme ça:

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

Answer 2

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

En utilisant ce code a résolu mon problème et cela a fonctionné dans chaque navigateur, Internet Explorer 7, Firefox 3 et Google Chrome. Je commence à aimer jQuery ... C'est un cadre sympa.

J'ai aussi testé avec un rendu partiel, exactement ce que je cherchais. Génial!

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

Answer 3

FWIW, la forme: la première technique n'a pas fonctionné pour moi.

Cependant, la technique dans cet article de blog a fait:

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

Plus précisément, en ajoutant ceci à la déclaration de dialogue:

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

Answer 4

Sachez qu'il existe un paramètre supplémentaire dans jQuery UI v1.10. Il existe un paramètre appendTo qui a été ajouté pour résoudre la solution de contournement ASP.NET que vous utilisez pour ajouter de nouveau l'élément au formulaire.

Essayer:

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

Answer 5

ken's réponse ci-dessus a fait l'affaire pour moi. Le problème avec la accepté de répondre, c'est qu'il ne fonctionne que si vous avez un seul modal sur la page. Si vous avez plusieurs auxiliaires modaux, vous aurez besoin pour le faire en ligne dans le "ouvrir" param lors de l'initialisation du dialogue, et non pas après le fait.

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

Si vous faites ce que la première a accepté de répondre à vous indique avec plusieurs des modaux, vous n'obtiendrez que le dernier modal sur la page de travail le tir publications correctement, pas tous d'entre eux.