FancyBox abrir (o equivalentes) del tipo de entrada Forma = “submit”

Question

¿hay una manera de conseguir un FancyBox ( http://fancy.klade.lv/ ) o alguna otra caja de luz a partir de la presentación de un formulario (con un botón de imagen)?

HTML se parece a esto:

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

Estos no van a hacer:

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

Cualquier persona manchado mi error, o con una solución o una alternativa ¿guión? Gracias de antemano

Answer 1

Creo que todas las otras respuestas pierda el punto de la pregunta (a menos que yo soy el malentendido). Lo que creo que el autor quería era tener que tales que cuando se envía un formulario, sus resultados se muestran en una FancyBox. No he encontrado que cualquiera de las otras respuestas a condición de que la funcionalidad.

Para lograr esto, utiliza la forma Plugin jQuery ( http://malsup.com/jquery/form/ ) para convertir fácilmente la forma de una llamada AJAX. Luego utiliza la devolución de llamada para cargar el éxito de la respuesta en un FancyBox utilizando un pulsador manual a $ .fancybox ().

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

Así que en lugar de unir FancyBox en cierta etiqueta artificial, se adjunta ajaxForm a la forma misma.

Answer 2

Una mejor idea es utilizar HTML en la marcha, es decir.

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

Answer 3

Probar

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

al hacer clic del botón que desencadenan un clic en el href que está oculto.

esperanza esto ayuda

Answer 4

FancyBox es capaz de acuerdo con las peticiones ajax directamente sin la necesidad de guiones adicionales 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 5

base de

• solución original de Garland Papa [menos .ajaxForm]
• AJAX solución llamada por Paolo Bergantino [como reemplazo para .ajaxForm]
• FancyBox manejador de animación de carga por mí mismo [por lo que el usuario conoce el contenido es la carga]

-

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

Usted puede hacer una ajax presente de los datos del formulario, almacenar los datos en la sesión y luego activar el enlace de clic.

Answer 7

Esta solución puede servir a su propósito:

• ninguna llamada ajax
• El uso de FancyBox tipo iframe
[+ datos, a través de jQuery de serializar método]
• url pase en href de FancyBox
• animación de carga es automático

-

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

Answer 8

Me acaban luchando con esto y han encontrado una forma de mostrar los resultados en el marco flotante de la caja de lujo, no soy buena con el Ajax sin embargo, tan necesaria una solución PHP usando jQuery cualquier manera que aquí va, mi primera respuesta !! :

tendrá que ser hecho en el archivo de su jquery.fancybox js, yo estaba usando jquery.fancybox.1.3.4.pack.js un poco de ajuste. abrir esto con cualquier editor, etc., y la búsqueda de: name="fancybox-frame: eso es todo, sólo debe haber una instancia de este encontrado y se verá así:

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

Ahora desea cambiar el nombre del conjunto:

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

para nada su quiera, yo sólo lo llamaron: "fbframe" y guardar el archivo. Ahora agregue la configuración jQuery, y la forma como sigue y que debería funcionar bien:

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

El proccess es:

  

haga clic en enviar -> función de llamada -> función de clic de enlace FB -> onComplete

onComplete presenta el formulario para el iframe después FB ha cargado! hecho.

  

Tenga en cuenta que he arrancado esto de mi proyecto actual y acaba de editar ciertas partes requeridas, todavía soy un codificador de aficionados y recomendaría el Ajax si es posible. y también soy más que el uso de FB1! FB2 ya está disponible.

Answer 9

Sólo tenía que hacer esto. Así es como me fui al respecto.

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

De esta forma puede enviar el formulario y llamar a la FancyBox todo en una sola toma. Se hace presente el estilo de forma ajax. El botón "enviar" tiene que estar en una etiqueta .

Espero que ayude.