click on menu to set a new html page as ons-splitter-content



  • Sorry for the very simple question, please consider I’m a beginner :smile: in designing Onsen/Monaca :sparkles:
    I’m starting from the todo-list example where I have an index.html containing

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

    in the menu under the responsive header

        <ons-list>
            <ons-list-header>Default</ons-list-header>
            <ons-list-item data-filter="all" tappable>All</ons-list-item>
            <ons-list-header>Status</ons-list-header>
            <ons-list-item data-filer="uncompleted">Pending</ons-list-item>
            <ons-list-item data-filter="completed">Completed</ons-list-item>
            <ons-list-header>Responsive</ons-list-header>
        </ons-list>
    

    I’d like to add the possibility to tap and set the ons-splitter-content to a different html page, which I’m building to test a responsive table (more info here, so let’s say I already have the html5 and the css3 to link).

    How can I change that content page when I tap on the menu, thanks :interrobang:

    I guess I have to add

            <ons-list-header>Responsive</ons-list-header>
            <ons-toolbar-button id="resptab">Table</ons-toolbar-button>
    

    in the menu e something like

    target.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));
    

    in the scripts (but the above querySelector doesn’t work, it’s null :confused: ) with a function

    todo.setRespTable = function() {
        
        
    }
    

    to be defined…



  • I’ve fixed the first part as

    document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));
    

    I had to use document of course :smile:

    Still looking how to build the event handler.

    This is what I’ve tried now:

    todo.setRespTable = function() {
        ons.notification.prompt('Switch to responsive table view',{
            title: 'Responsive Table',
            cancelable: true,
            
            callback: function(label) {
                document.querySelector('#splitter-menu').page = "table.html"
            }.bind(this)
        });    
    }
    

    When debugging, I see that the page property is changed from menu.html to table.html, but no effect in the rendering (is a refresh missing somewhere?)

    P.S Maybe should this be posted in the developer corner section?



  • Solved with a Navigator! :ok_hand: :thumbsup:

          <ons-splitter-content>
              <ons-navigator id="myNavigator" animation="slide" page="list.html"/>
          </ons-splitter-content>
    

    and the following script

            callback: function(label) {
                document.querySelector('#myNavigator').pushPage('table.html')
            }.bind(this)
    


  • Everything seemed to work in my desktop dashboard with the Preview but when I try it with Monaca Debugger on my galaxy Android phone, it fails with the error in the Log showing that querySelector is null

    document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));
    

    Please help me :sweat:

    By the way, I’ve also noticed that the following button is not shown in the menu when I run the app on the Android phone, while - again - I can see it as expected from the dashboard Preview.

        <ons-toolbar-button id="resptab" ><ons-icon icon="ion-pie-graph" size="28px"></ons-icon>Table</ons-toolbar-button>


  • Finally solved as explained here on SO.

    Find also the corresponding version implemented with OnsenUI and React in the end of this article


Log in to reply