How can I use jquery to save my form data then load it in fancybox to preview the changes

Question

I have a form with several fields that has a jquery autosave function that saves the form every 3 minutes, and also a button that the user can click to save the form. What I want is a preview feature that loads in a fancybox. Currently, when I click my preview button, fancybox loads using an iframe and pulls the data from a php/mysql process. The preview in fancybox loads, but if the form has changes since the last save, and hasn't been saved since the most recent changes, the fancybox displays the data prior to the latest changes.

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

Any help is greatly appreciated!!!

Can't you autosave when the preview click button is clicked then once the ajax responds with a success save message THEN load the fancybox with the preview? — Gary Green, May 10 '11 at 20:26
The forms saves fine ...whether its manually by clicking the button or autosaving it.`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); } }); }` — Mark, May 10 '11 at 20:30
Gary - It appears as though fancybox only initializes when called, and does not actually load the fancybox window. I have placed the fancybox code in the success part of the ajax call, and other areas, and it doesn't help. — Mark, May 10 '11 at 20:35
That is weird. If you have clicked preview_article, and placed your fancybox code in success function. Do you have some sort of server side caching on (memcache or similar)? — Krule, May 10 '11 at 20:47

score 0 · Answer 1 · answered Feb 13 '13 at 19:52

0

Check out this jQuery Plugin that Saves form data to cookie as you type.

Maybe you could retrieve the cookie data for your fancy fancybox. Here

answered Feb 13 '13 at 19:52

onelovelxg

1
2

score 0 · Accepted Answer · answered May 12 '11 at 04:51

I found an API option included with fancybox called OnStart which I was able to add my saveTheForm function. The OnStart option is called right before attempting to load the content. So far, it's working.

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

How can I use jquery to save my form data then load it in fancybox to preview the changes

2 Answers2