16

ファンシーボックス（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();

私の間違いを見つけたり、回避策や代替スクリプトを持っている人はいますか? 前もって感謝します

4

9 に答える 9

45

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

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

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

したがって、fancybox を人為的な <a> タグにアタッチする代わりに、フォーム自体に ajaxForm をアタッチします。

于 2010-03-10T22:53:44.813 に答える
9

より良いアイデアは、オンザフライ html を使用することです。

$("#buttontoclick").click(function() {
    $('<a href="path/to/whatever">Friendly description</a>').fancybox({
        overlayShow: true
    }).click();
});
于 2009-08-17T23:07:03.937 に答える
8

これを試して

$(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のクリックがトリガーされます。

お役に立てれば

于 2009-08-04T12:18:23.337 に答える
6

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>
于 2010-05-11T22:31:33.840 に答える
1

からに基づく

  • ガーランド教皇の元の解決策[less.ajaxForm]
  • PaoloBergantinoによる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
    }); 

});
于 2012-06-17T14:13:19.483 に答える
0

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

jquery.fancyboxjsファイルで少し調整する必要があります。私はを使用して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が利用可能になりました。

于 2012-03-23T16:17:45.040 に答える
0

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

于 2009-08-27T04:40:39.667 に答える
0

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

  • ajax 呼び出しなし
  • fancybox のiframe タイプオプションを使用する
  • 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;
        });
});
于 2012-06-17T15:51:44.203 に答える
-2

私はただこれをしなければなりませんでした。これが私がそれについて行った方法です。

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

そうすれば、フォームを送信してファンシーボックスを一度に呼び出すことができます。フォーム ajax スタイルを送信します。「送信」ボタンは <a> タグ内にある必要があります。

それが役立つことを願っています。

于 2010-02-10T22:37:18.790 に答える