Ouvrir Fancybox (ou l'équivalent) de la Forme input type=“submit”

est-il un moyen d'obtenir une fancybox (http://fancy.klade.lv/) ou de tout
d'autres lightbox à partir de l'envoi d'un FORMULAIRE (avec un bouton 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>

Ces va pas le faire:

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

Quelqu'un spotting mon erreur ou d'avoir une solution ou une alternative
script? Merci d'avance

InformationsquelleAutor nickmorss | 2009-06-09

45

Je crois que tous les autres réponses manquer le point de la question (à moins que je suis l'un malentendu). Ce que je pense que l'auteur voulait, c'était d'avoir de telle sorte que lorsqu'un formulaire est soumis, ses résultats sont affichés dans une fancybox. Je ne trouve pas que les autres les réponses fournies qu'fonctionnalité.

Pour atteindre cet objectif, j'ai utilisé jQuery Forme de Plugin (http://malsup.com/jquery/form/) pour convertir facilement la forme d'un appel ajax. Ensuite, j'ai utilisé le succès de rappel de charge de la réponse dans une fancybox à l'aide d'un manuel de l'appel à $.fancybox().
```
$(document).ready(function() {
    $("#myForm").ajaxForm({
        success: function(responseText){
            $.fancybox({
                'content' : responseText
            });
        }
    }); 
});
```
Donc, au lieu de les attacher fancybox pour certains artificielle <a> tag, vous vous attachez ajaxForm à la forme elle-même.
- je pense enfin que nous pouvons avoir une réponse. le projet est maintenant disparu depuis longtemps, mais cela semble certainement comme le type d'approche que je voulais aller avec, je ne sais pas ce plugin existe, grâce Guirlande!
- Excellent! J'espère que cela aide le gars à côté, essaie de faire la même chose. Il serait agréable de voir FancyBox inclure cette fonctionnalité, mais cette solution fonctionne bien dans l'intervalle.
- Eh bien, il ne aider à la prochaine gal. Merci pour cela, c'est juste ce que je cherchais!
- C'est exactement ce que j'étais loking, je vous remercie! Ils devraient publier cet exemple d'utilisation sur leur page d'accueil.
- absolument génial!! Merci, vous m'a vraiment aidé avec mon projet de l'université!
- il ouvre un fancbox mais pas contenets insde pour moi , je suis tryinh pour charger hoghcharts sur soumettre
- Cela m'a beaucoup aidé, mais j'ai eu un peu de configuration attaché à mon 1er fancybox, et vous ne fixez pas de cette façon... Mais le problème est facile à résoudre! var localFbOptions = {}; jQuery.extend( localFbOptions, fancyboxOptions, {content': data} ); jQuery.fancybox(localFbOptions);
InformationsquelleAutor Garland Pope

Une meilleure idée est d'utiliser à la volée html, c'est à dire.

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

InformationsquelleAutor

ESSAYER CETTE

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

sur cliquez sur le bouton pour déclencher un clic sur le href, qui est caché.

espère que cette aide

InformationsquelleAutor Yashvit

Fancybox est en mesure de traiter avec des requêtes ajax directement, sans besoin de plus de scripts jQuery.

$("#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>

Oui, Ian, qui est fondamentalement la même solution que j'ai proposée. Je viens d'utiliser le Formulaire de plugin qui rend le code plus court et plus facile à lire.
J'aime mieux cela, car elle n'a pas besoin d'un plugin qui actuellement n'a pas été maintenu pendant un certain temps.

InformationsquelleAutor Ian Bryce

En fonction de

Guirlande du Pape solution originale [moins .ajaxForm]
Appel AJAX solution par Paolo Bergantino [de remplacement .ajaxForm]
Fancybox animation de chargement gestionnaire par Moi-même [de sorte que l'utilisateur connaît le contenu est en cours de chargement]

$(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
    }); 

});

InformationsquelleAutor Dexter Huinda

0

Vous pouvez faire un ajax soumettre le formulaire de données, de stocker les données dans la session, puis déclencher le lien cliquez.
- Pas besoin de le stocker dans la session, vous pouvez sérialiser le formulaire et l'envoyer à droite le long de la requête ajax à l'aide de jQuery .serializeArray().
InformationsquelleAutor Eric Koh

Cette solution peut servir vos fins:

pas les appels ajax
utiliser fancybox est iframe type option
passer url [+ données, par l'intermédiaire de jquery sérialiser méthode] dans fancybox est href option
animation de chargement est automatique

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

InformationsquelleAutor Dexter Huinda

j'ai eu de la difficulté avec cela et ont trouvé un moyen pour afficher les résultats dans l'iframe de la fantaisie de la boîte, je ne suis pas bon avec l'ajax et pourtant si besoin d'une solution php à l'aide de jquery toutes façons, ici, va, ma première réponse!!:

un peu de peaufinage devra être fait dans votre jquery.fancybox fichier js, j'ai été en utilisant jquery.fancybox.1.3.4.pack.js. ouvrir ce avec n'importe quel éditeur etc., et de recherche pour: name="fancybox-frame : c'est ça, il ne devrait être qu'un seul exemple trouvé et ressemblera à:

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

Maintenant, vous voulez renommer l'ensemble:

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

à quoi que ce soit que vous voulez, j'ai juste appelé: "fbframe" et enregistrez le fichier. Maintenant, ajoutez le jquery, paramètres, et forme comme suit et il 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>

La proccess est:

cliquez sur soumettre -> appel de la fonction -> function cliquez sur FB lien -> onComplete

onComplete transmet le formulaire à l'iframe après FB a chargé! fait.

Veuillez noter que j'ai arraché de mon projet en cours et ont simplement modifié certaines parties, je suis encore un programmeur amateur et vous recommande de l'ajax si vous le pouvez. et aussi, je suis seulement en utilisant FB1! FB2, est maintenant disponible.

InformationsquelleAutor slappy-x

-2

J'ai juste eu à le faire. Voici comment je suis allé à ce sujet.
```
$('#elementid').fancybox({
   onStart : function() {
      $.post($(this).attr('href'), $('#formid').serialize());
   }
});
```
De cette façon, vous pouvez soumettre le formulaire et appelez le fancybox tous d'un seul coup. Il ne soumettre le formulaire ajax style. Le bouton "soumettre" besoin d'être dans un <a> tag.

Espère que ça aide.

InformationsquelleAutor Joe Mills

Vous devez vous connecter pour publier un commentaire.