Events as ng-click or css :active are not working properly

[Guille270]

Hello guys,

I’m a newbie hybrid apps developer and I’m having problems with onsen ui, maybe for my lack of experience and I need a little help.

I’m doing and app that has a list. My idea is detect when user clicks on one item and open an ons-action-sheet (https://onsen.io/v2/api/js/ons-action-sheet.html), because is so beautiful and useful. All works well when I enter in the page for first time, but when i move to another page and I click this page in the menu i can do nothing with click not even css :active. I think that the last page opened is already opened in some way and for this the click events are not working,

Do you have any idea?

My action sheet:

<ons-action-sheet id="tasacionOptions" cancelable title="Tasación">
     <ons-action-sheet-button icon="md-square-o" ng-click="delete()">Borrar</ons-action-sheet-button>
      <ons-action-sheet-button icon="md-square-o" ng-click="modification()">Modificar </ons-action-sheet-button>
      <ons-action-sheet-button icon="md-close" ng-click="unselectTasacion()">Cancelar</ons-action-sheet-button>
 </ons-action-sheet>

My menu:

<ons-page>
        <ons-splitter>
            <ons-splitter-side id="menu" side="right" width="220px" collapse>
                <ons-page>
                    <ons-list>
                        <ons-list-item>
                            <ons-icon icon="fa-times" onclick="fn.close()"></ons-icon>
                        </ons-list-item>
                        <!-- FALTA PONER ng-show="auth" -->
                        <ons-list-item tappable onclick="fn.load('login.html', {data: {title: 'Login'}})">
                            Login
                        </ons-list-item>
                        <ons-list-item tappable ng-show="permissions.getTasaciones" onclick="fn.load('tasaciones.html', {data: {title: 'Tasaciones'}})">
                            Tasaciones
                        </ons-list-item>
                        <ons-list-item tappable onclick="fn.load('debugZone.html', {data: {title: 'DebugZone'}})">
                            Debug Zone
                        </ons-list-item>
                    </ons-list>
                </ons-page>
            </ons-splitter-side>
            <ons-splitter-content id="content" page="homePage.html"></ons-splitter-content>
        </ons-splitter>
    </ons-page>

Thanks to all for your help.

[emccorson]

What is fn.load? My guess is that fn.load calls ons-navigator.pushPage which loads a new page even if the page is already on the page stack. Instead you should use ons-navigator.bringPageTop which will check if the page is already on the page stack.

By the way, you can inspect the pages in your browser’s dev tools to see what pages are in the page stack. Just look at the child elements of the navigator.

If changing to bringPageTop doesn’t solve the problem then you might have run into this bug, which I am working on fixing: https://github.com/OnsenUI/OnsenUI/issues/2604

davidhealey created this issue in OnsenUI/OnsenUI

closed Tabbar checkbox label issue #2604

[Guille270]

@emccorson This are all my navigator functions

window.fn = {};

    window.fn.open = function() {
        var menu = document.getElementById('menu');
        menu.open();
    };

    window.fn.close = function() {
        var menu = document.getElementById('menu');
        menu.close();
    }

    window.fn.load = function(page, data) {
        var content = document.getElementById('myNavigator');
        var menu = document.getElementById('menu');
        content.pushPage(page, data)
            .then(menu.close.bind(menu));
    };

    window.fn.pop = function() {
        var content = document.getElementById('myNavigator');
        content.popPage();
    };

    document.addEventListener('init', function(event) {
        var page = event.target;

        if (page.id === 'page1') {
            page.querySelector('#push-button').onclick = function() {
                document.querySelector('#myNavigator').pushPage('page3.html', {
                    data: {
                        title: 'Page 3'
                    }
                });
            };
        } else if (page.id === 'page2' || page.id === 'page3') {
            page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
        }
    });

In this days I was found that if instead of fn.load i use content.popPage(); i can click well

[Guille270]

@emccorson said in Events as ng-click or css :active are not working properly:

What is fn.load? My guess is that fn.load calls ons-navigator.pushPage which loads a new page even if the page is already on the page stack. Instead you should use ons-navigator.bringPageTop which will check if the page is already on the page stack.

By the way, you can inspect the pages in your browser’s dev tools to see what pages are in the page stack. Just look at the child elements of the navigator.

If changing to bringPageTop doesn’t solve the problem then you might have run into this bug, which I am working on fixing: https://github.com/OnsenUI/OnsenUI/issues/2604

You’re right, all my problems are solved!!!

Thanks you so much!