.load Scripts in JQuery dialog - jquery-ui

Question

Hi I'm trying to load a script to create some charts in a dialog box using JQuery.
In my view I have a partial ready and waiting that is in the dialog when I inspect it with Chrome Tools:
<div id="mydialog">
#Html.Partial("_fooChart", "Home")
</div>
I then have the dialog box that fires on click, the dialog opens but it is blank. If you inspect it with Chrome Tools you can see the elements from the partial are there. (The elements don't contain content, the function will create the content based on id's.)
Here is the dialog:
$(function () {
$('#mydialog').dialog({
autoOpen: false,
height: 800,
width: 800,
resizable: false,
open: function () {
$('#mydialog').load($('#mydialog'), function () {
fooChartLoad()
});
},
title: 'Foo Chart',
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#mydialog').dialog("open")
});
});
And here is the script I am trying to load:
function fooChartLoad() {
setTimeout(function () {
createFooChart();
$('#fooChartContainer').bind("kendo:skinChange", function (e) {
createFooChart();
});
}, 200);
}
Basically I'm trying to figure out why the dialog is not loading up the fooChartLoad when I call it with the open -> load function in JQuery dialog.

Answer 1

I had attempted to have a partial populate the dialog HTML before the .load called the scripts that would render data visuals, but .load it would appear works better when I loaded the partial and scripts at the same time as below:
open: function () {
$('#fooChartDialog').load($('#fooChartDialog').data('url'), function () {
fooChartLoad()
});