title: Database generate jquery tabs
body: <p><strong>UPDATE 2:</strong></p>
  
  <p>For simpler scripts, you would use jquery live to work with dynamically created dom.  Is that what the problem is here?</p>
  
  <p><strong>UPDATE 1:</strong></p>
  
  <p>I have tried moving the ajax for <code>get_tab_frame.aspx</code> out of the <code>$("#tabs").tabs({</code> section, which gives strange results, i.e. it will just return the tab names unformatted without the tab contents.  Then clicking on these unformatting tabs, just open a new windows instead of showing the tab content.</p>
  
  <p><strong>ORIGINAL QUESTION:</strong></p>
  
  <p>The following script works well, which simply creates 3 tabs and gets the content of each tab from <code>tabs.aspx</code> based on the query string <code>tab</code>:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt; 
          &lt;title&gt;&lt;/title&gt; 
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;
          &lt;link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" /&gt;
  
          &lt;script type="text/javascript" language="javascript"&gt; 
              $(document).ready(function() {
                  $("#tabs").tabs({
                      ajaxOptions: {
                          success: function(){
                              $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
                                  .find( ".portlet-header" )
                                      .addClass( "ui-widget-header ui-corner-all" )
                                      .end()
                                  .find( ".portlet-content" );
  
                              $(".column").disableSelection();
                          }
                      }
                  });
              });
          &lt;/script&gt;
  
          &lt;style type="text/css"&gt;
              .column { width: 170px; float: left; padding-bottom: 100px; }
              .portlet { margin: 0 1em 1em 0; }
              .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
              .portlet-header .ui-icon { float: right; }
              .portlet-content { padding: 0.4em; }
              .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
              .ui-sortable-placeholder * { visibility: hidden; }
          &lt;/style&gt;
      &lt;/head&gt; 
      &lt;body&gt; 
          &lt;div id="tabs"&gt;
          &lt;ul&gt;
              &lt;li class="tab" id="tab_1"&gt;&lt;a href="tabs.aspx?tab=1"&gt;Default&lt;/a&gt;&lt;/li&gt;
              &lt;li class="tab" id="tab_2"&gt;&lt;a href="tabs.aspx?tab=2"&gt;Reports&lt;/a&gt;&lt;/li&gt;
              &lt;li class="tab" id="tab_3"&gt;&lt;a href="tabs.aspx?tab=3"&gt;Other&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>
  
  <p>I am now trying to database generate the content of <code>id="tabs"</code> and use jquery to insert the generated html into the <code>id="tabs"</code> div tab using the following script:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt; 
          &lt;title&gt;&lt;/title&gt; 
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;
          &lt;link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" /&gt;
  
          &lt;script type="text/javascript" language="javascript"&gt; 
              $(document).ready(function() {
                  $("#tabs").tabs({
                      ajaxOptions: {
                          success: function(){
                              $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
                                  .find( ".portlet-header" )
                                      .addClass( "ui-widget-header ui-corner-all" )
                                      .end()
                                  .find( ".portlet-content" );
  
                              $.ajax({
                                  url: 'get_tab_frame.aspx?rand=' + Math.random(),
                                  type: 'GET',
                                  error: function(xhr, status, error)
                                  {
                                      alert(status);
                                      alert(xhr.responseText);
                                  },
                                  success: function(results) 
                                  { 
                                      $("#tabs").empty().html(results);
                                  }
                              });
  
                              $(".column").disableSelection();
                          }
                      }
                  });
              });
          &lt;/script&gt;
  
          &lt;style type="text/css"&gt;
              .column { width: 170px; float: left; padding-bottom: 100px; }
              .portlet { margin: 0 1em 1em 0; }
              .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
              .portlet-header .ui-icon { float: right; }
              .portlet-content { padding: 0.4em; }
              .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
              .ui-sortable-placeholder * { visibility: hidden; }
          &lt;/style&gt;
      &lt;/head&gt; 
      &lt;body&gt; 
          &lt;div id="tabs"&gt; &lt;/div&gt;
      &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>
  
  <p>This is not working for some reason.  I just get a blank screen even though <code>get_tab_frame.aspx</code> produces exactly the same html i.e.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="tab" id="tab_1"&gt;&lt;a href="tabs.aspx?tab=1"&gt;Default&lt;/a&gt;&lt;/li&gt;
      &lt;li class="tab" id="tab_2"&gt;&lt;a href="tabs.aspx?tab=2"&gt;Reports&lt;/a&gt;&lt;/li&gt;
      &lt;li class="tab" id="tab_3"&gt;&lt;a href="tabs.aspx?tab=3"&gt;Other&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What am I doing wrong and how do I get this to work?</p>