我正在尝试进行预览,这将出现在新的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
见DEMO(随意浏览源代码)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。