web-dev-qa-db-ja.com

フォーム入力type = "submit"からFancybox（または相当）を開きます

ファンシーボックス（ http://fancy.klade.lv/ ）または他のライトボックスを（画像ボタンを使用して）フォームを送信しないようにする方法はありますか？

HTMLは次のようになります。

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

これらは行いません：

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

誰かが私の間違いを発見したり、回避策や代替スクリプトを持っていますか？前もって感謝します

jqueryformssubmitfancybox
16
nickmorss

他のすべての答えは質問の要点を逃していると思います（私が誤解しているのでない限り）。著者が欲しかったのは、フォームが送信されたときにその結果がファンシーボックスに表示されるようにすることでした。他の回答でその機能が提供されていることはわかりませんでした。

これを実現するために、jQueryフォームプラグイン（ http://malsup.com/jquery/form/ ）を使用して、フォームをajax呼び出しに簡単に変換しました。次に、成功コールバックを使用して、$。fancybox（）を手動で呼び出し、応答をファンシーボックスにロードしました。

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

そのため、fancyboxを人工的な<a>タグに添付する代わりに、ajaxFormをフォーム自体に添付します。

45
Garland Pope

より良いアイデアは、その場でHTMLを使用することです。

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

これを試して

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

ボタンをクリックすると、非表示になっているhrefのクリックがトリガーされます。

お役に立てれば

8
Yashvit

Fancyboxは、追加のjQueryスクリプトを必要とせずにajaxリクエストを直接処理できます。

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

から

  • ガーランドポープのオリジナルソリューション[.ajaxFormを減らす]
  • Paolo BergantinoによるAJAX呼び出しソリューション[.ajaxFormの代替として]
  • Fancyboxが自分でアニメーションハンドラーをロード[コンテンツがロードされていることをユーザーが知るため]

-

$(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
    }); 

});
1
Dexter Huinda

私はこれに苦労していて、ファンシーボックスのiframeに結果を表示する方法を見つけました、私はまだajaxが得意ではないので、jqueryを使用するphpソリューションが必要です。

jquery.fancybox jsファイルで少し調整する必要があります。私はjquery.fancybox.1.3.4.pack.js。エディタなどでこれを開き、次を検索してください：name="fancybox-frame：それだけです。これが見つかったインスタンスは1つだけで、次のようになります。

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

次に、全体の名前を変更します。

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

あなたが望むものなら何でも、私はそれを呼び出しました："fbframe"とファイルを保存します。次に、jquery設定を追加し、次のようにフォームを作成します。これで問題なく動作するはずです。

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

プロセスは次のとおりです。

送信->関数を呼び出す->関数FBリンクをクリック-> onComplete

onCompleteは、FBがフォームをロードした後、フォームをiframeに送信します！完了しました。

現在のプロジェクトからこれを取り除き、必要な特定の部分を編集したことに注意してください。私はまだアマチュアコーダーであり、できればajaxを推奨します。また、FB1のみを使用しています！ FB2が利用可能になりました。

0
slappy-x

このソリューションはあなたの目的に役立つかもしれません：

  • ajax呼び出しなし
  • fancyboxのiframe typeオプションを使用する
  • fancyboxのhrefオプションで、URL [+データ、jqueryのserializeメソッドを介して]を渡します
  • アニメーションの読み込みは自動です

-

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

フォームデータのajax送信を実行し、データをセッションに保存して、リンクのクリックをトリガーできます。

0
Eric Koh