帖子preVIEW - 将数据传递与AJAX和的fancybox [英] Post preview - Passing data with AJAX and Fancybox

问题描述

我试图做一个帖子preVIEW，这将出现在新的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.

请检查code：

$('.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?

推荐答案

正如我在我的评论中提到，你的preVIEW按钮应该通过AJAX提交表单获得那个职位是preVIEW值（我们将使用 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>

那么你就需要到preVIEW按钮绑定到一个手动的（点击）方法通过 AJAX提交表单首先....然后发布结果的fancybox其次，如：

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

请参阅 演示 （随时自由探索来源$ C ​​$ C）

See DEMO (feel free to explore the source code)

这篇关于帖子preVIEW - 将数据传递与AJAX和的fancybox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！