ons-page 'init' event not firing after adding plugin.

[sj.meyer]

I am loading the Onsen library separately, i.e. I’m not using Monaca. If I’m not mistaken, that allows me to use 3rd party plugins.

Without the plugin, my code works perfectly. After adding the plugin, the following does not fire.

document.addEventListener('init', function(event) { ...

If I call the plugin right before that, from within the onDeviceReady function, the plugin functionality works just fine, but the init function does not work. Thus, it’s not the onDeviceReady event that does not work, it does work, it’s the init event that does not fire.

Any ideas as to why this is?

[munsterlander]

@sj.meyer Which plugin are you using? I would assume this would be due to a JS conflict. Do you have any errors in the console?

[sj.meyer]

@munsterlander I’m not sure on the console, will check in just a bit. The plugin I’m using is the Text-to-Speach plugin.

[munsterlander]

@sj.meyer Ok, I have used that plugin without issue, so definitely something is not right. I would uninstall and reinstall the plugin. The Dartitis app has it, so you can see it works.

This is some of the code I used:

var u = new SpeechSynthesisUtterance();
     u.text = txt;
     u.lang = 'en-US';
     u.rate = 1;
     speechSynthesis.speak(u);

[sj.meyer]

@munsterlander here is my implementation of my onDeviceReady event(s):

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    // - Event Listeners for main screen buttons(divs).
    document.addEventListener('init', function(event) {
    if (event.target.matches('#main')) {
            mainPageEvents();
        } else if(event.target.matches('#page1')) {
            page1PageEvents();
        } else if(event.target.matches('#page2')) {
            page2PageEvents();
        }
    });	
}

I’ve tried uninstalling and reinstalling the plugin, tried removing and reading the platform, but nothing works.

When the plugin is not installed, the above code works. When I install it, it doesn’t. If I do the following, the speak fires:

function onDeviceReady() {
    // - Event Listeners for main screen buttons(divs).
    speak(params);
    document.addEventListener('init', function(event) {
    if (event.target.matches('#main')) {

But if I do the following, it doesn’t:

function onDeviceReady() {
    // - Event Listeners for main screen buttons(divs).
    document.addEventListener('init', function(event) {
        speak(params);
    if (event.target.matches('#main')) {

Which to me says that the ‘init’ event never actually fires. Again, it does fire with no plugin installed, but with plugin installed, it doesn’t.

[munsterlander]

@sj.meyer Try this with the plugin installed:

ons.ready(function(){
document.addEventListener('init', function(event) {
    if (event.target.id=='main') {
            mainPageEvents();
            speak(params);
        } else if(event.target.id=='page1') {
            page1PageEvents();
        } else if(event.target.id=='page2') {
            page2PageEvents();
        }
    }); 
});

[sj.meyer]

@munsterlander sadly that didn’t work either.

The weird thing is, if I do that in the browser, it works. I.e. no “deviceReady” event. In the browser the init event is received, just not on the emulator or on my device. There are no errors in the console(browser) about libraries or functions clashing or any of that.

[munsterlander]

@sj.meyer Are you using any other frameworks or plugins? If not, then I will make a simple example with text-to-speech and upload it to github to see if it will work on your device / install.

[Fran Diox]

@sj-meyer @munsterlander Can you try to add the listeners directly outside ons.ready or onDeviceReady? Not sure if it’s possible but perhaps the plugin delays deviceready event and init isn’t waiting for that.

[sj.meyer]

@munsterlander @Fran-Diox Moving the event listener for ‘init’ to be outside the ‘deviceReady’ event listener worked. I find that strange since I was under the impression the ‘init’ event will register as fired even if you add the listener after the event actually fired.

But it’s working now, so thank you for the assistance! Both of you.