jQuery Ui Dialog - Add "Loading" image while the dialog content is still loading

Question

I got a div tag which initially is set to have display:none and will later be convert into a dialog:

 @* To load the create dialog *@
  <div id="createdialog">
  </div>

I load a partial view into the dialog like this:

 // Dialog for create food
        var controllerUrl = '/Food/CreateFood';
        $('#createdialog').append($('#loading'));
        var $createdialog = $('#createdialog').load(controllerUrl).dialog({
            autoOpen: false,
            title: 'Create Food',
            modal: true,
            // To set the dialog width to full width
            width: 'auto',
            // Call the clear function without '()'
            close: clear
        });

And then i open it inside the jquery ui drop event once user drop something:

        $.validator.unobtrusive.parse($createdialog);
        $createdialog.dialog('open');

So it means that my dialog is actually created on demand, so I cant pre-load the dialog content. I need to display a loading image and hide it once everything is done loaded in the dialog. But I just cant get it work...Hope can get some help here....

Appreciate any feedback...Thanks...

Answer 1

I somehow figure it out. I use the .load() callback instead. Just to show my way here:

 // Use the load callback to open dialog to ensure content is loaded
        $createdialog.load(controllerUrl, function () {
            $('#loading').hide();
            $createdialog.dialog('open');
        });

Thanks!