发布预览 - 使用 AJAX 和 Fancybox 传递数据 [英] Post preview - Passing data with AJAX and Fancybox

问题描述

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

I'm trying to do a post preview, which will appears in a new Fancybox iframe. Since couple of weeks I'm looking for some help or best practices, but I can't find it.

我的主要问题是将数据从表单(更新数据库之前)传递到 Fancybox 窗口.我的 AJAX 技能很差，所以也许我的问题不是那么难.

My main problem is to pass the data from form (before updating database) to Fancybox window. My AJAX skills are very poor, so maybe my problem isn't so hard.

请检查代码:

$('.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 文件一切正常，只需发布​​变量并将其打印在正确的位置即可.

I'm almost sure everything is fine with preview.php file, just posting the variables and printing it in right places.

有人可以检查 Fancybox/AJAX 部分吗?

Can someone check Fancybox / AJAX part?

推荐答案

正如我在评论中提到的，您的预览按钮应该通过 ajax 提交表单以获取 POST 预览值(我们将使用 ajax 而不是 iframe) 所以:

As I mentioned in my comments, your preview button should submit the form via ajax to get the POST preview values (we'll use ajax instead of iframe) so :

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

然后您需要将预览按钮绑定到手动 on("click") 方法以通过 ajax 首先提交表单......然后发布花式盒中的结果其次如下:

Then you would need to bind the preview button to a manual on("click") method to submit the form via ajax firstly ....and then post the results in fancybox secondly like :

$(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(随意探索源代码)

See DEMO (feel free to explore the source code)

这篇关于发布预览 - 使用 AJAX 和 Fancybox 传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！