Using jQuery Validate plugin submitHandler to fire fancybox window.

Question

I'm using jQuery Validate & Fancybox together on a website to load a modal Fancybox window on form submission (after being validated by Validate) to confirm an order is being processed but have encountered a weird issue I'm unable to resolve. The < a > tag is as follows on the same page as the form:

<a href="<?=ssl_url()?>basket/processing" class="processing" id="submit_holder">PROCESSING</a>

In the JS file I have the following config for Fancybox:

$(".processing").fancybox({
    'padding'       : 0,
    'width'  : 400,
    'height' : 400,
    'modal'         : true,
    'overlayColor'  : '#fff',
    'overlayOpacity': 0.8,
    'autoScale'     : true,
    'type'  : 'iframe',
    'transitionIn' : 'fade',
    'transitionOut' : 'fade',
    'titlePosition' : 'inside'
});

Now, clicking this link directly works fine - loads as expected. When trying to launch via Validate's submitHandler:

       submitHandler: function(form) {
            $('#submit_holder').click();
            form.submit();
       }

The Fancybox itself loads but completely blank. I can't view any source nor can I open the frame in a new window, it's almost as if the href attribute of the < a> tag isn't being obtained as the iframe src by Fancybox.

Can anyone help? This is driving me completely nuts.

Thanks, Matt

Answer 1

Have you tried $('#submit_holder').trigger('click'); instead of $('#submit_holder').click(); and also try in other browsers to see if its a browser issue.