Geöffnete Fancybox (oder Äquivalenz) von Form input type = "submit"

Question

gibt es eine Möglichkeit, eine fancybox (http://fancy.klade.lv/) oder andere anderen Leuchtkasten aus dem Senden eines Formulars (mit einem Bild-Button)?

HTML sieht wie folgt aus:

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

Diese werden nicht tun:

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

Wer mein Fehler Schmier- oder eine Abhilfe oder eine alternative Skript zu haben? Vielen Dank im Voraus

Answer 1

Ich glaube, dass alle anderen Antworten den Punkt der Frage verfehlen (es sei denn, ich bin das eine Missverständnis). Was der Autor meiner Meinung nach wollte, war, dass es so aussieht, dass die Ergebnisse eines Formulars in einer Fancybox angezeigt werden. Ich habe nicht gefunden, dass irgendeine der anderen Antworten diese Funktionalität zur Verfügung stellte.

Um dies zu erreichen, habe ich das jQuery Form Plugin (http://malsup.com/jquery/form/) verwendet, um das Formular einfach in einen Ajax-Aufruf umzuwandeln. Dann nutzte ich den Erfolgs-Callback, um die Antwort mit einem manuellen Aufruf von $ .fancybox() in eine Fancybox zu laden.

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

Statt fancybox zu einem gewissen künstlichen <einem> Tag des Anbringens, befestigen Sie ajaxForm auf die Form selbst.

Answer 2

TRY THIS

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

auf Klick auf den Button Sie ein Klick auf das href auslösen, die versteckt ist.

hoffe, das hilft

Answer 3

Eine bessere Idee ist on-the-fly HTML zu verwenden, dh.

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

Answer 4

Sie können eine Ajax-Übermittlung der Formulardaten durchführen, die Daten in der Sitzung speichern und dann den Linkklick auslösen.

Answer 5

Ich musste das einfach tun. Hier ist, wie ich es gemacht habe.

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

So können Sie das Formular absenden und die fancybox auf einmal aufrufen. Es übermittelt die Form Ajax-Stil. Der "Senden" -Button muss in einem <a>-Tag sein.

Hoffe, dass hilft.

Answer 6

Fancybox kann direkt mit ajax-Anfragen umgehen, ohne dass zusätzliche jQuery-Skripte benötigt werden.

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

Ich habe gerade mit diesem zu kämpfen und haben einen Weg gefunden, die Ergebnisse in der iframe Phantasiefeld anzuzeigen, ich bin noch nicht gut mit Ajax benötigt so eine PHP-Lösung hier geht mit Jquery irgendwelche Möglichkeiten, meine Erste Antwort !!:

ein wenig Feinabstimmung muss in Ihrer jquery.fancybox js-Datei getan werden, ich habe jquery.fancybox.1.3.4.pack.js verwendet. Öffnen Sie dies mit einem Editor usw.Und suchen Sie nach: name="fancybox-frame: das ist es, nur ein Beispiel dafür gefunden werden soll und wird wie folgt aussehen:

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

Jetzt möchten Sie die ganze umbenennen:

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

auf alles, was Ihr Mangel Ich habe es gerade so genannt: "fbframe" und speichere die Datei. Nun fügen Sie die Jquery-Einstellungen und Form wie folgt und es sollte funktionieren:

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

Die proccess ist:

klicken einreichen -> Anruffunktion -> Funktion Klick FB Link -> onComplete

onComplete Übergibt das Formular an den iframe, nachdem der FB ihn geladen hat! erledigt.

Bitte beachten Sie, ich habe dies aus meinem aktuellen Projekt herausgerissen und habe gerade bestimmte erforderliche Teile bearbeitet, ich bin immer noch ein Amateur-Programmierer und würde die Ajax empfehlen, wenn Sie können. und verwende auch nur FB1! FB2 ist jetzt verfügbar.

Answer 8

Basierend von

• Garland Papst ursprünglicher Lösung [weniger .ajaxForm]
• AJAX-Aufruf Lösung von Paolo Bergantino [als Ersatz .ajaxForm]
• Fancybox loading animation Handler von Myself [so der Benutzer weiß, die Inhalts-Lade]

ist -

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

kann diese Lösung Ihren Zweck dienen:

• keine Ajax-Aufrufe
• die Nutzung fancybox iframe Typ Option
• Pass url [+ Daten über jQuery serialize Methode] in fancybox des href option
• laden animation ist automatisch

-

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