我正在尝试进行预览,这将出现在新的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部分吗？
解决方法
正如我在评论中提到的,您的预览按钮应该通过ajax提交表单以获取POST预览值(我们将使用ajax而不是iframe),因此：
<a class="preview2" data-fancybox-type="ajax" href="preview.PHP" id="preview2">Preview</a>
然后你需要将预览按钮绑定到手动(“点击”)方法,首先通过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
