3. init event not fire

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.

init event not fire

  • C

    hi
    I have a problem
    I mobe from jQuery mobile to onsen
    but when stat tutorial in fist step init event never fired.
    I installed onsen from npm and add script limes after cordova script tag in index.html.
    but except other things those ok , but init event never ever fired.
    ui is good,css is just fine and shown.but after ons.ready,deviceready,and even ons.alert, init in addeventlistener not fired.I tested in chrome mobile emulator,firefox firebug,android avd emulator and apk on real some devices.but results is same.init event not fire.if I forgot Something nothing works not just init event of a page.

    I copy ,paste codes from tutorial page.please put one html file with all js,css in it with pure JavaScript to me to understand where is wrong in my own code.
    I using

    document.addEventListener('init', function(event) {
  var page = event.target;
  if (page.matches('#helloworld-page')) {
    page.querySelector('ons-toolbar .center').innerHTML = 'My app';
    page.querySelector('ons-button').onclick = function() {
      ons.notification.alert('Hello world!');
    };
  }
});

    as in tutorial page. in deviceready event in cordova rules

    0 1 Reply
  • 侍

    @cppprog I replied in the other thread, but here is the same code as requested:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
    <title>Onsen UI Forum Help by Munsterlander</title>

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
    <script src="https://unpkg.com/onsenui"></script>
<script>
document.getElementById('myPgId').addEventListener('init',function(){console.log('Page Initialized.')});
</script>
  </head>
  <body>
<ons-page id="myPgId">
  <div>Hello World</div>
</ons-page>
</body>
</html>
    0
    C
     1 Reply
  • C

    finally i figured out when ons-icon tag removed the file is running.
    i think i was wrong in installation of onsen.
    just npm install onsen
    is not enough copy and paste onsen css and js in my project folder dosent enough.please hep me to attach onsen to cordova project.please help to the armatures way not a pro guy.if a was pro this forum it was useless to us.
    i dont want use a site to grab onsen. i want copt everything to the project folder.
    no href="http://upkg.com/…
    i am not using cross walk web view
    what a framework !!!

    0 1 Reply
  • 侍

    @cppprog I use that template to show you don’t need NPM or anything. You just need to include the Onsen JS and CSS files. Take a look at the how to: https://onsen.io/getting-started/#download

    0
  • C

    Please let cordova an example of a program that is init in events and include cordova.js. My only problem with this plan is not implemented. One time event fried and one time not.
    example in your code even onload not declared.so error happening on document not initialized yet.I fix that but when cordova attached init randomly fired.when I remove on-icon tag everything goes normal.
    I know.post going large.but my answer is a html with cordova attached and init event.I want SAMPLE HTML
    cordova.js
    onsen.js
    init event of a page.
    on-icon

    0 1 Reply
  • Onsen UI

    @cppprog There is no relation between Cordova and page’s init event. You simply set a listener at the beginning of the app and that’s it. You can use Monaca CLI to get templates that work with both Cordova and Onsen UI. One of those templates look like this. Instead of cordova.js it includes loader.js but it is virtually the same. In any case, Cordova is not related to init event as I said before.

    0
  • R

    Hi Fran Diox,
    I am also facing a similar issue “deviceready” event is not firing while running in monaca device debugger; i cant include the loader.js in the project since its throwing an error input message “gap_init:3” and if i click ok, i goes to a blank page and app exit… i am trying to include some device plugins, none of them works due to the same issue

    0 1 Reply
  • Onsen UI

    @rojicp Can you try to check what’s the difference between one of the templates and your project? The templates include <script src="components/loader.js"></script> and works well (you also need www/components).

    0