tabs inside dialog using jquery load do not work when upgraded from 1.4.2 to 1.8.2

Question

        $("#popup").load("/xyz", {args: args}, function () {

          $("#popup").dialog({
            title: "Amend",
            height: toolkit.getFullHeight(),
            width: toolkit.getFullWidth(),
            bgiframe: true,
            modal: true,
            closeOnEscape: false,
            close: function (event, ui) {
                $('#popup').dialog("destroy");
            }
          });

          $("#tabs").tabs({
            disabled: [1, 2]
          });

        });

xyz file is as below:

<div id="tabs">

  <ul>
    <li><a href="#div_a">A</li>
    <li><a href="#div_b">B</li>
    <li><a href="#div_c">C</li>
  </ul>

  <div id="div_a"></div>
  <div id="div_b"></div>
  <div id="div_c"></div>

</div>

This does not initialise the tabs because of the asynchronous behaviour of the dialog I assume (because using setTimeOut the tabs work). How come that it works using Jquery 1.4.2 and not on 1.8.2 ?

Answer 1

It's hard to tell why it worked without a closer look, but it seems that it worked by chance.

Anyway, you can use dialog's open event to configure your tabs

$("#popup").dialog({
    //[other configs]
    open: function(){
        $("#tabs").tabs({
            disabled: [1, 2]
        });
    }
});

Or

$("#popup").on("dialogopen", function(){
    $("#tabs").tabs({
        disabled: [1, 2]
    });
});