fancybox ajax post,帖子预览 - 用AJAX和的fancybox传递数据(Post preview - Passing

我试图做一个预览后，将出现在新的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()

}

});

以及呼叫链接：

Preview

我几乎可以肯定，一切都很好用preview.php文件，刚刚发布的变量和在适当的地方进行打印。

可有人检查的fancybox / AJAX的一部分？

Answer 1:

正如我在我的评论中提到，你的预览按钮应该通过AJAX提交表单获得那个职位预览值(我们将使用ajax来代替iframe )这样：

Preview

然后，你将需要预览按钮绑定到一个手动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:

我不喜欢的解决方案，所以我会后我自己的调查。

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

如果您决定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太

小提琴

吻

Answer 3:

我曾试图用的fancybox一个更有趣的方式工作，

在页面的fancybox

var myvar;

$(document).ready(function(){

myvar = parent.$("#formvariwant").val();

});

文章来源: Post preview - Passing data with AJAX and Fancybox