Confiforms Tabbed View in Dialog Mode

[Tim Oldendorf]

I am trying to used a tabbed view in my form. But I am finding that when the form is viewed in dialog mode and not embedded in the page, the tabs will not work. I am using Confiforms and for the tabs using HTML Elements plugin (I have tried other plugins as well). When the form is embedded on the page, it works with no problem. 

Is there anyway to initialize these tabs when the form is in dialog mode and not just when it is embedded on the page? Any help is appreciated! Thanks!

[Alex Medved _ConfiForms_ · Accepted solution]

@Tim Oldendorf @Davin Studer

I have created a small tutorial to demonstrate how ConfiForms can be used in dialog mode with tabbed contents (using Refined Toolkit UI tabs)

I hope it helps you.

[Davin Studer]

Thanks sir.

[Davin Studer · Accepted solution]

I'm seeing the same behavior. I've tried a number of things and cannot seem to get it to work either. I even tried re-initializing the tabs after the dialog has opened using AJS.tabs.setup(); and that didn't work either. It probably has something to do with how they are dynamically adding the form when the dialog opens. I would suggest raising a suggestion with Vertuna. They are pretty responsive to suggestions.

[Davin Studer]

I think it has to do with the fact that when you use a ConfiForm via dialog mode the html elements that make up the form are duplicated in the page source. Thus there are two sets of tabs on the page with the same ID, which I think is confusing the AUI tabs.

[Davin Studer]

After messing around a bit I'm pretty sure this is indeed the issue. I manually changed the ID's in the page source after the page has loaded and the dialog opened and I was able to get the tabs to work.

[Tim Oldendorf]

Hi Davin - 

Reaching out to Vertuna, was told that if I know what needs to be called to initialize the tabs, then I can easily add the Javascript calling Confiforms Field Definition rule and do it every time the form is initilized. Which kind of sounds like what you did in your first comment, right?

[Davin Studer]

That is what I did and that is not the issue. The issue is that when you do a form in dialog mode it creates the form on the page in a hidden fashion and when you click the button to open the dialog the form's DOM (document object model) is cloned which ends up duplicating the id's on the page. This is an HTML no no. There should never be multiple DOM nodes with the same id because when you try to target that node via JavaScript odd things can happen as it does not know which node you are referring to. I verified this by opening up the page source and manually changing the tab id's in the dialog box to be unique. When I did that the tabs started working.

[Davin Studer]

So, the JavaScript code in the article that Alex provided will not work for the Keysight tabs, which are really just based on the Atlassian AUI tabs. I have modified his JavaScript function to work with the Keysight app. The below script just modifies the tab ids within the popped up form,  re-points the tab anchors, and then re-initializes the tabs. This should work for top-level and nested tabs.

<script type="text/javascript">
function initTabs(formId) {
    AJS.$('#' + formId + ' .aui-tabs .menu-item a').each(function(){
        AJS.$(this).attr('id', AJS.$(this).attr('id') + '-cloned');
        AJS.$(this).attr('href', AJS.$(this).attr('href') + '-cloned');
    });

    AJS.$('#' + formId + ' .aui-tabs .tabs-pane').each(function(){
        AJS.$(this).attr('id', AJS.$(this).attr('id') + '-cloned');
    });

    AJS.tabs.setup();
}
</script>

[Alex Medved _ConfiForms_]

Thank you Davin!

I believe this shall work with Navitabs app as well, as it is also based on AUI tabs component from Atlassian

[Davin Studer]

Yep, it should work with Navitabs as well.