如何使用 jquery 保存表单数据，然后将其加载到 fancybox 中以预览更改答案

【问题标题】：How can I use jquery to save my form data then load it in fancybox to preview the changes如何使用 jquery 保存表单数据，然后将其加载到 fancybox 中以预览更改
【发布时间】：2011-05-10 20:14:09
【问题描述】：

我有一个包含多个字段的表单，该表单具有一个 jquery 自动保存功能，每 3 分钟保存一次表单，还有一个用户可以单击以保存表单的按钮。我想要的是一个可以加载到幻想框中的预览功能。目前，当我单击预览按钮时，fancybox 使用 iframe 加载并从 php/mysql 进程中提取数据。 fancybox 中的预览会加载，但如果表单自上次保存后发生更改，并且自最近一次更改后尚未保存，则 fancybox 会显示最新更改之前的数据。

$(function() {
    $('#preview-article').live('click', function() {
        saveTheForm();
        $('#preview-article').fancybox({
            'width': '80%',
            'height': '80%',
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'iframe'
        });
    });
});

非常感谢任何帮助！！！

【问题讨论】：

你能粘贴 saveTheForm() 函数吗？
你不能在点击预览点击按钮时自动保存，然后一旦 ajax 响应成功保存消息然后加载带有预览的fancybox？
表单保存得很好......无论是通过单击按钮手动保存还是自动保存。function saveTheForm() { var form_data = $("#edit-article").serialize(); $.ajax({ type: "GET", url: "/tools/autosave.php", cache: false, data: form_data, success: function(data) { $('#autosave-save-message').replaceWith(link); } }); }
Gary - 看起来fancybox 只在调用时初始化，实际上并没有加载fancybox 窗口。我把fancybox代码放在ajax调用的成功部分等地方，也没用。
这很奇怪。如果您点击了 preview_article，并将您的 fancybox 代码放在成功函数中。您是否有某种服务器端缓存（memcache 或类似的）？

标签： javascript jquery fancybox

【解决方案1】：

我发现了一个名为 OnStart 的包含在 fancybox 中的 API 选项，我可以添加我的 saveTheForm 函数。 OnStart 选项在尝试加载内容之前被调用。到目前为止，它正在工作。

$(document).ready(function() {
    $('#preview-article').fancybox({
            'onStart': saveTheForm,
            'width': '80%',
            'height': '80%',
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'iframe'
    });
});

【讨论】：

【解决方案2】：

查看这个 jQuery 插件，它可以在您键入时将表单数据保存到 cookie。

也许您可以检索您喜欢的花式盒子的 cookie 数据。 Here

【讨论】：