6

我正在尝试进行发布预览，它将出现在新的 Fancybox iframe 中。几周以来，我一直在寻找一些帮助或最佳实践，但找不到。

我的主要问题是将数据从表单（更新数据库之前）传递到 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首先通过 .... 然后将结果发布到 fancybox 中，例如： 

$(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，里面已经有了所有这些功能？

如果您决定使用 ajax 而不是 iframe（如在接受的答案中），您可以简单地添加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 }
});

编辑正如@JFK指出的那样，这还不够，每次单击链接时都必须获取表单数据，因此beforeLoad()需要而不是data. 最后：

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

您也可以删除所有data-*属性

小提琴

吻

于 2015-01-07T14:30:16.273 回答
0

我尝试了一种更有趣的方式，用fancybox有效，

在fancybox页面

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