CODEWITHSUNDEEP
jquery-uijquery
sberry
sberry

Reputation: 132018

jquery: $(window).bind('load', function()) and $(document).ready(function()) in ajax loaded content

I am using facebox (http://famspam.com/facebox) to hold some content loaded via an ajax call. The content being loaded has a jquery ui slider element inside of it. In non-ajax loaded content I can use either the $(window).bind('load', function()) or $(document).ready(function()) methods in order to trigger the construction of the slider via a call like $('#targetDiv').slider(...);

However, when loading into facebox neither of these two methods appear to work. The only way I have been able to do this successfully is to have an image at the end of my content with an onload calling the readying function.

Is there some other, not-so-hackish, way to do this?

Upvotes: 1

Views: 7629

Answers (2)

owlmsj
owlmsj

Reputation: 111

You can do this:

 $(document).bind('reveal.facebox', function() { YOUR CALLBACK AFTER LOAD CONTENTS });

 jQuery.facebox({ ajax: 'load.html'});

this works for me!

Upvotes: 3

dan richardson
dan richardson

Reputation: 3939

I have hacked apart my facebox a fair few times and added in a few extra functions. One of them is a callback function for when it's loaded (passing the facebox content as a param)

You can find my version of facebox here

You can use it like so:

jQuery.facebox({ ajax: 'load-file.html',
    callback: function(fb) {
       // You can now use fb as a scope
       jQuery('.find-me', fb).doSomething();
    }

There are a few other little functions in there aswell, just check from line 66 down :)

Hope this helps

Upvotes: 1

Related Questions