Passing Parameters to page

[Riaz]

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!

[munsterlander]

@Riaz Check out this post: https://github.com/OnsenUI/OnsenUI/issues/1793

TheSegfault created this issue in OnsenUI/OnsenUI

closed Sending custom data to new page issue #1793

[Fran Diox]

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

[Riaz]

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

[Riaz]

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>