web-dev-qa-db-fra.com

Ouvrir Fancybox (ou équivalent) à partir du type d’entrée de formulaire = "submit"

existe-t-il un moyen d'obtenir une fancybox ( http://fancy.klade.lv/ ) ou tout autre fichier en soumettant un FORMULAIRE (avec un bouton d'image)?

HTML ressemble à ceci:

<form action="/ACTION/FastFindObj" method="post">
  <input name="fastfind" class="fastfind" value="3463" type="text">
  <input name="weiter" type="submit">
</form>

Ceux-ci ne feront pas:

    $("form").fancybox();
    $("input").fancybox();
    $("input[name='weiter']").fancybox();

Quelqu'un remarquera-t-il mon erreur ou disposera-t-il d'une solution de contournement ou d'un script alternatif? Merci d'avance 

jqueryformssubmitfancybox
16
nickmorss

Je crois que toutes les autres réponses passent à côté de la question (à moins que je ne sois le seul à mal comprendre). Ce que je pense que l’auteur voulait, c’était de le faire de telle sorte que lorsqu’un formulaire est soumis, ses résultats sont affichés dans une boîte fantaisie. Je n'ai trouvé aucune des autres réponses fournissant cette fonctionnalité.

Pour ce faire, j’ai utilisé le plugin jQuery Form ( http://malsup.com/jquery/form/ ) pour convertir facilement le formulaire en appel ajax. Ensuite, j'ai utilisé le rappel de réussite pour charger la réponse dans une fancybox à l'aide d'un appel manuel à $ .fancybox ().

$(document).ready(function() {
    $("#myForm").ajaxForm({
        success: function(responseText){
            $.fancybox({
                'content' : responseText
            });
        }
    }); 
});

Ainsi, au lieu d’attacher fancybox à une balise <a> artificielle, vous attachez ajaxForm au formulaire lui-même.

45
Garland Pope

Une meilleure idée est d’utiliser le HTML à la volée, c’est-à-dire.

$("#buttontoclick").click(function() {
    $('<a href="path/to/whatever">Friendly description</a>').fancybox({
        overlayShow: true
    }).click();
});
9
Vertigo

ESSAYE ÇA

$(document).ready(function() {
  $("#link").fancybox();
  $("#btn").click(function(){
    $("#link").trigger('click');
  });
});

<input type="button" id="btn" value="Button" />
<div style="display:none;"> 
 <a href="#test" id="link">Click</a>
</div>

<div id="test" style="display:none;">fancy box content</div>

en cliquant sur le bouton, vous déclenchez un clic sur le href qui est caché.

j'espère que cela t'aides

8
Yashvit

Fancybox peut traiter les requêtes ajax directement sans avoir besoin de scripts jQuery supplémentaires.

$("#login_form").bind("submit", function() {

    $.ajax({
        type        : "POST",
        cache       : false,
        url         : "/login.php",
        data        : $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });

    return false;
});

<form action="/login.php" method="POST" id="login_form">
<input type="input" size="20" name="username" />
<input type="submit" value="Login" />
</form>
6
Ian Bryce

Basé de 

  • La solution originale de Garland Pope [moins .ajaxForm]
  • Solution d'appel AJAX de Paolo Bergantino [en remplacement de .ajaxForm]
  • Fancybox chargeant le gestionnaire d'animations par moi-même

-

$(document).ready(function() {
    $("#myForm").submit(function() {
        $.fancybox.showLoading(); // start fancybox loading animation
        $.ajax({
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            success: function(response) { // on success..
                $.fancybox({ 'content' : response }); // target response to fancybox
            },
            complete: function() { // on complete...
                $.fancybox.hideLoading(); //stop fancybox loading animation
            }
        });
        return false; // stop default submit event propagation
    }); 

});
1
Dexter Huinda

je viens juste de me débattre avec cela et j'ai trouvé un moyen d'afficher les résultats dans l'iframe de la boîte de fantaisie, je ne suis pas bon avec ajax mais j'avais donc besoin d'une solution php utilisant jquery comme ci va, ma première réponse! 

un petit ajustement devra être fait dans votre fichier jquery.fancybox js, j'utilisais jquery.fancybox.1.3.4.pack.js. ouvrez-le avec n’importe quel éditeur, etc., et recherchez: name="fancybox-frame: c’est ça, il ne devrait y avoir qu’une seule instance de cela trouvée et ressemblera à ceci: 

 name="fancybox-frame'+(new Date).getTime()+'"

Maintenant, vous voulez renommer le tout: 

fancybox-frame'+(new Date).getTime()+'`

pour tout ce que vous voulez, je viens de l'appeler: "fbframe" et enregistrer le fichier. Maintenant, ajoutez les paramètres jquery, et formez comme suit et cela devrait fonctionner correctement: 

//activate jquery on page load and set onComplete the most important part of this working

$(document).ready(function(){

        $("#a").fancybox({
                'width'             : '75%',
                'height'            : '100%',
                'autoScale'         : false,
                'type'              : 'iframe',
                'onComplete':function (){$('#formid').submit();},
            }); 
         });

//function called onclick of form button.      
function activatefancybox(Who){
    $("#setID").val(Who); // i set the value of a hidden input on the form
    $("#a").trigger('click');//trigger the hidden fancybox link

    }

// hidden link 
 <a id="a" href='#'></a> 

 // form to submit to iframe to display results. 
 // it is important to set the target of the form to the name of 
 // the iframe you renamed in the fancybox js file.
 <form name='iduser' id='iduser' action='page.php' target='fbframe' method='post'>
 <input />
 <input />
 <input id='setID' type='hidden' name='userid' value='' />
 <input type="button" onClick='testfb(123)' />
 </form>

Le processus est:

cliquez sur soumettre -> appelez la fonction -> fonction cliquez sur le lien FB -> onComplete 

onComplete Envoie le formulaire à l'iframe après que FB l'ait chargé! terminé.

Veuillez noter que j'ai arraché ceci de mon projet actuel et que je viens d'éditer certaines parties requises, je suis toujours un codeur amateur et je recommanderais l'ajax si vous le pouvez. et aussi je n'utilise que FB1! FB2 est maintenant disponible. 

0
slappy-x

Cette solution peut servir votre objectif:

  • pas d'appels ajax
  • utiliser le type iframe de fancybox option
  • passe l'url [+ data, via la méthode serialize de jquery dans le répertoire href de fancybox option
  • le chargement de l'animation est automatique

-

$(document).ready(function(){
        $('#yourform').submit(function() {
            var url = $(this).attr("action") + "?" + $(this).serialize();
            $.fancybox({
                href: url,
                'type': 'iframe'
            });
            return false;
        });
});
0
Dexter Huinda

Vous pouvez effectuer une soumission ajax des données du formulaire, stocker les données dans la session, puis déclencher le clic sur le lien.

0
Eric Koh