title: JQuery UI Tab and Dialog: Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
body: <p>Recently, I developed my main page by using jQuery UI Tab and Dialog control. There are two tabs in the main UI, one is for "Book" form, and another is for "Paper" form(Book and Paper are my business entity page). When I first run the program, everything is ok, but not work in the second time, it will throw an exception:</p>
  
  <pre><code>Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
  </code></pre>
  
  <p>After try many times, I dont use Tab control, just put two button on main page, and do the similar tasks, everything is fine even I run many times. So I think it's the problemm of Tab control.</p>
  
  <p>Switching Tab items and using firebug to watch html body information, I noticed that there will be append one new div row in every switch operation:</p>
  
  <pre><code>&lt;div id="tabsProductMain" class="tabs-bottom ui-tabs ui-widget ui-widget-content ui-corner-all"&gt;
  &lt;div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: none;" aria-live="polite" aria-labelledby="ui-id-2" role="tabpanel" aria-expanded="false" aria-hidden="true"&gt;
  &lt;div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;" aria-live="polite" aria-labelledby="ui-id-3" role="tabpanel" aria-expanded="true" aria-hidden="false"&gt;
  &lt;ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-bottom ui-corner-all" role="tablist"&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; outline: 0px none; z-index: 1000; position: absolute;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1"&gt;
  &lt;div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; outline: 0px none; z-index: 1000; position: absolute;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1"&gt;
  &lt;div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="outline: 0px none; z-index: 1002; position: absolute; height: auto; width: 400px; top: 39.0003px; left: 428px; display: none;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1"&gt;
  &lt;div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; outline: 0px none; z-index: 1000; position: absolute;" tabindex="-1" role="dialog" aria-labelledby="ui-id-2"&gt;
  &lt;div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; outline: 0px none; z-index: 1000; position: absolute;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1"&gt;
  </code></pre>
  
  <p>You can see that there are too many new abundant div element appended the last with <strong>tabindex="-1"</strong> and <strong>aria-labelledby="ui-id-1"</strong>.</p>
  
  <p>Can anyone find a solution to resolve this situation? otherwise, it will throw error in the second operation. Maybe I miss some point by using Tab control? Please can someone make any suggestion? thanks.</p>
  
  <p>The main page code is here:</p>
  
  <pre><code>&lt;script&gt;    
  $(function () {
              $("#tabsProductMain").tabs();
  
              $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav &gt; *")
                  .removeClass("ui-corner-all ui-corner-top")
                  .addClass("ui-corner-bottom");
  
              $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
  
              initializeTabs();
          })
  
          function initializeTabs() {
              var urlBook = "/DialogWebApp/ProductMain/BookDialog";
              var urlPaper = "/DialogWebApp/ProductMain/PaperDialog";
  
              //dynamically add new tab item
              $("#tabsProductMain").tabs('add', urlBook, 'Books');
              $("#tabsProductMain").tabs('add', urlPaper, 'Papers');
  
              //remove the default one
              $("#tabsProductMain").tabs('remove', 0);
          }
  &lt;/script&gt;
  
      &lt;div id="tabsProductMain" class="tabs-bottom"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#fragement-1"&gt;&lt;span&gt;One&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id="fragement-1"  style="width:600px;height:500px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>BookDialog code is here, and PaperDialog code is similar with BookDialog:</p>
  
  <pre><code>&lt;script type="text/ecmascript"&gt;
      $(function () {
          $("#BookDialog").dialog({
              autoOpen: false, width: 400, height: 330, modal: true, title: "Book Form"
          });
          $("#BookDialog").html("").load("/ProductWebPortal/Product/Detail2/5")
      })
  
      function onOpenBookDialog() {
          $("#BookDialog").dialog("open");
      }
  &lt;/script&gt;
  &lt;div&gt;
      &lt;input type="button" id="btnOpenDialog" value="open book" onclick="onOpenBookDialog();"/&gt;
      &lt;div id="BookDialog" style="display:none;width:550px;height:550px;"&gt;simple div&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>