帖子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屋!