保存表单数据，然后将数据加载到fancybox，以便用户预览答案

【问题标题】：Save form data then load data into fancybox so user can preview保存表单数据，然后将数据加载到fancybox，以便用户预览
【发布时间】：2011-05-09 15:09:40
【问题描述】：

我有一个表单，用户可以在其中提交各种数据字段。表单不在花式框中……它在浏览器中加载。一个预览按钮是可用的，并且预览加载到一个fancybox中。该表格每三分钟有一个自动保存功能，也可以通过单击保存按钮手动保存。我的问题是如果表单没有被自动保存并且用户没有手动保存它，那么fancybox 将显示最新更改之前的版本。我目前让它通过自动保存功能运行，然后加载fancybox预览，但似乎在fancybox加载它之前数据没有被保存。自动保存工作，手动保存工作，fancybox 工作并加载数据，但我需要它来保存数据，然后将其加载到 fancybox。

自动保存功能使用 ajax 通过 PHP/MySQL 保存数据。

非常感谢您的帮助！

$(document).ready(function() {
    $('#preview-article').live('click', (function() {
            autoSave();
    }));

    $("#preview-article").fancybox({
            'width': '75%',
            'height': '75%',
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'iframe'
    });
});

【问题讨论】：

标签： javascript jquery fancybox

【解决方案1】：

我相信您在调用保存函数之前预览了您的表单。这就是为什么您会看到“旧”表格。你可能想尝试这样的事情：

function preview() {
  //open fancybox
}

function saveAndPreview() { //your preview button will call this function
  //save call
  preview();
}

创建一个保存表单的函数，然后才显示预览。这样可以确保在调用 fancybox 之前保存它。

【讨论】：

我尝试在fancybox之前运行我的保存功能，但fancybox仍然没有加载保存的数据。如果我单击保存按钮保存表单字段数据，然后单击预览按钮，fancybox 会加载最新更改。但是如果我在 fancybox 之前包含 save 函数，fancybox 会忽略它。
我对这个主题的了解有点少，但是fancybox不可能在保存调用之前异步运行并加载吗？在调用预览函数之前，我会尝试输入一个简单的alert()，以确保它在调用之前真正保存。
是的，fancybox 在保存调用之前加载，这是我的问题。如果我可以在保存调用后加载/重新初始化 fancybox，那就太好了。也许每次保存后重新加载fancybox。我确实发出了警报并且正在保存，但是 fancybox 仍然从保存之前加载数据。感谢您的帮助。
这很奇怪。您是否真的尝试将您的fancybox 呼叫移至$(document).ready() 之外？这会将您的代码绑定为仅在页面加载时执行一次。做一些像把它放在一个函数中的事情将能够解决这个问题。您的自动保存功能是否通过使用 $.html() 或类似的方式更改了 html 的值？
是的，我现在通过实时点击在文档之外准备好了...不添加或替换 html ...只需要弄清楚保存后如何加载/初始化fancybox，但fancybox 似乎加载时将自身绑定到 ID 的点击。我想我可以在 SO 重新提交这个问题，看看我是否能得到更多的想法......现在被难住了，但我离专家还有很长的路要走，所以很容易难倒我:)

【解决方案2】：

我发现了一个名为 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'
    });
});

【讨论】：