0

私は以前にこれについて尋ねましたが、しばらくして、私は経験している問題についてもう少し明確にする必要があると感じました。

シナリオ：

  • 1つのフォーム、2つのフィールドを含むファンシーボックス。1つのFancyboxには「フィールド1」ともう1つの「フィールド2」が含まれています。

望ましい結果のために：

  1. http://testing.myautoiq.com/fancyboxにアクセスします
  2. 「メインページから送信」をクリックします

お気づきのように、field_1とfield_2の両方の値は_POST変数で返されます。

エラーを生成するには1：

  1. 「FB1を開く」をクリックしてfield_1を表示します
  2. 「FB1から送信」をクリックします

お気づきのとおり、field_2のみが返されます。

エラーを生成するには2：

  1. 「FB2を開く」をクリックすると、field_2が表示されます。
  2. 「FB2から送信」をクリックします

お気づきのとおり、field_1のみが返されます。

ソースを自由に調べてみてください。異常なことは何もありません。これはFBの問題ですか？もしそうなら、それはどのように修正できますか？私はここで怒ってみます。

4

1 に答える 1

0

まず、fancyboxがコンテンツとどのように連携するかを理解する必要がありますinline。fancyboxを開くと、ターゲットinlineコンテンツはDOM内の位置からfancyboxに「移動」されます（代わりにプレースホルダーが残されます）

...あなたの場合、フィールドは「移動」されているformため、fancybox内から送信すると、フィールド内に存在しないか、フィールド内に存在しないfield_1ため、値を返すことができません。field_2form

コードのロジックを書き直す必要があります。私がすることは、 fancybox内をfancyboxを閉じるイベントに送信し（フィールドを内部の元の場所に戻す）、後で送信bindするリンクへのリンクです。したがって、これらの代わりに：formformform

<a href="#" onClick="document.testform.submit();">Submit from FB 1</a>

と

<a href="#" onClick="document.testform.submit();">Submit from FB 2</a>

これを行います

<a class="submit" href="#nogo" >Submit from FB 1</a>

と

<a class="submit" href="#nogo" >Submit from FB 2</a>

class="submit"そのようなセレクターからのイベントを処理するために追加したことに注意してください。

次に、スクリプトの上部にフラグを作成します（以下で説明します）

var subMitted = false;

セレクターへのbindイベント：click.submit

$(".submit").bind("click", function(){
  subMitted = true; // set to true when we click on the selector .submit only
  $.fancybox.close();
});

afterClosefancyboxカスタムスクリプトにコールバックを追加します

$(".fancybox").fancybox({
 afterClose: function(){
   // will submit if we clicked the selector .submit
   if(subMitted){
      subMitted = false; // re-initialize the flag
      $("form[name='testform']").submit();
   }
 }
});

の場合、セレクターをクリックして、ファンシーボックスを閉じた後に送信します（ボタンを使用してファンシーボックスを閉じた場合はsubMitted送信しません）true.submitformformclose

このように、フォームは、fancybox内から送信されたかどうかに関係なく、常にすべての値を返します。

于 2012-09-27T00:36:50.793 に答える