JQuery UI Nested Tabs - Load AJAX content into a single DIV -
all,
I'm using the jQuery UI nested tabs to consider this type of structure There are 2 main tabs: Animals, Birds. Under the animal, two tabs "cats", "dogs" are both tabs "cats" and "dogs" should be loaded via AJX when clicked. Therefore, the code for them is something like this:
& lt; Div id = "fragment-1" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "/ public / catstab" & gt; & Lt; Span & gt; Cats & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ public / dogstab" & gt; & Lt; Span & gt; Dogs & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Script type = "text / javascript" & gt; $ (Document) .ready (function () {$ ("# tabs-loading-message") Show (); $ ('# fragment-1'). Tab ({cache: false, spinner: ''}) ;}); & Lt; / Script & gt;
When I switch tabs for "dogs", I found that the Jquil HTML was generated for the "Cat" tab, it still exists on the page (hidden) In the state, but still accessible) and vice-versa. So if there are general elements in both tabs, then this will be a problem .. How can I decide that there is only one empty div and it loads and whatever tab is loading or switching Is it republished?
Hmm ... I may be wrong, but I thought you would get the tab content of each tab The placeholder divis is required, even if each tab is dynamically loaded like this:
& lt; Div id = "fragment-1" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "/ public / catstab # cats" & gt; & Lt; Span & gt; Cats & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ public / dogstab # dogs" & gt; & Lt; Span & gt; Dogs & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "cats" & gt; & Lt; / Div & gt; & Lt; - This placeholder div & lt; Div id = "dogs" & gt; & Lt; / Div & gt; & Lt; / Div & gt;
Note the additional '#' identifier at the end of the URL.
Comments
Post a Comment