title: Using jQuery Validate plugin submitHandler to fire fancybox window
body: <p>I'm using jQuery Validate &amp; 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 &lt; a > tag is as follows on the same page as the form:</p>
  
  <pre><code>&lt;a href="&lt;?=ssl_url()?&gt;basket/processing" class="processing" id="submit_holder"&gt;PROCESSING&lt;/a&gt;
  </code></pre>
  
  <p>In the JS file I have the following config for Fancybox:</p>
  
  <pre><code>$(".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'
  });
  </code></pre>
  
  <p>Now, clicking this link directly works fine - loads as expected. When trying to launch via Validate's submitHandler:</p>
  
  <pre><code>       submitHandler: function(form) {
              $('#submit_holder').click();
              form.submit();
         }
  </code></pre>
  
  <p>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 &lt; a> tag isn't being obtained as the iframe src by Fancybox.</p>
  
  <p>Can anyone help? This is driving me completely nuts.</p>
  
  <p>Thanks, Matt</p>