Apri Fancybox (o equiv) da Form input type = "submit"

Question

c'è un modo per ottenere una fancybox (http://fancy.klade.lv/) o qualsiasi altro lightbox dall'invio di un FORM (con un pulsante immagine)?

HTML simile a questo:

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

Questi non farà:

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

Chiunque avvistare il mio errore o avere una soluzione o un scrittura alternativa? Grazie in anticipo

Answer 1

Credo che tutte le altre risposte perdano il punto della domanda (a meno che io non sia l'unico equivoco). Quello che penso che l'autore volesse era di averlo in modo tale che quando un modulo è presentato, i suoi risultati siano visualizzati in una scatola di fantasia. Non ho trovato nessuna delle altre risposte a condizione che funzionasse.

Per raggiungere questo obiettivo, ho utilizzato il plug-in jQuery Form (http://malsup.com/jquery/form/) per convertire facilmente il modulo in una chiamata Ajax. Quindi ho usato il callback di successo per caricare la risposta in una casella di fantasia utilizzando una chiamata manuale a $ .fancybox().

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

Così, invece di attaccare fancybox ad alcuni artificiale < un tag >, si collega ajaxForm alla forma stessa.

Answer 2

provare questo

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

sul clic del pulsante si attiva un clic sul href che è nascosto.

speranza che questo aiuta

Answer 3

Un'idea migliore è quella di utilizzare on-the-fly html, vale a dire.

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

Answer 4

si può fare un ajax presentare dei dati del modulo, memorizzare i dati nella sessione e poi attivare il link click.

Answer 5

Ho appena dovuto farlo. Ecco come sono andato su di esso.

$('#elementid').fancybox({ 
    onStart : function() { 
     $.post($(this).attr('href'), $('#formid').serialize()); 
    } 
}); 

In questo modo è possibile inviare il modulo e chiamare il fancybox tutto in un colpo. Presenta il modulo ajax style. Il pulsante "invia" deve essere inserito in un tag <a>.

Spero che questo aiuti.

Answer 6

Fancybox è in grado di gestire direttamente richieste Ajax senza la necessità di ulteriori script 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> 

Answer 7

Sono appena stato in lotta con questo e ho trovato un modo per visualizzare i risultati nella iframe di casella fantasia, io non sono bravo con ajax eppure così bisogno di una soluzione PHP utilizzando jQuery qualsiasi modo qui va, il mio prima risposta !!:

un piccolo tweaking dovrà essere fatto nel file jquery.fancybox js, stavo usando jquery.fancybox.1.3.4.pack.js. Apri questo con qualsiasi editor ecc., E la ricerca di: name="fancybox-frame: questo è tutto, non ci dovrebbe essere una sola istanza di questa trovata e sarà simile:

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

Ora si desidera rinominare tutta:

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

a qualsiasi cosa vostro voglia , l'ho appena chiamato: "fbframe" e salvo il file. A questo punto aggiungere le impostazioni di jQuery, e la forma come segue e dovrebbe funzionare bene:

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

Il proccess è:

fare clic su Invia -> funzione di chiamata -> funzione di clic collegamento FB -> onComplete

onComplete Invia il modulo all'iframe dopo che l'FB lo ha caricato! fatto.

Si noti che l'ho estratto dal mio progetto corrente e ho appena modificato alcune parti richieste, sono ancora un programmatore dilettante e consiglierei l'ajax se possibile. e sto usando solo FB1! FB2 è ora disponibile.

Answer 8

base dalla soluzione originale

• Garland del Papa [meno .ajaxForm]
• AJAX soluzione di call da Paolo Bergantino [in sostituzione di .ajaxForm]
• Fancybox gestore loading animation by Myself [così l'utente conosce il contenuto è di carico]

-

0.123.

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

Questa soluzione può servire il vostro scopo:

• non chiamate AJAX
• utilizzo fancybox tipo iframe opzione
• passaggio url [+ dati, tramite jQuery serialize metodo] in fancybox di href opzione
• caricamento animazione è automatico

-

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