Question

I have a form where users submit various fields of data. The form is not in a fancybox …it loads in the browser. A preview button is available and the preview loads into a fancybox. The form has an autosave feature every three minutes and can also be saved manually by clicking a save button. My problem is if the form hasn’t been autosaved and the user hasn’t mnaually saved it, then fancybox will show the version prior to the latest changes. I currently have it run through the autosave function, then load the fancybox preview, but it seems the data isn’t getting saved before fancybox loads it. The autosave works, manual save works, fancybox works and loads the data, but I need it to save the data, then load it in fancybox.

The autosave function uses ajax to save the data via PHP/MySQL.

Thanks so much for any assistance!

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

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

Answer 1

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'
    });
});