ui Dialog works once in IE

Question

Hi, I hope someone can help with this problem. I am using ui Dialog that pops up on clicking a link with the same class. The problem is that the link work great once but if i click it again or another link with the same class then only the overlay loads but not the content box in IE only. It works great in firefox. My script includes an ajax post, if i remove the ajax code then the box works fine on every click.

My code:

$().ready(function() {

       $('#dialog').dialog({
            autoOpen:false,
            title:  $(this).attr("title"),
            modal: true, width: 450, height:"auto", resizable: false,
            close: function(ev, ui) { $(this).remove(); },
            overlay: {
            opacity: 0.5,
            background: "black"
            }
            });

   $(".mybutton").click(function(){

        $.post($(this).attr("href"), { },
            function(data) {
                $('#dialog').html(data);

            }

        );
        $('#dialog').dialog('open');
        return false;
      });

});

I have multiple links with the class "mybutton" and a div with the id #dialog . I am also using the latest version of jQuery and ui. Any help would be greatly appreciated. Thanks

I am using IE8, jQuery 1.3.2, jQuery UI 1.7.1

Answer 1

The post is done asynchronously by default. It looks like you expect it to be synchronous. Try moving the open of the dialog into the callback after the data is set rather than in the click function -- which may execute before the callback returns.

Answer 2

move the open into the callback...

$('#dialog').html(data).dialog('open');

Answer 3

I was having the same problem. I resolved it by managing the state of the Dialog myself...creating a new one and disposing of it each time.

function makeDialog()
{
     var html = '';
     html += '<div>My dialog Html...</div>';

     return $(html).dialog(
     {
          position: 'center',
          modal: true,
          width: 518,
          height: 630,
          autoOpen: false,
          close: function() { $j(this.remove(); }
     });
}