Save a tab in a jQuery Modal Window for future Display

Question

Hello, long time reader, first time poster.

I’m coming with an issue that many of you will find trivial but I’m bashing my head against it for too long time and I can’t seems to find any clue on the internet.

As a total scrubs with JavaScript, I’m trying to use JQuery.ui smartmodal windows (v 1.8.rc1) for displaying two football teams in two separate tabs. Like France in Tab(0) and England in Tab(1).

When I open this modal window, the first tab (France) is always opened by default.

Everything’s fine until here : I’m trying to improve this modal window by remembering what was the last Tab the user was looking when he closed the modal, for reopening it (in spite of the first tab, by default) when the user will reopen this modal latter on.

I’ve already tried to use the “selecting & loading a jquery tab programatically » method but without any kind of success, and I’m slowly running out of options (and time).

Thanks for reading me, if you have any idea on how can I use a parameter in the smartmodal call, that would greatly help me.

Answer 1

If I understand correctly your tabs are inside this modal? What you could do is set a cookie, containing a value that corresponds with the last selected tab. You server side code can then set a javascript variable containing this value. When calling the dialog/tab you can use this value to set the selected tab again.

Answer 2

You can select which tab is "opened" by using the .tabs("select", index) method.

For instance:

$("#myTabs").tabs("select",1);

would select the second tab.

At that point it is simply a matter of storing the index of the previously selected tab somewhere accessible (the best location for that information is up to you and your particular problem). You can trigger this storage attaching an event handler for the select event, which will get called every time a user changes the tab being shown.

$("#myTabs").bind( "tabsselect", function(event, ui) {
  alert("Tab index selected: " + ui.index);
});

If you are having trouble with this method make sure you are triggering the select command in the proper location (i.e. after the tabs have been correctly initialized) and make sure you are storing the last selected tab in a good location that doesn't go away when the modal closes.