Question

I have created fancybox form :

$("a.productForm").fancybox({
    'hideOnOverlayClick' : true,
    'modal' : true,
    'hideOnContentClick' : false,
    'showCloseButton' : false,
    'padding' : 0,
    'transitionIn'  :   'elastic',
    'transitionOut' :   'elastic',
    'autoScale'     : false,
    'autoDimensions': false,
    'frameWidth': 717,
    'frameHeight': 900,
    'overlayOpacity': 0.4,
    'centerOnScroll' : false,
    'type': 'ajax',
    'ajax': {
    dataFilter: function(data) {
        return $(data).find('#form_wrapper')[0];}
}
}); 

You can see in this page how it works.

To view my fancybox form, press please green button :

As you can see all works just fine in this page, but my code wont work in page, where products is loading with ajax. You can see this page.

When you press green button in this page, fancybox just wont show up, instead it goes straight to the link. What could be wrong?

Maybe I have to apply fancbox code to this link after it is loaded whit ajax?

Answer 1

You need to execute the $(“a.productForm”).fancybox(…) in the ajax success callback, after the html data has been received and added to the dom.

Here’s a simple example:

$.ajax({
  url: "test.html",
  success: function(data){
    $('#newest_desc').html(data); // Here you insert data which I'm expecting to be a string with html into the tab with the id "newest_desc". I got that from your website. Not sure if it's correct though.
    $("a.productForm").fancybox(...) // Here is where you call the fancybox function because now you know that the element a.productForm is available.
  }
});