我正在尝试做一个帖子预览,它将出现在新的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),因此:
ajax
iframe
<a class="preview2" data-fancybox-type="ajax" href="preview.php" id="preview2">Preview</a>
然后,您需要将预览按钮绑定到手动on("click")方法,以ajax首先通过… 提交表单,然后将结果发布到fancybox中,如下所示:
on("click")
$(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 (随意浏览源代码)