Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. Riaz
    R
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    Riaz

    @Riaz

    0
    Reputation
    15
    Posts
    1016
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    Riaz Follow

    Posts made by Riaz

    • Help with Onsen UI 2 and Angular 2

      Hi,

      I been building apps with Onsen and Angular 1 for a while now and I want to try Angular 2.

      How do I go about creating a blank Onsen project using Visual Studio 2017 ? I know the project can be created using Monaca CLI … But how would I include the project created with CLI into the Visual Studio Apache Cordova blank project ?

      With Angular 1 it’s pretty easy i normally use NPM and install onsen and Angular 1 into the project and link the JS files, but when creating the project with CLI there so many other directories and files.

      Any advice ?

      Thanks

      posted in Onsen UI
      R
      Riaz
    • RE: Passing Parameters to page

      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>
      
      
      posted in Onsen UI
      R
      Riaz
    • RE: Passing Parameters to page

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

      posted in Onsen UI
      R
      Riaz
    • 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!

      posted in Onsen UI
      R
      Riaz
    • RE: Advice: Articles loading

      @munsterlander the browser is faster, the app takes longer to load the image from an external source.

      So should I fetch all those pages and store them locally ? is it possible to store the images locally so I never have to fetch them from the remote server the entire time ?

      How would I do this ?

      posted in Onsen UI
      R
      Riaz
    • RE: Advice: Articles loading

      @munsterlander … So the API that I was calling did change… it now sends back a JSON object that looks likes:

      {
      title: "My Title",
      img: "![image.jpg](http://www.domain.com/image.jpg")
      }
      

      After calling the API the images need to load on the app and that takes a while to fully load, how can I cache this ?

      posted in Onsen UI
      R
      Riaz
    • Advice: Articles loading

      Hi,

      I need some advice regarding an app I’m building.

      So the app basically has pages, when you navigate to these pages, it does a call to an remote server that sends back data. This data is generated HTML with an image and some text.

      The problem is sometimes there’s a lot of articles that get sent back and it takes some time to load.
      What would be my best approach to reduce load time of these pages ?

      I currently show a loader while the call is taking place.

      Should I load the articles on app load and store them in a global variable or localStorage ? Any advice would be great!

      Thanks!

      posted in Onsen UI
      R
      Riaz
    • RE: Tabbar button to open splitter-side

      @Fran-Diox thanks for the reply!

      I tried the code from the code pen, but what seems to happen is…
      When trying to open the menu, nothing happens I checked the console this is the error I get:

      onsenui.js:21337 Uncaught (in promise) Splitter side is locked.
      

      This is exactly what I use:

      document.querySelectorAll('ons-tab')[0].onClick = fn.open;
      

      HTML:

          <!-- SPLITTER -->
      
          <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>
      
      
          <!-- PAGE: HOME -->
          <ons-template id="home.html">
              <ons-toolbar>
                  <div class="center logo"><img src="images/logo.png" /></div>
              </ons-toolbar>
              <ons-tabbar id="myTabbar" position="bottom" var="myTabbar">
                  <ons-tab icon="ion-navicon, material:md-menu"></ons-tab>
                  <ons-tab page="views/contact.html" icon="ion-ios-cart, material:md-account-box-mail"></ons-tab>
                  <ons-tab page="views/home.html" active="true"><img src="images/heart-btn.png" /></ons-tab>
                  <ons-tab icon="ion-ios-cart, material:md-shopping-cart"></ons-tab>
                  <ons-tab page="views/search.html" icon="ion-search, material:md-search"></ons-tab>
              </ons-tabbar>
          </ons-template>
      
      posted in Developer Corner
      R
      Riaz
    • RE: Tabbar button to open splitter-side

      @munsterlander thanks for the reply, sorry I didn’t include the splitter code.

      So my code does work, the splitter-side does open up.

      The weird glitch that’s happening is that, for example:

      If I’m on the shop.html page and if I click on hamburger to open the splitter-side, the splitter-content changes to the contact.html page content and then the splitter-side opens up.

      This is my code:

      
          <!-- SPLITTER -->
          <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>
      
      
          <!-- PAGE: HOME -->
          <ons-template id="home.html">
              <ons-toolbar>
                  <div class="center logo"><img src="images/logo.png" /></div>
              </ons-toolbar>
              <ons-tabbar id="myTabbar" position="bottom" var="myTabbar">
                  <ons-tab>
                      <ons-button onclick="fn.open()">
                          <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
                      </ons-button>
                  </ons-tab>
                  <ons-tab page="views/contact.html">
                      <ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
                  </ons-tab>
                  <ons-tab page="views/home.html" label="Home" active="true">
                  </ons-tab>
                  <ons-tab page="views/shop.html">
                      <ons-icon icon="ion-ios-cart, material:md-shopping-cart" size="32px, material:24px"></ons-icon>
                  </ons-tab>
                  <ons-tab page="views/search.html">
                      <ons-icon icon="ion-search, material:md-search" size="32px, material:24px"></ons-icon>
                  </ons-tab>
              </ons-tabbar>
          </ons-template>
      

      JavaScript I’m now using thanks to you :)

      window.fn = {};
      fn.open = function () {
          document.getElementById('menu').toggle();
      }
      

      I also tested something, I changed the URL of the second tabbar button:

      <!-- WHAT I HAD -->
      <ons-tab page="views/contact.html">
      <ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
      </ons-tab>
      
      <!-- CHANGED IT TO -->
      <ons-tab page="views/search.html"> <!-- CHANGED FROM contact.html TO search.html -->
      <ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
      </ons-tab>
      
      

      After doing this I noticed that when I clicked on the hamburger to open the splitter-side the splitter-content then changed to the search.html page content. really weird!

      It seems like when I click on the hamburger to open the splitter-side, the splitter-content changes to the content of the next ons-tab page. If this makes sense.

      posted in Developer Corner
      R
      Riaz
    • Tabbar button to open splitter-side

      Hi,

      I added a button on my tabbar to open the splitter-side menu, however it seems that when I click on the button the page content changes to the contact.html page

          <ons-tabbar id="myTabbar" position="bottom" var="myTabbar">
              <ons-tab>
                  <ons-button onclick="fn.open()">
                      <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
                  </ons-button>
              </ons-tab>
              <ons-tab page="views/contact.html">
                  <ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
              </ons-tab>
              <ons-tab page="views/home.html" label="Home" active="true">
              </ons-tab>
              <ons-tab page="views/shop.html">
                  <ons-icon icon="ion-ios-cart, material:md-shopping-cart" size="32px, material:24px"></ons-icon>
              </ons-tab>
              <ons-tab page="views/search.html">
                  <ons-icon icon="ion-search, material:md-search" size="32px, material:24px"></ons-icon>
              </ons-tab>
          </ons-tabbar>
      
      window.fn.open = function () {
          var menu = document.getElementById('menu');
          menu.open();
      };
      

      no matter what page I’m on if I click the button -> fn.open() … the page content change to the contact.html page.

      Any ideas why this would happen ?

      Thanks

      posted in Developer Corner
      R
      Riaz