Post preview - 通过AJAX和Fancybox传递数据

Question

我想要做一个预览，它会出现在一个新的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的一部分？

Answer 1

正如我在我的评论中提到，你的预览按钮应该通过AJAX提交表单获得那个职位预览值（我们将使用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（随意浏览源代码）

Answer 2

我试图用的fancybox的作品更有趣的方式，

在页面的fancybox

var myvar; 
$(document).ready(function(){ 
    myvar = parent.$("#formvariwant").val(); 
}); 

Answer 3

我不喜欢这个解决方案，所以我会发布我自己的调查。

为什么写代码1. .on("click", ... 2. e.preventDefault 3. $.ajax 4. this.href只是为了呼吁成功的fancybox，已经有all this functions inside？

如果您决定AJAX，而不是使用iframe的（如在接受的答案），你可以简单地添加type属性fancybox()调用，因为它是beening检查，并通过所有其他

$('.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。Finnaly：

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

您可以删除所有data-* atrributes太

FIDDLE

KISS