Ouvrez Fancybox (ou équiv) à partir du type d'entrée Form = « submit »

Question

est-il un moyen d'obtenir un fancybox ( http://fancy.klade.lv/ ) ou tout autre visionneuse de soumettre 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>

Ils ne seront pas faire:

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

Toute personne repérer mon erreur ou d'avoir une solution de contournement ou une alternative scénario? Merci à l'avance

Answer 1

Je crois que toutes les autres réponses manquent le point de la question (à moins que je suis un malentendu). Ce que je pense que l'auteur a voulu était de l'avoir de telle sorte que lorsqu'un formulaire est soumis, ses résultats sont affichés dans un fancybox. Je n'ai pas trouvé que l'une des autres réponses à condition que la fonctionnalité.

Pour ce faire, j'utilisé le formulaire jQuery Plugin ( http://malsup.com/jquery/form/ ) pour convertir facilement la forme d'un appel ajax. Ensuite, je le rappel de succès pour charger la réponse dans un fancybox au moyen d'un appel manuel à .fancybox $ ().

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

Ainsi, au lieu d'attacher une étiquette fancybox à artificielle , vous attachez ajaxForm à la forme elle-même.

Answer 2

Une meilleure idée est d'utiliser sur la volée html, par exemple.

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

Answer 3

ESSAYER

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

clic du bouton vous déclenchez un clic sur le href qui est caché.

espérons que cette aide

Answer 4

Fancybox est en mesure beaucoup de demandes 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>

Answer 5

Sur la base de

• solution originale de Garland pape [moins .ajaxForm]
• solution d'appel AJAX par Paolo Bergantino [en remplacement .ajaxForm]
• Fancybox gestionnaire de chargement de l'animation par moi-même [afin que l'utilisateur sait que 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
    }); 

});

Answer 6

Vous pouvez faire ajax soumettre des données de formulaire, enregistrer les données dans la session, puis déclencher le clic de lien.

Answer 7

Cette solution peut servir votre objectif:

• aucun appel ajax
• de l'utilisation fancybox type iframe
• passe url [+ données, via jquery de serialize méthode] dans fancybox de href
• 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;
        });
});

Answer 8

Je viens du mal avec cela et ai trouvé un moyen d'afficher les résultats dans la iframe de la boîte de fantaisie, je ne suis pas bon avec ajax pourtant si besoin d'une solution PHP en utilisant jquery des moyens va ici, ma première réponse !! :

un peu de peaufinage devra être fait dans le dossier de votre jquery.fancybox, j'utilisais jquery.fancybox.1.3.4.pack.js. ouvrir ce avec un éditeur, etc., et la recherche de: name="fancybox-frame: thats it, il ne devrait y avoir une instance de cet trouvé et ressemblera à ceci:

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

Maintenant que vous souhaitez renommer l'ensemble:

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

pour quoi que ce soit votre besoin, je viens d'appeler cela: "fbframe" et enregistrez le fichier. Maintenant, ajoutez les paramètres de jquery, et la 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>

Le proccess est:

  

cliquez sur Soumettre -> Fonction d'appel -> Fonction clic lien FB -> onComplete

onComplete Soumet formulaire au iframe après FB a chargé le! fait.

  

S'il vous plaît noter que je l'ai arraché ce de mon projet actuel et venez d'éditer certaines parties nécessaires, je suis encore un codeur amateur et recommanderais le ajax si vous le pouvez. et aussi je suis seulement en utilisant FB1! FB2 est maintenant disponible.

Answer 9

Je viens de 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 en un seul coup la forme et appeler le fancybox. Il fait soumettre le formulaire style ajax. Le bouton « Soumettre » doit être dans une balise .

L'espoir qui aide.