Databases
StackOverflow2013
Postsdbo
POjQuery tabs "add" method creates two <div> elements
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery tabs "add" method creates two <div> elements
    text
    copied!<p>I'm frustrated by the fact that the "add" method in jQuery's tabs ui is adding an extra tab-panel div to my "#tabs" element. This is the line of code I'm using to add a tab showing a calendar that gets its content via Ajax:</p> <pre><code>$("#tabs").tabs("add", "tabContent.php?id=48&amp;tab=calendar", "Calendar"); </code></pre> <p>Initially there was only one tab and now there should be two. Indeed, two tabs now exist in the <code>&lt;ul&gt;</code> element, but there are mysteriously now three <code>&lt;div&gt;</code> elements corresponding to tab panels as shown below. This wouldn't be a problem if not for the fact that one of the newly created <code>&lt;div&gt;</code> elements is not hidden even though it corresponds to an inactive tab. As a result, the <code>&lt;div&gt;</code>, though empty, takes up a block of space at the bottom of my first and original tab panel. Sorry for the cluttered code, but I included all the raw jQuery markup to show exactly what jQuery did.</p> <pre><code>&lt;div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all"&gt; &lt;ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"&gt; &lt;li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"&gt;&lt;a href="#tabs-1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt; &lt;li class="ui-state-default ui-corner-top"&gt;&lt;a href="#ui-tabs-2"&gt;&lt;span&gt;Calendar&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"&gt; Original Tab &lt;/div&gt; &lt;!-- Why are there two divs here?? --&gt; &lt;!-- Note that first &lt;div&gt; below not given class 'ui-tabs-hide' --&gt; &lt;div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom"&gt;&lt;/div&gt; &lt;div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Notice the two <code>&lt;div&gt;</code> elements at the bottom where there should only be one.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload