onsen ui: change page on Enter key press?



  • I’m using onsen ui and I need to know how I can change page on enter key press.

    Basically I have a tab bar with 3 buttons in it and I also have an input button for search.

    I need to know how I can change the page once the user types something into the search input field and then presses Enter button on their keyboard.

    This is my code:

    <ons-tabbar id="menu" animation="slide">
        <ons-tabbar-item
              active="true"
              label="Search"
              icon="search"
              page="search.html" id="buttonSearch"></ons-tabbar-item>
        <ons-tabbar-item
              label="signup"
              icon="user-plus"
              page="pts.html" ></ons-tabbar-item>
        <ons-tabbar-item
              label="Locations"
              icon="map-marker"
              page="tab2.html"></ons-tabbar-item>
    </ons-tabbar>
    

    and this is my javascript:

    <script>
    
    $(document).keypress(function(e) {
        if(e.which == 13) {
        login();
        }
    });
    
    </script>
    <script>
    var login = function() {
      var user_input = document.getElementById('search-input').value;
    
      var men = document.getElementById('menu');
    
      if (user_input != '') {
        men.resetToPage('tab2.html', { animation: 'slide' });
      }
      else {
    /////////////////
    
      }
    };
    </script>
    

    The code above gives me this error:

    TypeError: men.resetToPage is not a function
    could someone please advise on this issue?

    Thanks in advance.

    A working FIDDLE:

    https://jsfiddle.net/txx296on/1/



  • @Jackson Here is a working fiddle: https://jsfiddle.net/u3wy27s7/

    Basically, you are calling a function (method) that does not exist for tabbar. Try setActiveTab. More information here:

    https://onsen.io/v2/docs/js/ons-tabbar.html#method-setActiveTab

    Working code:

    men.setActiveTab(2);
    


  • @munsterlander Thank you very much. it works like a charm.

    Do you know if I could use a separate “animation” for this function?

    Currently the animation for all the page transitions is set at ‘slide’, I was wondering if I could use ‘lift’ as animation for this function that you’ve shown in your Fiddle?



  • ignore my last post. I just noticed that there are only (slide, fade and none) available for the setactive tabbar…

    Thanks for your help…


Log in to reply