locked
tab select event gets fired when moving away from the page RRS feed

  • Question

  • User-314657242 posted

    I have an angularJs based app, and in one page there's a bootstrap tabbed view. The outer page is handled through a controller, and each tab has its own factory.

    <section class="mainbar" data-ng-controller="addEditLocations as vm">
        <section class="matter">
            <div id="locationtitle"><h3>{{vm.locationTitle}} {{vm.locationSettings.basicSettings.location.locationName }}</h3></div>
                <tabset>
                    <tab heading="Basic Settings" select="vm.basicSettingsTabSelect()">
                        <div data-ng-include="'app/managelocations/addeditlocations/basicsettings/basicsettings.html'"></div>
                    </tab>
                    <tab heading="Operating Hours" select="vm.opHoursTabSelect()">
                        <div ng-if="vm.locationSettings.opHours.isSelected" data-ng-include="'app/managelocations/addeditlocations/ophours/ophours.html'"></div>
                    </tab>
                    <tab heading="Holidays" select="vm.holidaysTabSelect()">
                        <div ng-if="vm.locationSettings.holidays.isSelected" data-ng-include="'app/managelocations/addeditlocations/holidays/holidays.html'"></div>
                    </tab>
                    <tab heading="Products & Services" select="vm.servicesTabSelect()">
                        <div ng-if="vm.locationSettings.services.isSelected" data-ng-include="'app/managelocations/addeditlocations/services/services.html'"></div>
                    </tab>
                    <tab heading="Message Templates" select="vm.messageTemplateTabSelect()">
                        <div ng-if="vm.locationSettings.messageTemplates.isSelected" data-ng-include="'app/managelocations/addeditlocations/messagetemplates/messagetemplates.html'"></div>
                    </tab>
                </tabset>
        </section>
    </section>


    Following is what I do inside the controller.

     function addEditLocations($q, $route, $rootScope, $http, $location, common, globalConstants, systemcontext, clientcontext, loggedUser, security, localize, basicSettingsFactory, holidayFactory, opHoursFactory, serviceFactory) {
    
            var vm = this;
            vm.locationContext = $rootScope.appData.locationId;
    
            vm.copyrightNotice = globalConstants.copyright;
            vm.locationTitle = localize.getLocalizedString('_AddLocationTitle_');
            vm.locationTitleName = 'New Location';
    
            //tab instances
            vm.locationSettings = {};
            vm.locationSettings.basicSettings = {};
            vm.locationSettings.holidays = {};
            vm.locationSettings.opHours = {};
            vm.locationSettings.services = {};
            vm.locationSettings.messageTemplates = {};
    
            //determine the configuration mode (add/edit)
            vm.mode = 'Add';
            if ($route.current.params.id !== undefined) {
                vm.mode = 'Edit';
                vm.locationTitle = localize.getLocalizedString('_EditLocationTitle_');
                setTabActiveStatus(vm, true, true, true, true, true);
            }
    
    
    
            // *********************** page initialization ************************
            initPage();
    
            function initPage() {
                // redirect to login page if user is invalid
                //if (Object.keys(loggedUser.user).length === 0) {
                //    security.logout();
                //    return;
                //}
                activate();
                bindEvents();
                security.authenticate();
            }
    
    
            function activate() {
                common.activateController([], controllerId).then(function () {
                    $rootScope.appData.isDisabled = true;
                    setTabActiveStatus(vm, false, false, false, false, false);
                });         
            }
    
            /*
                Bind the tab events.
                Initiate each factory when the relevant tab is selected.
            */
            function bindEvents() {
                setTabSelectedStatus(vm, false, false, false, false);
                vm.basicSettingsTabSelect = function () {
                    loadLocationData();            
                };
    
                vm.opHoursTabSelect = function () {
                    vm.locationSettings.opHours = opHoursFactory.init();
                    setTabSelectedStatus(vm, true, false, false, false);
                }
    
                vm.holidaysTabSelect = function () {
                    vm.locationSettings.holidays = holidayFactory.init();
                    setTabSelectedStatus(vm, false, true, false, false);
                };
    
                vm.servicesTabSelect = function () {
                    vm.locationSettings.services = serviceFactory.init();
                    setTabSelectedStatus(vm, false, false, true, false);
                };
    
                vm.messageTemplateTabSelect = function () {
                    setTabSelectedStatus(vm, false, false, false, true);
                };
    
                vm.locationSettings.cancelChanges = function () {
                    clientcontext.rejectChanges();
                }
            }
                    
           
            set the selected status for the tabs in the locations control
        **/
        function setTabSelectedStatus(vm, opHours, holidays, services, messageTemplates) {
            vm.locationSettings.opHours.isSelected = opHours;
            vm.locationSettings.holidays.isSelected = holidays;
            vm.locationSettings.services.isSelected = services;
            vm.locationSettings.messageTemplates.isSelected = messageTemplates;
        }
    
        function setTabActiveStatus(vm, opHours, holidays, services, messageTemplates) {
            vm.locationSettings.opHours.isActive = opHours;
            vm.locationSettings.holidays.isActive = holidays;
            vm.locationSettings.services.isActive = services;
            vm.locationSettings.messageTemplates.isActive = messageTemplates;
        }
    })();

    My problem is the each of the factories related to the tabs get hit when I move away from the page. I.e. the tab selection events get fired.

    Any idea why that happens and how to prevent it?

    Friday, February 27, 2015 12:19 AM

All replies

  • User1104055534 posted

    I am checking this. You may need to submit a support case to Microsoft if this cannot be resolved here.

    Tuesday, March 3, 2015 3:07 AM
  • User1104055534 posted

    Please debug your application and find when and how the event is triggered.

    Sunday, March 8, 2015 10:57 PM