I currently have a page which has a form being submitted by ajax.
The ajax submission works fine, but i can't seem to get it to work so that the FancyBox only opens AFTER the form has submitted.
Ajax form submission code is:
$('#create-card-process').ajaxForm({
dataType: 'json',
success: function(data) {
if (data.success) {
console.log(data);
$('#card-saved-success').fadeIn();
$('#card-saved-success').delay(3000).fadeOut();
} else {
alert('Failed with the following errors: '+data.errors.join(', '));
}
}
});
Then i have the function which activates the FancyBox:
$('#card-preview-link').click(function(){
$(".fancybox").fancybox({
beforeLoad: function(){$('#create-card-process').submit();return true;},
maxWidth : 1200,
maxHeight : 800,
preload:true,
fitToView : false,
width : '1200px',
height : '100%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
What is happening is that the FancyBox loads at the same time as the form submission, so the contents inside the fancy box do not show the new changes.
Many thanks.