Targeting Default Tabs

[John L.]

Hi All,

We are working on a plugin that requires us in the backend to split the viewing of information into tabs (on the admin-side). I took a look at the HTML code generated for tabs and I don't see a way to target a tab after you have done something. So let me explain the scenario:

1. You login to the backend and visit "Create Cool Node".
2. You enter in your basic information and save that node.
3. Once created that node has 3 new tabs (Cool Options, Cool People, and Cool Things).
   1. Note, the default tab is called "General Cool".
4. You want to create a new cool option so you click on the "Cool Options" tab.
5. You click to add a new "Cool Option" and fill in that information. Hit Save...

I'll stop the scenario here. Now, when we hit save it takes us to back to the default first tab (General Cool) under "Edit Cool Node". Ideally we would like it to take us to the "Cool Options" tab under "Edit Cool Node". How do we do that? Right now I see no way of targeting those tab, either by URL or some other method. Thanks for the help!

I'll provide screens if this is too confusing.

 

[John L.]

Does anyone have any idea?

 

[ragtek]

10$ and you'll get the info (Took me 2 days for research... )

For example, if you want to set the 3rd tab from the profile as active on pageload:

<script type="text/javascript">
$(document).bind('XenForoActivationComplete', function(){
    $tabContainer = $('#profiletabs');

var $api = $tabContainer.data('tabs');
$current = $api.click(2);
});

</script>

so you'll need your own event, which gets fired after the save and etc... (see my code^^ )
this way i can manipulate the tab via url:

<script type="text/javascript">
    $(document).bind('XenForoActivationComplete', function() {
        $test = document.URL.split("#")[1];
        if ($test && $test == 'invitestab') {
            $tabContainer = $('#ragtektabs');
            var $api = $tabContainer.data('tabs');
            $current = $api.click(1);
        }
    });

</script>

now kier & mike need only to implement the url support, so we can set the active tab via URL like in vB and i'm happy

 

[John L.]

We figured it out, but thanks for the info.

I believe URL support is already there, please see jQuery Tools (tabs) for more information.

 

[ragtek]

I believe URL support is already there, please see jQuery Tools (tabs) for more information.

Haven't found anything

 

[LiquidPro]

This functionality was already built into jQuery Tools. In your tab specification, put a link. For example...

<ul>
  <li><a href="#tab-1">Tab 1</a></li>
  <li><a href="#tab-2">Tab 2</a></li>
</ul>

Then if you put #tab-2 on the end of your URL it will take you to that specific tab.

 

[ragtek]

This functionality was already built into jQuery Tools. In your tab specification, put a link. For example...

<ul>
  <li><a href="#tab-1">Tab 1</a></li>
  <li><a href="#tab-2">Tab 2</a></li>
</ul>

Then if you put #tab-2 on the end of your URL it will take you to that specific tab.

http://xenforo.com/community/members/ragtek.82/#info ?? as you see it's not working

 

[John L.]

http://xenforo.com/community/members/ragtek.82/#info ?? as you see it's not working

I have not looked at those tabs, I am referring to tabs within the admin control panel. Those use jQuery Tools.

 

[LiquidPro]

I believe the href would have to be set to just "#info" instead of "/community/members/ragtek.82/#info".

 

[ragtek]

hm that's true, thx
but then no noob will be able to copy the link because it's then http://localhost/xenforo/#info and not http://localhost/xenforo/members/ragtek.1/#info (because of the false base
<base href="http://localhost/xenforo/" />
)
hm:/