Hi all, Is it possible to get the ID of the active tab on a form when

A Score Level 1
Hi all,

Is it possible to get the ID of the active tab on a form when a button is pressed?

Thanks...

OriginalPostID-84157

OriginalPostID-84157

  Discussion posts and replies are publicly visible

Parents
  • Here's how the example works:

    You can use JQuery to add a click event handler to the ‘a’ that is used as the title of the tab. With this approach you can perform actions every time the tab is selected. If you use Firebug or IE Developer tools you will be able to realize that the main tabs container has an id formed by the "#fd_component_" + window.FormDesigner.runtimeNamespace prefix plus the given id through the interface, therefore, you can retrieve this container with JQuery and search for its ‘a’ children and add a click handler.

    The following is a function that does that. Currently it will show an alert with the id of the selected tab, but you can remove the alert and add your logic there. I am retrieving the id of the clicked tab by parsing the href of the ‘a’ element that contains the title of the tab. This href is formed by the #tabWrapperContainerfd_component_JSON_TASK_NS prefix plus the tab id.

    function addClickEventToTab(tabContainerID){
    $('#fd_component_' + window.FormDesigner.runtimeNamespace + tabContainerID +' a').click(function() {
    var selectedTabHref = $(this).attr('href');
    var suffixOfTabHref = window.FormDesigner.runtimeNamespace;
    var offsetForTabId = selectedTabHref.indexOf(suffixOfTabHref) + suffixOfTabHref.length;
    var selectedTab = selectedTabHref.substring(offsetForTabId);
    alert('The following tab was clicked: ' + selectedTab);
    });
    }


    This example also shows how you can navigate through the tabs using a dropdown.

    The dropdown has a change event which calls the jumpToTab(tabContainerID,tabNumber) function. This function retrieves the tab container:

    var tabContainer = window.Build.util.getComponentContainer(tabContainerID, window.FormDesigner.runtimeNamespace)[0];

    Once we have the tab container we can retrieve all the links that represent each tab and filter using the eq() JQuery selector to pick the number of the tab we want to display-navigate to:

    $("#" + tabContainer.id + ' a:eq('+tabNumber+')').click();

    The process model is called Tab Clicked under Process Models – Forums. The JS is under Temporary Documents – JS Libraries and its name is addClickEventToTab.js.
Reply
  • Here's how the example works:

    You can use JQuery to add a click event handler to the ‘a’ that is used as the title of the tab. With this approach you can perform actions every time the tab is selected. If you use Firebug or IE Developer tools you will be able to realize that the main tabs container has an id formed by the "#fd_component_" + window.FormDesigner.runtimeNamespace prefix plus the given id through the interface, therefore, you can retrieve this container with JQuery and search for its ‘a’ children and add a click handler.

    The following is a function that does that. Currently it will show an alert with the id of the selected tab, but you can remove the alert and add your logic there. I am retrieving the id of the clicked tab by parsing the href of the ‘a’ element that contains the title of the tab. This href is formed by the #tabWrapperContainerfd_component_JSON_TASK_NS prefix plus the tab id.

    function addClickEventToTab(tabContainerID){
    $('#fd_component_' + window.FormDesigner.runtimeNamespace + tabContainerID +' a').click(function() {
    var selectedTabHref = $(this).attr('href');
    var suffixOfTabHref = window.FormDesigner.runtimeNamespace;
    var offsetForTabId = selectedTabHref.indexOf(suffixOfTabHref) + suffixOfTabHref.length;
    var selectedTab = selectedTabHref.substring(offsetForTabId);
    alert('The following tab was clicked: ' + selectedTab);
    });
    }


    This example also shows how you can navigate through the tabs using a dropdown.

    The dropdown has a change event which calls the jumpToTab(tabContainerID,tabNumber) function. This function retrieves the tab container:

    var tabContainer = window.Build.util.getComponentContainer(tabContainerID, window.FormDesigner.runtimeNamespace)[0];

    Once we have the tab container we can retrieve all the links that represent each tab and filter using the eq() JQuery selector to pick the number of the tab we want to display-navigate to:

    $("#" + tabContainer.id + ' a:eq('+tabNumber+')').click();

    The process model is called Tab Clicked under Process Models – Forums. The JS is under Temporary Documents – JS Libraries and its name is addClickEventToTab.js.
Children
No Data