StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery tabs - getting newly selected index
text
Body
copied!<p>I've previously used <a href="https://jqueryui.com/tabs/" rel="nofollow noreferrer"><code>jquery-ui tabs</code></a> extension to load page fragments via <code>ajax</code>, and to conceal or reveal hidden <code>div</code>s within a page. Both of these methods are well documented, and I've had no problems there.</p> <p>Now, however, I want to do something different with tabs. When the user selects a tab, it should reload the page entirely - the reason for this is that the contents of each tabbed section are somewhat expensive to render, so I don't want to just send them all at once and use the normal method of toggling 'display:none' to reveal them.</p> <p>My plan is to intercept the tabs' <code>select</code> event, and have that function reload the page with by manipulating document.location.</p> <p>How, in the <code>select</code> handler, can I get the newly selected tab index and the html LI object it corresponds to?</p> <pre><code>$('#edit_tabs').tabs( { selected: 2, // which tab to start on when page loads select: function(e, ui) { var t = $(e.target); // alert("data is " + t.data('load.tabs')); // undef // alert("data is " + ui.data('load.tabs')); // undef // This gives a numeric index... alert( "selected is " + t.data('selected.tabs') ) // ... but it's the index of the PREVIOUSLY selected tab, not the // one the user is now choosing. return true; // eventual goal is: // ... document.location= extract-url-from(something); return false; } }); </code></pre> <p>Is there an attribute of the event or ui object that I can read that will give the index, id, or object of the newly selected tab or the anchor tag within it? </p> <p>Or is there a better way altogether to use tabs to reload the entire page?</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