onsen-ui

onsenui: "pushPage is already running" and "Cannot read property 'removeEventListener' of null"


I'm working on a mobile app in cordova + onsenui. I basically have a generic template.html that I first load and then modify through jquery with the specific parameters needed. I first perform an ajax request to get the specifics for that template, and then I load the template with

fn.pushPage({'id': 'template.html', 'title': 'View template'}); 

and change all the parameters needed with jquery. At first the app would try to perform the changes before the template would finish loading, and the document ready event wouldn't work, so i just did a generic function in the onsuccess part of the jquery, like this one

function update_template(){
    if ($('#templateItem').length) {
        //this part runs if the template has loaded
        //replace all the poarameters with jquery
    } else {
        window.setTimeout(edit_profile, 0.1); // 5 seconds
    }
};

This seemed to work ok, but after going to the previous page with the back button running

document.getElementById('appNavigator').popPage()

i get an error message in the console saying

Uncaught (in promise) TypeError: Cannot read property 'removeEventListener' of null

and if I try to see the template again, I get

Uncaught (in promise) pushPage is already running.

If I remove the part of the code that modifies the template, everything works correctly, no problem going back, no error messages and no problem loading the template again.


Solution

  • The problem was that i was modifying an input in the wrong way, doing

    $('#inputNameId').html('text to replace');
    

    was breaking the html of the website, after changing it to

    $('#inputNameId').val('text to replace');
    

    everything worked correctly. For the record, if you want changes AFTER the template has finished loading, you should look into the init method to avoid waits in javascript, like this:

    document.addEventListener('init', function(event) {
      var page = event.target;
    
      if (page.id === 'template') {
        //code to run
        };
    
    });
    

    where template is the id of the template which goes here:

    <template id='generic.html'>
        <ons-page id='***template***'> 
    ...
        <ons-page>
    <template>