Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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> elementI have no idea what’s the [options] for or how to retrieve it on the other page.
Any help would great :)
Thanks!
-
@Riaz Check out this post: https://github.com/OnsenUI/OnsenUI/issues/1793
-
@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
insideons-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>