Inconsistent behavior of Dialog instantiation

Inconsistent behavior of Dialog instantiation

Hi, I have moved this post for jQuery UI Dialog API redesign to here as that is what the observers of that topic suggested.  So this is a repost of one of the comments #21 at  http://forum.jquery.com/topic/dialog-api-redesign.

Hi Team,
Love your work and I'd love to know how to post some updates to the existing documentation. I am using a dev pattern of  running all my jquery and jquery-ui stuff inside of a $(document).ready(function() { // code in here ;}); construct.  And I found the only way I was able to make $('.selector').dialog("open") work was to create an options object and then on the desired event fire $('.selector').dialog(myOptionsObj).dialog("open").
I am on jquery 1.8.3 and jqueryui 1.9.2.

The docs on the jquery-ui website suggest that
$('.selector).dialog({ variousOptions: val , ... });
$('.controllerSelector').click(function() {
  $('.selector').dialog("open");
}

But it fails in my context.
My context is a "base" page with multiple jQuery UI remote tabs (remote in the sense that their content is loaded from html files that I control but such content is not necessary static).

I have included the code for the 3 html pages to make the problem/feature repeatable. To see what is either a bug or a feature, one needs to comment out one version of the jQuery code in the document ready function in the tm2.html file and uncomment out the second version of the code.  As attached, I have the working jQuery code in the tm2.html file, but to repeat my problem (or thing that I wish to help document if it is a feature), just uncomment out the currently comment out block in tm2.html and remove the /* and */ that is there to show how the jQuery UI code docs fail in this scenario.

It's possible that I misunderstand many aspects of jQuery and jQuery UI, so feel free to just educate me as to what I have misunderstood or let me know how I can help improve the documentation.

Thanks,
Steve

here is the "master.html" page

  3. !DOCTYPE html>
  4. <html>
  5.   <head>
  6.     <title>Master tabs page</title>
  7.     <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"/>
  8.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  9.     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
  10.     <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
  11.     <script>
  12.       $(document).ready(function() {
  13.         myTabs = $('#tabsDiv').tabs();
  14.         myTabs.tabs({
  15.            ajaxOptions: {   cache: false
  16.                                 , error: function( xhr, status, index, anchor ) {
  17.                                     $( anchor.hash ).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo." );
  18.                                   }
  19.                               }
  20.                             });
  21.       });
  22.     </script>
  23. <body>
  24.   <div id="tabsDiv" class="ui-tabs-panel">
  25.     <ul>
  26.         <!-- local page1 is a plain hello world page -->
  27.         <li><a id="frag-0" href="someLocalPage1.html">Local Page 1</a></li>
  28.         <!-- next element has the contents of the above modal dialog code presented -->
  29.         <li><a id="frag-1" href="tm2.html">Page W/Dialog</a></li>
  30.     </ul>
  31.   </div>
  32.   </body>
  33. </html>
here is the dummy local page (someLocalPage1.html)

  3. <!DOCTYPE html>
  4. <html>
  5.   <head>
  6.     <title>Domb hello page</title>
  7.     <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
  8.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  9.     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
  10.     <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
  11. <body>
  12.   <h2>Hello</h2>
  13. </body>
  14. </html>
and here is the tm2.html page that illustrates the problem. To see the fixed version of the problematic code, leave this file as is; to see the problematic code, remove the "/*" and "*/" from lines 13 and lines 33 respectively and add such corresponding comment block markers to lines lines 33 and end of line 56

  3. <!DOCTYPE html>
  4. <html>
  5.   <head>
  6.     <title>Illustrate working modal dialog from within doc ready function in a jquery ui remote tabbed context</title>
  7.     <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
  8.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  9.     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
  10.     <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
  11.     <script>
  12.       $(document).ready(function() {
  13.         //the following fails with a "Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'"
  14.         /*
  15.         $('#modalDialogDiv').dialog({
  16.             title: 'Foo'
  17.           , autoOpen: false
  18.           , width: 750
  19.           , height: 500
  20.           , modal: true
  21.           , buttons: {
  22.               "Add Record": function() {
  23.                  console.log("record add button was pressed");
  24.               }
  25.             }
  26.           , close: function() {
  27.                 console.log("dialog was closed");
  28.             }
  29.         });
  30.   
  31.         $('#controllerButton').click(function() {
  32.           $('#modalDialogDiv').dialog("open");
  33.         });
  34.         */
  35.         /* the following however works inside of document ready */
  36.         var myOptionsObj = {
  37.             title: 'Quick Add a New Record'
  38.           , autoOpen: false
  39.           , height: 500
  40.           , width: 750
  41.           , modal: true
  42.           , buttons: {
  43.               "Add Record": function() {
  44.                  console.log("record add button was pressed");
  45.               }
  46.             }
  47.           , close: function() {
  48.                 console.log("dialog was closed");
  49.             }
  50.         };
  51.   
  52.         //failure to add the following line causes the modal data entry form to be displayed by default
  53.         $('#modalDialogDiv').dialog(myOptionsObj);
  54.   
  55.         $('#controllerButton').click(function() {
  56.           $('#modalDialogDiv').dialog(myOptionsObj).dialog("open");
  57.         });
  58.       }); //end doc ready function
  59.     </script>
  60.   </head>
  61.   <body>
  62.     <div id="modalDialogDiv">
  63.       <form id="quickAddRecordForm">
  64.         <label for="lastname">Last Name: </label>
  65.         <input id="lastname" type="text" name="lastname" />
  66.       </form>
  67.     </div>
  68.     <div id="demoDiv">
  69.       <button id="controllerButton">Quick Add  Record</button>
  70.     </div>
  71.   </body>
  72. </html>
Any help in understanding this issue would be greatly appreciated.
For what it's worth, I would not be surprised if the poster of
http://forum.jquery.com/topic/dialog-box-not-opening-in-ie8 is really victim of this same quirk.

Thanks,
Stephan Doliov