Display links in dynamic tabs

Question

The website I'm working with involves a lot of report viewing. The design requirement is such that whenever the user chooses to open another page[from the navigation pane]; instead of replacing the existing page it needs to add another dynamic tab and display the same in the new tab. This is so that the user can go back and forth the tabs and view the necessary reports.

Now I'm not talking about opening the links on a new browser tab, but on the same page with a dynamic tab where the user can simply move back and forth the open dynamic tabs[webpages] quickly.

This was previously implemented using Smart GWT Tabs, but now we want to do away with Smart GWT hence looking for a better alternative to implement the same. It starts off at first with a single tab[home page], adds on tabs which can be switched to later on as and when links are clicked on.The content of webpages that need to be opened in tabs would be mostly in a lot of nested tables, and have quite a bit of javascript to perform various other functions on the information displayed.

What are my best option(s) to achieve this other than SmartGWT or should I be sticking to it? Kindly do post some code snipets if I could do this with javascript

Are you looking for a solution with or without GWT? (but without Smart GWT in any case) — Thomas Broyer, Jul 15 '15 at 20:50
Gwt is fine, if there are no better alternatives. The bootstrap solution seems interesting, should perform better as well compared to smart gwt on the whole, if i get that to work fine — Nithin, Jul 15 '15 at 20:57

score 0 · Answer 1 · answered Jul 15 '15 at 20:29

0

My recommendation is to use Bootstrap with combination with jQuery - they fit perfectly together since Bootstrap is based on jQuery. Bootstrap has really nice (and cleanly written) javascript components that you can customize / manipulate using jQuery.

Tabs definition in HTML: see this Bootstrap manual section.

Adding new tab dynamically is just about simple jQuery function:

function addTab() {

   // add tab navigation element (append li element to section commented as Nav tabs)
   // add tab content (append div element to section commented as Tab panes)

}

That's it. Few lines of code. No need to implement switching tabs - Bootstrap's javascript does this for you.

If you need complete example, let me know, but I believe you should get the idea and the implementation is really basic jQuery exercise.

answered Jul 15 '15 at 20:29

Pavla Nováková

796
4
11

Will this implementation require me to add the div content for all the links that might get pressed? Or will the div content of the page, be populated to the tab pane only when the particular link is clicked on? I want the tab pane itself to consist of just the home page and get populated as and when a link is clicked upon – Nithin Jul 15 '15 at 20:38
No, you can let those content divs empty for example and on show event (http://getbootstrap.com/javascript/#tabs-events) put the content in the tab - div element (using single ajax call). – Pavla Nováková Jul 15 '15 at 20:48
That sounds good. I'll try it out and report further. Oh and is there any other working code demonstrating the same? Not the whole thing, just some more detailed code snipets perhaps? – Nithin Jul 15 '15 at 20:54
This example: http://eric.sau.pe/bootstrap-tabs-with-dynamic-content-loading/ looks like a good inspiration. – Pavla Nováková Jul 15 '15 at 21:13

Anders · Accepted Answer · 2015-07-21T19:39:46.433

0

I think you should have a look at jQuery Tabs. It can do exactly what you want. The link has a number of examples of how you can use it (with source code to review). Take a look at the examples named "Content via AJAX" and "Simple manipulation". Combined they are sort of what you want, if I understand you right.

Based on those I constructed a rough outline of how to do it. It is not intended for a quick copy paste, and it has not been tested.

First of all you need to set up the pages that the navigation links to so they only return the content of the body - no <html> or <head> tags. Here is the JavaScript:

var tabs;

//When the DOM is ready.
jQuery(function() {

    //Save a reference to the tabs div for future use.
    tabs = jQuery("#tabs");

    //Activate the tabs.
    tabs.tabs();

    //Add the default tab.
    addTab('index.html', 'Welcome!');

    //Add click events for the navigation links.
    jQuery(".navlink").click(function(event) {

        //What page was the link to?
        url = jQuery(this).attr('href');

        //And what is the text of the link?
        title = jQuery(this).html();

        //Add that tab.
        addTab(url, title);

        //Don't actually go to the url of the clicked link.
        event.preventDefault();

    });

});

function addTab(url, title) {

    //Find any tabs with this URL
    open = tabs.find('.ui-tabs-nav a[href=' + url + ']');

    //Is there already one?
    if(open.length) {

        //Get the index of that tab.
        i = open.parent().index()

        //Switch to that tab.
        tabs.tabs("option", "active", i);

    }
    else {

        //Add an item to the list of tabs.
        tabs.find('.ui-tabs-nav').append('<li><a href="' + url + '">' + title + '</a></li>');

        //And update to activate the tab.
        tabs.tabs("refresh");

    }

}

...and here is the HTML:

<a class="navlink" href="one.html">One</a>
<a class="navlink" href="two.html">Two</a>
<div id="tabs">
    <ul>
        <!-- All the tabs will be added here. -->
    </ul>
    <!-- And all the content of the tabs here. -->
</div>

edited Jul 21 '15 at 19:39

answered Jul 15 '15 at 20:30

Anders

8,307
9
56
88

I don't want the contents of a single page to be broken up into multiple tabs. I want contents of a full webpage be displayed in a separate tab when the user clicks on the the link to the intended webpage, basically the whole div with all its contents should be displayed. I don't want this behavior by default, I'd like the new tabs to be populated ONLY when he wishes to view the page, which he would do by clicking on a link. Following which a new tab is created and the contents are populated into it – Nithin Jul 15 '15 at 20:46
You can do that using AJAX. I will update my example with a more specific example. – Anders Jul 15 '15 at 20:57
I updated it. Please note that I have not tested the code. – Anders Jul 15 '15 at 21:49
New to jQuery so haven't been able to get it to work yet, but i know now that its possible to do it using this. If you by any chance get the time, to post some code which would just work by copy paste[no matter how simple it looks], that'd be very helpful. Nevertheless thank you! – Nithin Jul 16 '15 at 17:36
I have no place where I can try this and make actual AJAX calls, so cant help you right now. When I try it on JSFiddle it seems to work though, only problem being that the AJAX calls are blocked. So it looks positive, but I make no promises. – Anders Jul 16 '15 at 19:57
Yeah, it worked after a few changes, still needs changes to perfect it though but its a start. I tried editing the prev comment here but it was too late to edit. Thanks once again. Also why is it necessary to just have the body contents? Why not the whole html? It still seemed to work with the whole html? – Nithin Jul 16 '15 at 20:07
Yeah, it needs some work. For instance it lets you open the same tab many times instead of switching to the open one if you click the link again. The reason you should just have the content of the body is that inserts whatever the file contains into the `
`. If there are `` tags in the file they will be put inside the `
`. While some browsers might ignore this and render it anyway, it is not correct HTML and some browsers might not accept it.
– Anders Jul 16 '15 at 20:16
Yes I noticed that, will need to fix that. Also need to have a way to close the tabs as well. Not sure where to start looking, but I'm guessing I could find more info about it in the documentation perhaps? Ah that's right, thanks for pointing that out too. – Nithin Jul 16 '15 at 20:21
[This](https://jqueryui.com/tabs/#manipulation) example has close buttons on the tabs. A tip for how to check if a tab is already open: `jQuery('.ui-tabs-nav a[href=index.htm]')` will find any tab links going to `index.html`. – Anders Jul 16 '15 at 20:55
So I finished working on the other stuff and now I've started working on the tabs. Currently, while navigating to and fro, the opened tabs, they reload the page every time instead of pointing to the div itself which is inserted into the main html. How can I change this behavior? – Nithin Jul 21 '15 at 17:49
I've changed the code to pull data from the url, put into the div. Before this change it used to reload the page every time i move to and fro between the tabs. Still not able to get it to open existing tab to open in case if its already open though. – Nithin Jul 21 '15 at 19:18
Don't know if your modifications changed this, but is the URL still in the `href` attribute of the link in the tab? Will update my answer with a solution to the problem in that case. – Anders Jul 21 '15 at 19:26
Updated. Now that I read your comment I am not sure I actually tried to fix what you asked for, let me know if I didn't. The tab switching is based on msolimans answer [here](http://stackoverflow.com/questions/15304027/how-to-change-tabs-programmatically-in-jquery-ui-1-9). – Anders Jul 21 '15 at 19:41
Yeah, the href now contains unique div-id generated by the counter, instead of index.html. I read his answer, unfortunately didnt make sense to me :( – Nithin Jul 21 '15 at 19:49
Look at my code. The only thing you need to replace is instead of matching `'.ui-tabs-nav a[href=' + url + ']'` you need to match something else to find the tab. For instance you could put a custom attribute called `data-tab-url` or something like that on the tab and then match that attribute. Don't want to modify the code in my anser, since that would break the existing logic. – Anders Jul 21 '15 at 19:51

Display links in dynamic tabs

2 Answers2