Search code examples
cordovaonsen-uimonaca

Monaca onsen-ui conditional page navigation

I'm writing a simple app using Monaca Cloud IDE, Onsen-ui, and PhoneGap/Cordova. The app will only have a main page and a settings page, so I'm using the "Minimal Template" provided by Monaca/Onsen-UI. Thing is, I want to dynamically load a 3rd page on satisfaction of a condition. I want to load a "Welcome" screen the first time the app is opened after download, but not again after that. Because there'll be some database integration, I figured I could make a simple Insert to the database, making a record of a person's use of the app. When the app is opened, a simple query to check the database can be called, and if a record of use exists, the "Welcome" screen shouldn't be loaded.

At the moment I just want to force load the "Welcome" screen, just to check that it works before I start writing conditions.

Here's my standard index.html page:

<!DOCTYPE HTML>
<html ng-app="myAp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
      ons.bootstrap();  
    </script>
  </head>

  <body>
    <ons-navigator var="myNavigator" page = "page1.html">
    </ons-navigator> 
  </body>

</html>

I've tried various things. I spent hours reading both Onsen-UI and Monaca docs. It's just so frustrating that the documentation is so vague.

Some of the things I've tried:

<script>
  myNavigator.insertPage(0, "welcomePage.html", [animation:"lift"]);
</script>

or

<script>
  $scope.myNavigator.insertPage(0, "welcomePage.html", [animation:"lift"]);
</script>

I also tried pushPage(), but no luck.

I also tried treating it as normal HTML, adding an id="pageNav" attribute to the <ons-navigator> and then doing this:

<script>
  var onsNav = document.getElementById("pageNav");
  onsNav.page = "welcomePage.html";
</script>

No luck on any of it.

Can someone please help with this, I feel like I'm losing my mind. Please don't just give me a link to the docs, I've been there. If you want to give a link to the docs, at least add supplementary explanation, or tell me how I can solve my specific problem.

Thanks in advance!

EDIT: My above question was answered and it works perfectly. What follows is a follow-up question:

Just a follow-up question: I'm trying to pop the page off the stack now, but it doesn't seem to work. I have a button on the page that was pushed to the stack, with the button having an onclick event. The onclick event fires a js function, with the function looking like this:

function navToHome()
  {
    myNavigator.popPage({animation:fade});
  }

I also tried:

ons.myNavigator.popPage({animation:fade});

What am I doing wrong?

EDIT: I figured out that the script isn't firing at all:

I figured out that the function above doesn't fire. I've moved the script tags around, doesn't matter whether it's inside or outside of the <ons-page> tags. I also tried putting it inside of an onReady function like the solution to the first problem, but that didn't work either.

Solution

  • This has a very easy explanation: Onsen UI, as the rest of libraries, takes time to load the first time. You just need to wait until it is done loading stuff. In the docs you can read about ons.ready( callback ), what basically waits until Onsen UI and Cordova are loaded before running the callback. That method is actually used in most of the samples along the docs so I think you have enough examples. In your case, you should do something like this:

    <script>
  ons.bootstrap();

  ons.ready(function() {
    myNavigator.pushPage('welcomePage.html', {animation: 'lift'});
  });
</script>

    If you use AngularJS you can also put ons.ready( ... ) inside your first controller.

    Notice that the options parameter to pushPage/insertPage/etc. is not an array but an object, as you can see in the navigator reference page. [parameter] means that the parameter is optional, not an array.

    Hope it helps!