Passing Parameters to page



  • Hi,

    I’m trying to pass parameters to another page using this Javascript method:

        var content = document.getElementById('content');
        content.load(page);
    

    I don’t have a ons-navigation on my page since I’m using a ons-splitter, so the .PushPage() method doesn’t seem to work.

    My index.html page

    
        <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>
    
    

    I saw that the .load() method accepts an [options] parameter:

    From: https://onsen.io/v2/docs/js/ons-splitter-content.html#method-load

    load(page, [options]): Promise
    Show the page specified in page in the content.
    Returns: Resolves to the new <ons-page> element

    I have no idea what’s the [options] for or how to retrieve it on the other page.

    Any help would great :)

    Thanks!




  • Onsen UI

    @Riaz The only component that implements a shortcut to pass data among pages is ons-navigator because its pages are supposed to clearly depend on one another. ons-splitter only loads 1 page at a time and it is not supposed to depend on anything else, therefore it relies on the developer to organize the app state in the way he/she wants. You can use services, stores, etc.

    Otherwise, you can simply nest ons-navigator inside ons-splitter-content and use it normally.



  • @Fran-Diox I totally understand that from the link @munsterlander sent to me.

    So I updated my code and this is what I now have:

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

    New JavaScript method to pushPage:

    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));
    };
    

    This is how I call the new JavaScript method:

            var options = {
                data: {
                    title: 'Another Page'
                }
            };
            
            fn.load("another_page.html", options);
    

    How I try to retrieve the data passed through:

    app.controller('AnotherPageCtrl', function ($scope, $http) {
    
        var model = this;
    
        model.init = function (event) {
            //DOES COME HERE
            model.title = event.target.data.title; //Supposed to be "Another Page" but it's an empty
        };
    
        console.log(model.title);
    
    });
    
    

    View:

    <ons-page id="another-page" class="sub-page" ons-init="Ctrl3.init($event)" ng-controller="AnotherPageCtrl as Ctrl3">
    ...
    </ons-page>
            
    

    I can’t seem to retrieve the data thats being passed through to the page still.



  • Thanks for your help! I fixed the issue by retrieving the passed data like:

    var params = myNavigator.topPage.data;
    
    

    I also update my HTML:

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

Log in to reply