6

新しいFancyboxiframeに表示される投稿プレビューを実行しようとしています。数週間以来、私はいくつかのヘルプやベストプラクティスを探していますが、それを見つけることができません。

私の主な問題は、（データベースを更新する前に）フォームからFancyboxウィンドウにデータを渡すことです。私のAJAXスキルは非常に貧弱なので、おそらく私の問題はそれほど難しくありません。

コードを確認してください：

$('.preview2').fancybox({
fitToView    : false,
width        : 905,
height        : 505,
autoSize    : false,
closeClick    : false,
openEffect    : 'none',
closeEffect    : 'none',
ajax: {
    type: "POST",
    cache : false,
    url: "preview.php",
    data: $('#postp').serialize()
}
});

そして、呼び出しリンク：

<a class="preview2" data-fancybox-type="iframe" href="preview.php" id="preview2">Preview</a>

変数を投稿して適切な場所に出力するだけで、preview.phpファイルですべてがうまくいくとほぼ確信しています。

誰かがFancybox/AJAXの部分をチェックできますか？

4

3 に答える 3

18

コメントで述べたように、プレビュー ボタンは ajax を介してフォームを送信し、POST プレビュー値を取得する必要があります (ajaxの代わりに使用しますiframe)。

<a class="preview2" data-fancybox-type="ajax" href="preview.php" id="preview2">Preview</a>

次に、プレビュー ボタンを手動のon("click")方法にバインドして、ajax最初 にフォームを送信する必要があります。

$(document).ready(function () {
  $('.preview2').on("click", function (e) {
    e.preventDefault(); // avoids calling preview.php
    $.ajax({
      type: "POST",
      cache: false,
      url: this.href, // preview.php
      data: $("#postp").serializeArray(), // all form fields
      success: function (data) {
        // on success, post (preview) returned data in fancybox
        $.fancybox(data, {
          // fancybox API options
          fitToView: false,
          width: 905,
          height: 505,
          autoSize: false,
          closeClick: false,
          openEffect: 'none',
          closeEffect: 'none'
        }); // fancybox
      } // success
    }); // ajax
  }); // on
}); // ready

DEMOを参照してください(ソース コードを自由に調べてください)

于 2013-01-15T17:40:06.807 に答える
2

解決策が気に入らないので、独自の調査を投稿します。

.on("click", ...なぜ 1. 2. e.preventDefault3. $.ajax4.でコードを書いてthis.href、成功時に fancybox を呼び出すだけなのですか?

iframeの代わりにajaxを使用することにした場合（受け入れられた回答のように）、typeプロパティを追加してfancybox()呼び出すだけで、チェックされているため、他のすべてを渡すことができます

$('.preview2').fancybox({
    type: "ajax",
    ajax: {
        data:  $('#postp').serialize() 
     // url: "someurl.php" not needed here, it's taken from href
     //                    if you need it, e.g. you have a button, not a link
     //                    use "href" property that overrides everything
     //                    not attribute, cause it's invalid
    }
 // href: "url_to_add_or_override_existing_one",
 // all other effects
 // afterLoad: function () { // other cool stuff }
});

EDIT @JFKが指摘したように、リンクをクリックするたびにフォームデータを取得するbeforeLoad()必要があるため、 data. 最後に:

$('.preview2').fancybox({
    type: "ajax",
    beforeLoad: function() {
        this.ajax.data = $('#postp').serialize();
    }
});

すべてのdata-*属性も削除できます

フィドル

接吻

于 2015-01-07T14:30:16.273 に答える
0

ファンシーボックスでもっと面白い方法を試してみましたが、

ファンシーボックスのページで

var myvar;
$(document).ready(function(){
    myvar = parent.$("#formvariwant").val();
});
于 2013-05-01T11:28:34.157 に答える