Tabbar button to open splitter-side

[Riaz]

Hi,

I added a button on my tabbar to open the splitter-side menu, however it seems that when I click on the button the page content changes to the contact.html page

    <ons-tabbar id="myTabbar" position="bottom" var="myTabbar">
        <ons-tab>
            <ons-button onclick="fn.open()">
                <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
            </ons-button>
        </ons-tab>
        <ons-tab page="views/contact.html">
            <ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
        </ons-tab>
        <ons-tab page="views/home.html" label="Home" active="true">
        </ons-tab>
        <ons-tab page="views/shop.html">
            <ons-icon icon="ion-ios-cart, material:md-shopping-cart" size="32px, material:24px"></ons-icon>
        </ons-tab>
        <ons-tab page="views/search.html">
            <ons-icon icon="ion-search, material:md-search" size="32px, material:24px"></ons-icon>
        </ons-tab>
    </ons-tabbar>

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

no matter what page I’m on if I click the button -> fn.open() … the page content change to the contact.html page.

Any ideas why this would happen ?

Thanks

[munsterlander]

@Riaz As you didn’t post your splitter code, I can’t diagnose your issue, so I made a quick example with your code and the splitter: https://codepen.io/munsterlander/pen/mWxXVp

You can use open, but I prefer toggle(). More information is located in the docs here: https://onsen.io/v2/docs/js/ons-splitter.html

[Riaz]

@munsterlander thanks for the reply, sorry I didn’t include the splitter code.

So my code does work, the splitter-side does open up.

The weird glitch that’s happening is that, for example:

If I’m on the shop.html page and if I click on hamburger to open the splitter-side, the splitter-content changes to the contact.html page content and then the splitter-side opens up.

This is my code:

    <!-- SPLITTER -->
    <ons-splitter>
        <ons-splitter-side page="views/menu.html" id="menu" side="left" width="220px" collapse swipeable>
        </ons-splitter-side>
        <ons-splitter-content id="content" page="home.html">
        </ons-splitter-content>
    </ons-splitter>


    <!-- PAGE: HOME -->
    <ons-template id="home.html">
        <ons-toolbar>
            <div class="center logo"><img src="images/logo.png" /></div>
        </ons-toolbar>
        <ons-tabbar id="myTabbar" position="bottom" var="myTabbar">
            <ons-tab>
                <ons-button onclick="fn.open()">
                    <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
                </ons-button>
            </ons-tab>
            <ons-tab page="views/contact.html">
                <ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
            </ons-tab>
            <ons-tab page="views/home.html" label="Home" active="true">
            </ons-tab>
            <ons-tab page="views/shop.html">
                <ons-icon icon="ion-ios-cart, material:md-shopping-cart" size="32px, material:24px"></ons-icon>
            </ons-tab>
            <ons-tab page="views/search.html">
                <ons-icon icon="ion-search, material:md-search" size="32px, material:24px"></ons-icon>
            </ons-tab>
        </ons-tabbar>
    </ons-template>

JavaScript I’m now using thanks to you :)

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

I also tested something, I changed the URL of the second tabbar button:

<!-- WHAT I HAD -->
<ons-tab page="views/contact.html">
<ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
</ons-tab>

<!-- CHANGED IT TO -->
<ons-tab page="views/search.html"> <!-- CHANGED FROM contact.html TO search.html -->
<ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
</ons-tab>

After doing this I noticed that when I clicked on the hamburger to open the splitter-side the splitter-content then changed to the search.html page content. really weird!

It seems like when I click on the hamburger to open the splitter-side, the splitter-content changes to the content of the next ons-tab page. If this makes sense.

[munsterlander]

@Riaz This would be, imo, because the tab index is not aligning with the actual tab content. Tab isn’t really designed as you are using it. You will probably need to start looking at prechange events and maybe even post change events. The Onsen team could probably answer this is a bit better, but you may be able to stop event propagation on the first tab to prevent the change.

Now, all of this is just my initial opinion and confirmed code response (I updated my example). I could be seriously way off on this and @Fran-Diox would have the official response.

[Fran Diox]

@Riaz @munsterlander You are actually right. If there’s no page in the tab, it loads the corresponding index. This is an uncommon way to put a toggle for the menu since normally it would be located on the toolbar instead. A couple of things:

• ons-tab should have an icon attribute rather than an ons-icon element inside (some classes are automatically applied).
• ons-tab has a onClick DOM prop that basically overrides its default behavior.

I’ve modified @munsterlander pen a little bit: https://codepen.io/frankdiox/pen/zZjzoz

[munsterlander]

@Fran-Diox Cool! Glad that was solved fairly easily.

[Riaz]

@Fran-Diox thanks for the reply!

I tried the code from the code pen, but what seems to happen is…
When trying to open the menu, nothing happens I checked the console this is the error I get:

onsenui.js:21337 Uncaught (in promise) Splitter side is locked.

This is exactly what I use:

document.querySelectorAll('ons-tab')[0].onClick = fn.open;

HTML:

    <!-- SPLITTER -->

    <ons-splitter>
        <ons-splitter-side page="views/menu.html" id="menu" side="left" width="220px" collapse swipeable>
        </ons-splitter-side>
        <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
    </ons-splitter>


    <!-- PAGE: HOME -->
    <ons-template id="home.html">
        <ons-toolbar>
            <div class="center logo"><img src="images/logo.png" /></div>
        </ons-toolbar>
        <ons-tabbar id="myTabbar" position="bottom" var="myTabbar">
            <ons-tab icon="ion-navicon, material:md-menu"></ons-tab>
            <ons-tab page="views/contact.html" icon="ion-ios-cart, material:md-account-box-mail"></ons-tab>
            <ons-tab page="views/home.html" active="true"><img src="images/heart-btn.png" /></ons-tab>
            <ons-tab icon="ion-ios-cart, material:md-shopping-cart"></ons-tab>
            <ons-tab page="views/search.html" icon="ion-search, material:md-search"></ons-tab>
        </ons-tabbar>
    </ons-template>