Call function after FancyBox loaded

Question

I am trying to get FancyBox to load an file which contains a form. I want to use the jQuery Validate plugin to validate, but the form is not being added to the DOM before the callback is made.

The afterLoad option does open an alert, but it actually opens before the ajax content is loaded.

I can add an href in the loaded file that when clicked runs validate(), but interestingly, it only works if I call the form by ID rather than class, as there is another form on the same page with that class.

I have the following code:

<a href="/url" class="fancy fancybox.ajax">link</a></li> 



$(".fancy").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    afterLoad: function() {
      //$(".validateMe").validate();
      alert(987987);
    }
});


<form id="someId" action="javascript:someFunction();" class="validateMe" method="post">

Answer 1

Try using the ajax option with its complete event:

$(".fancy").fancybox({
    // ...
    ajax: {
        complete: function(jqXHR, textStatus) {
            $(".validateMe").validate();
        }
    }
});

Answer 2

I was in a similar situation where I wanted to do some DOM manipulation after the content loaded, but afterLoad did not work. I had to use afterShow instead, which seems to be very similar to onComplete from Fancybox v1.3.

$.fancybox({
            href: '/some/link/here',
            type: 'ajax',
            // Other options like size go here
            afterShow: function() {
                // Code to execute after the pop up shows
            }
        });