Abrir Fancybox (o equiv) desde el tipo de entrada de formulario = "enviar"

Question

¿hay alguna manera de obtener un fancybox (http://fancy.klade.lv/) o cualquier otro lightbox al enviar 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 va a hacer:

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

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

Answer 1

Creo que todas las otras respuestas se pierden el objetivo de la pregunta (a menos que sea el único malentendido). Lo que creo que el autor quería era tenerlo de manera que cuando se envíe un formulario, sus resultados se muestren en una caja de fantasía. No encontré que ninguna de las otras respuestas proporcionara esa funcionalidad.

Para lograr esto, utilicé el complemento jQuery Form (http://malsup.com/jquery/form/) para convertir fácilmente el formulario a una llamada ajax. Luego utilicé la devolución de llamada exitosa para cargar la respuesta en un fancybox usando una llamada manual a $ .fancybox().

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

Así que en lugar de unir FancyBox hasta cierto artificial < una etiqueta >, se adjunta ajaxForm a la forma misma.

Answer 2

probar este

$(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 con el botón que se activa un clic en el href que está oculto.

esperanza esto ayuda

Answer 3

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

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

Answer 4

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

Answer 5

Solo tenía que hacer esto. Así es como lo hice.

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

De esta manera puede enviar el formulario y llamar a la caja de lujo, todo en una sola toma. Sí envía el formulario estilo ajax. El botón "enviar" debe estar en una etiqueta <a>.

Espero que ayude.

Answer 6

Fancybox es capaz de manejar las solicitudes ajax directamente sin la necesidad de guiones adicionales de 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

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 necesitaba una solución PHP usando jQuery cualquier manera que aquí va, mi ¡¡primera respuesta !!:

habrá que hacer un pequeño ajuste en el archivo jquery.fancybox js, estaba usando jquery.fancybox.1.3.4.pack.js. abre esto con cualquier editor, etc.Y la búsqueda para: name="fancybox-frame: eso es todo, sólo debe haber una instancia de este encontrado y se verá como:

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

ahora quiere cambiar el nombre del conjunto:

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

a cualquier cosa que su falta , acabo de llamarlo: "fbframe" y guardo 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:

clic presentar -> función de llamada -> función de clic de enlace FB -> onComplete

onComplete Envía el formulario al iframe después de que FB lo haya 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 solo estoy usando FB1! FB2 ya está disponible.

Answer 8

base de solución original

• Garland del 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 el usuario conoce el contenido es de 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 9

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

• No Ajax llama
• uso de FancyBox tipo iframe opción
• pase url [+ data, a través de Serialize jQuery método] en FancyBox de href opción
• La animación de carga es automática

-

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