Unselect tabs on load (JS)

[becca]

Been searching through the form for code to select a tab but haven’t found much to test with. I’ve played with adding sTab= to the url, set as nothing or a number higher than the amount of tabs I have, but it defaults to tab 0 on error. I’ve tried spjs.dffs.toggleVisibleTab(“mytab”,false); and spjs.dffs.toggleSelectedTab(“mytab”); with all rules disabled. Visible works with “myUniqueID”, ‘myUniqueID’, “myTabIndex”, and ‘myTabIndex’. Selected didn’t work with anything in the () but didn’t throw errors for valid unique IDs or indexes. $(“#dffs_tab_1”).hide(); works but $(“#dffs_tab_1”).select(); does not work. Since I can’t get a tab to select I can’t work on making a tab unselect :\

I want to set my display page to not have any tab selected on load so that none of the fields are in view. This will give me a more condensed view and will keep the initial focus on the flow I have above the form which is determined by fields in the form. My end goal is to have overview interaction up top with the option to look at all the details if really needed by then clicking into the tabs, better user experience.

(I feel like I’m one of the more annoying users here since I’m so nit-picky, but the more by bosses like what I can accomplish the more I sing this tool’s praises so I like to imagine it’s worth it lol)

[Alexander Bautz]

I haven’t designed it to actually allow for no selected tab initially, but you can do it buy creating a dummy tab as you first tab. You must add one HTML section to this tab to ensure it is not empty. You don’t need to add any actual HTML content to it, it just needs to sit there to ensure the tab is not completely empty because the default behavior for an empty tab is to show all fields.

Then add this to your Custom CSS:

#dffs_tab_0{
  display:none;
}

You should now have the layout you want.

Alexander

[becca]

PERFECTION. This looks so much cleaner. Any idea why my tab selection code wasn’t working though? That could still be useful down the road, and it strikes me as odd that the exact code that has worked for others isn’t working even with all rules disabled (also this view doesn’t have any code that could effect it).

[Alexander Bautz]

I’m glad it worked. When using spjs.dffs.toggleSelectedTab you can only actually toggle it “on” and not “off” – maybe the function name is a bit misleading.

$(“#dffs_tab_1”).select(); wont work – use $(“#dffs_tab_1”).show() if you want to show a tab you have hidden with $(“#dffs_tab_1”).hide();

Alexander

[becca]

For toggleSelected I was trying to use it to select a different tab than the default, what would be the correct code to do so? Show/hide is not what I’m looking for, also those work as intended, I only mentioned them since I was looking at working code to try and guess what might the correct format for selection.

[Alexander Bautz]

When selecting a tab with code you can either pass the index or the tab unique id (you find it in the tabs configuration in DFFS backend).

Alexander

[becca]

spjs.dffs.toggleSelectedTab(‘0’); ended up being very useful for making a button to reset the page, thanks for the clarification on toggleSelectedTab

[Author]

Posts