jQuery Dialog not appearing when called

Question

I am trying to get a modal loading dialog to pop up while I make an ajax call but it is not showing up in the onClick function. If I slow it down with firebug and step through the loading panel will show up. Is this just javascript running ahead of itself? Is there a better way to do this?

$(function(){
     $("#loading_panel").dialog({
                                 modal:true,
                                 position:'center',
                                 minHeight:40
                                });

     $("a.view-in-frame").click(function(){
                       $("#loading_panel").dialog('open');
                       $("#tabs").hide();
                       var blog = $(document.createElement('div')).attr('id', 'blog').load(('blog_reader.php?blog='+this.href)), $("#loading_panel").dialog('close'));
                       $("#content_wrap").append(blog);
                       return false;
                 });
})

Answer 1

Just an idea, try setting the 'autoOpen' to false when creating the dialog:

$("#loading_panel").dialog({
                             modal:true,
                             position:'center',
                             minHeight:40,
                             autoOpen:false
                            });

At the moment you are telling the dialog to open when it is created. This should prevent that behaviour.

Answer 2

@ErsatzRyan

Have you tried set your javascript function to load after your document is ready?

Like this:

$(document).ready(function(){

//Your functions

});

And as @Nat Ryall said, you must set your autoOpen to false, otherwise your dialog won't open twice.

And another thing, try to call your $(".selector").dialog("open") after you done everything. You're telling your function to call your dialog before it has loaded it's content.