Jquery UI Elements Not Showing in a Facebox

Question

I'm making a rails 3.1 app. In that app I've been using faceboxes which have been working great, unfortunately I am unable to make a jquery ui element appear in the facebox. If I navigate to page inside the facebox jquery ui works perfectly.

Here's what I've tried so far, I put this on the page that contains the facebox link

$(document).ready(function () {

$("#progressbar").progressbar({ value: 37 });


});

I also tried the exact same code on the page contained within the facebox

I've also tried this

$(document).ready(function () {
$("body").on("load", "#progressbar", function(){

$("#progressbar").progressbar({ value: 37 });

});
});

The erb code in the facebox is this

<h1> Congrats </h1>

<div id="progressbar"></div>

And the Facebox is called like this

 $(document).ready(function() {

 $("#userform2").submit(function() {

 jQuery.facebox({ ajax: '/users/award' });

 });
 });

Thanks in Advance.

Answer 1

I found a solution, but not a good one. I've gone with just creating a separate page that only contains the jquery ui element. I then load that page into an Iframe within the faceboxed page.