Fancybox - ASP.NET le bouton ne fonctionne pas

J'ai juste déterminé à l'aide de Firebug que lorsque Fancybox fenêtre est créée, elle prend en fait l'ensemble de mes ASP.NET contrôles (contenues dans la balise DIV) et les met à l'extérieur de la FORME de la balise. Donc je suppose que c'est la raison pourquoi ASP.NET le bouton ne fait rien - il est placé à l'extérieur de la forme.

Donc, avez-vous des suggestions sur comment je peux empêcher cela (ou le faire que ASP.NET bouton de travail), d'autres que l'aide de complètement différent de dialogue modale?

EDIT: OK, les gens sont des rapports que certaines propositions de corrections sont de travailler pour eux sur certaines versions. Donc, assurez-vous de lire toutes les réponses /faites défiler vers le bas pour savoir comment résoudre ce problème sur différents Fancybox versions.

  • m'a sauvé une question, j'étais sur le point de demander à cet. l'amour de manière automatique une question relative à l'inscription.
  • J'ai essayé de déboguer ce pendant 6 heures. Je suis content d'avoir enfin trouvé.
  • Ceux qui sont encore confrontés à la suite de problème ce lien.
InformationsquelleAutor nikib3ro | 2010-04-21
  1. 33

    Vous avez besoin de changer cela (quelque part autour de la ligne de 719 jquery.fancybox-1.3.1.js):

    $('body').append(
    tmp         = $('<div id="fancybox-tmp"></div>'),
    loading     = $('<div id="fancybox-loading"><div></div></div>'),
    overlay     = $('<div id="fancybox-overlay"></div>'),
    wrap        = $('<div id="fancybox-wrap"></div>')
        );

    à 

    $('form').append(
    tmp         = $('<div id="fancybox-tmp"></div>'),
    loading     = $('<div id="fancybox-loading"><div></div></div>'),
    overlay     = $('<div id="fancybox-overlay"></div>'),
    wrap        = $('<div id="fancybox-wrap"></div>')
);
    • Merci homme; avez-vous aussi des recommandations liées à la partielle de la page de mise à jour lorsque je presse le bouton, je veux juste de la région dans la Fancybox pour se rafraîchir. Dois-je utiliser UpdatePanel? Comment (il fonctionne sous IE, pas dans Firefox)? Avez des pointeurs vers des exemples? Merci!
    • Vous pouvez essayer un panneau de mise à jour, je préfère simplement utiliser de l'ajax de jquery pour une partie de la page des mises à jour. Regarder le jQuery.la méthode load (), il permet de charger un div avec le contenu de l'iframe, etc. Vous pouvez appeler le chargement et le chargement des données dans la fancybox div sur le bouton cliquez sur.
    • +1 Cela a fonctionné pour moi, en utilisant Fancybox 1.3.4.
    • Comme ci - dessus- Fancybox 1.3.4
    • -1 C'est une mauvaise pratique de modifier la 3ème partie de la source des fichiers. Pour la version 2, vérifiez que la réponse de @Myke-Noir pour la meilleure façon de le faire.
    • Pas nécessairement vrai.

    InformationsquelleAutor derek
  2. 19

    Pour toute personne ayant besoin d'une réponse simple à ce problème à l'aide de Fancybox version 2 il y a un moyen beaucoup plus facile de le faire. Tout ce que vous avez à faire est d'ajouter parent: "la forme:d'abord" dans le code, par exemple

        $(document).ready(function () {
        $(".various").fancybox({
            parent: "form:first",
            fitToView: true,
            width: '300px',
            height: '100px',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none',
            modal: false
        });
    });

    puis cela va ajouter la fancybox éléments dans le dom à l'intérieur de la balise form, plutôt qu'à l'intérieur de la balise body.

    • Enfin une réponse qui n'implique pas de modification de la source FancyBox codwe.
    • Mec! Je ne sais pas pourquoi compliqué solution de contournement qui reçoit tout l'amour. Cette réponse a parfaitement fonctionné. Merci beaucoup!
    • Parce que la question a été posté pendant le règne de Fancybox 1 et, comme tels, les options fournies dans cette réponse, étaient présents.
    • Cette juste m'a sauvé des heures de recherche... de la forme:d'abord travaillé en parfaite!
    • Merci, parent: "la forme:d'abord" travaillé parfait pour moi.
    • cela fonctionne comme un charme. Ses une mauvaise chose que cette réponse est ici-bas. Je ne voulais pas voir cette réponse au premier abord. Ce serait bien si cette réponse pourrait être porté à la tête

    InformationsquelleAutor Myke Black
  3. 5

    Fancybox Version 2.1.4

    Modifier ces 2 lignes

    Autour De La Ligne 2069 :

    document.all && !document.querySelector ? $('html') : $('body');

    à

    document.all && !document.querySelector ? $('html') : $('form:first');


    et autour de la Ligne de 1960 :

    this.overlay = $('<div class="fancybox-overlay"></div>').appendTo('body');

    à

    this.overlay = $('<div class="fancybox-overlay"></div>').prependTo('form');

    Vous pouvez également utiliser appendTo mais c'est à vous de voir. Dans mon cas, j'avais besoin de prependTo.

    • Le premier correctif ne semble plus nécessaire, mais le second est toujours un problème. j'ai ouvert un pull request, donc j'espère que ce bogue vont s'en aller.
    • Merci pour cette correction, cela fonctionne DANS TOUTES les versions
    InformationsquelleAutor VRC
  4. 4

    J'ai été à essayer de comprendre ce problème toute la semaine, je n'ai pas vraiment eu de la chance,

    Je viens de tomber sur cet article

    http://usmanshabbir.blogspot.com/2010/10/click-server-button-problem-in-jquery.html

    Qui explique comment obtenir la publication de travailler avec jQuery UI boîte de Dialogue.

    Si ce n'est pas 100% nécessaire pour l'utilisation de fantaisie boîte de cette méthode est certainement la peine d'essayer, il m'a sauvé beaucoup de tracas aujourd'hui.

    InformationsquelleAutor Andrew Cassidy
  5. 4

    Sans modifier la source FancyBox, le mettre après le script FancyBox (en dehors de toute charge des événements!!!):

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/#.#/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-#.#.#.pack.js"></script>
<script type="text/javascript">

    //Override $.fancybox.init to fix ASP.NET PostBack bug;
    var fancyboxInitOld = $.fancybox.init;
    $.fancybox.init = function () {
        fancyboxInitOld.apply(arguments);
        $("#fancybox-tmp, #fancybox-loading, #fancybox-overlay, #fancybox-wrap").appendTo("form:first");
    };

    //Your code ...

</script>
    • Vérifié que cela fonctionne dans Chrome, FireFox et IE. Semble comme une solution privilégiée, car elle n'implique pas de réglage de la réelle scripts eux-mêmes. L'inconvénient, c'est que vous aurez besoin d'ajouter ce bit partout où vous inclure le script vs avoir une mise à jour et il est mis en application à l'échelle.
    InformationsquelleAutor jerone
  6. 2

    jquery.fancybox-1.3.4.js ligne 1040

    //$('body').append(
   $('form').append(
            tmp = $('<div id="fancybox-tmp"></div>'),
            loading = $('<div id="fancybox-loading"><div></div></div>'),
            overlay = $('<div id="fancybox-overlay"></div>'),
            wrap = $('<div id="fancybox-wrap"></div>')
        );

    Œuvres (mes asp:Button ne postback) pour moi sur FF et IE9, merci pour la solution

    InformationsquelleAutor Boris
  7. 2

    Ci-dessus mise à jour ne fonctionne pas pour moi, fancybox est toujours ajouté à l'extérieur de la forme. J'ai ensuite commenté ces 6 lignes jquery.fancybox-1.3.2.js et constaté qu'ils n'étaient pas employés à tous dans mon code.

    J'ai fait une recherche sur le "corps" dans la fancybox fichiers js et il a changé de forme en:

    jquery.fancybox-1.3.2.js (ln 484)

    jquery.fancybox-1.3.2.pack.js (ln 27, ln 41)

    La fancybox est maintenant ajouté à l'écran et les commandes de serveur sont de travail.

    InformationsquelleAutor nd2010
  8. 1

    Fancybox Version: 2.1.2

    Ligne de 1782 jquery.fancybox.js

    Changer cela:

    this.el     = document.all && !document.querySelector ? $('html') : $('body');

    À ceci:

    this.el     = document.all && !document.querySelector ? $('html') : $('form:first');
    InformationsquelleAutor Andy
  9. 1

    J'utilise Fancybox 1.3.4 pour afficher une page aspx dans une fenêtre contextuelle de la page dans la fancybox iframe. Mais le bouton dans le menu contextuel de la page ne cause pas de publication. Je n'ai pas changer quoi que ce soit comme vous l'avez dit avant. Plutôt je n'ai la suite.

     function check() 
 {
            var validated = Page_ClientValidate();
            if (validated) {
                __doPostBack('<%=bur.ClientID%>','');             
                parent.$.fancybox.close();                                                       
                return true;
            }
            else 
            {
                return false;
            }
 }



 <asp:Button ID="bur" runat="server" Text="ser"  
            OnClientClick="check()"   />


protected void bur_Click(object sender,Eventargs e)
{ //put breakpoint here.

}
    InformationsquelleAutor shatharkhan
  10. 0

    Fancybox 1.3.4 en fait de la publication.

    Mais si est fermé dans OnClientClick qui est avant côté serveur, cliquez sur événement il l'habitude de publication .Ce qui est Au dessus est la solution à ce problème.(L'ajout de doPostBack en fonction javascript).

    Normalement Fancybox 1.3.4 n'publication sans aucun changement dans sa .Js fichiers. Mais pour le fermer , besoin d'écrire cette ligne ScriptManager.RegisterClientScriptBlock(this, GetType(), "", "parent.$.fancybox.close();", true); à côté serveur cliquez sur l'événement. Alors seulement les deux serverside événement est appelé et fancybox ferme également.

    Mais Fancybox 2.1.3 (dernière version) ne postback événement après qu'il est fermé dans OnClientClick.

    InformationsquelleAutor shatharkhan
  11. 0

    Si l'actualisation de la mère est une solution qui sert le but, vous pouvez actualiser onClosed:

    $(".fancybox").fancybox({
  'onClosed': function() {
   parent.location.reload(true);
  } 
});
    InformationsquelleAutor Israel Margulies
  12. 0

    Sans aucun changement dans fancybox bibliothèque js fichiers, ce qui fonctionne pour moi a été au-dessous, 

    $('.your-selector').fancybox({ 
        afterShow: function () {
            $('.fancybox-overlay').appendTo('form');
        }
});

    J'ai déplacé le fancybox div à l'intérieur de la balise form, et maintenant, côté serveur bouton fonctionne comme un charme 🙂
    Tous les meilleurs.. j'espère que cela fonctionnera pour vous aussi. .:)

    InformationsquelleAutor Shailesh Mishra
  13. 0

    Vous n'avez pas besoin de modifier tout code ou une bibliothèque..., Juste essayer ce..

    $('.fancybox').fancybox({
     parent: "form:first", //jQuery selector
});
    InformationsquelleAutor Kemal Can ÖZÇELİK
  14. 0

    Heres la pire solution possible, cependant, il a travaillé pour moi. J'avais besoin de faceybox et du code-behind en même temps. Configuration de votre boîte de fantaisie à charge lorsque le bouton est cliqué. Puis onClosed transmettre des valeurs d'un autre C# page et faire le code derrière au Chargement de la Page.

    <script type="text/javascript">
    $(document).ready(function () {
    $(".fancy").fancybox({
        onClosed: function () {
            window.location.href = "worker_addcarrier.aspx?name=" + document.getElementById('<%=txt_carriername.ClientID%>').value +
                "&password=" + document.getElementById('<%=txt_password.ClientID%>').value +
                "&email=" + document.getElementById('<%=txt_email.ClientID%>').value;
        }
    });
});

    et alors seulement la "class=" chose ici:

    <asp:Button ID="Button1" href="logo.png" runat="server" class="fancy" Text="Create" Width="109px" BorderColor="#009933" OnClick="Button1_Click" />
    InformationsquelleAutor Michael