Monaca Onsen UI Discord Chat Github Repo

lazyRepeat copy-pasted tutorial throw error

  • Onsen UI

    @portapipe Well, I guess you are pasting the code in the wrong place. var lazyRepeat = document.querySelector('#list') -> lazyRepeat variable is probably null, so it is not finding the lazy repeat element.

    Common stuff: that code is run at the beginning of the app but your page with the elements is not attached yet. Notice that ons-template or separate html files are just templates, you cannot interact with them until you create a page with those templates.

    If you didn’t yet, I’d recommend you to read this guide (select the framework you want). It will give you a general overview of how to do things in Onsen UI.

  • Thanks :smiley:
    I had to move a 3-time-rewritten huge project from Angular 1 to 2 and I had to give up after 4 updates that changed several basic stuff.
    I’ve lost a 2 years work that was needed to open a startup company. Very very sad.

    I use plain javascript. I don’t want multiple nested frameworks anymore. If one change something everything must be rewritten (or at least follow the several changes).

  • @Fran-Diox I moved that line outside the function and the error is still there. I’ve used javascript to get the element $('#element'); but there are errors like “refresh is undefined”.
    I’m trying other things:

    var lazyRepeat = document.querySelector('#list');
    //var lazyRepeat = $('#list');
    ons.ready(function() {
    //window.addEventListener('load', function() {
    	//var lazyRepeat = $('#list');
        lazyRepeat.delegate = {
          calculateItemHeight: function(index) {
           // Specify this if the height depends on the element.
           return 40;
         createItemContent: function(index, template) {
           var dom = template.cloneNode(true);
           dom.innerText = "List item #" + index;
           return dom;
         countItems: function() {
            // Return number of items.
           return 100000000;
         destroyItem: function(index, item) {
           // Optional method that is called when an item is unloaded.
           console.log('Destroyed item with index: ' + index);

    This code is in the app.js file that I

    <script src="js/app.js"></script>

    at the end of the index file.

  • Onsen UI

    @portapipe $('#element') looks like jQuery, so it will return a jQuery object if I’m not wrong. I know Chrome implements something similar to $ but I guess you are not using that. Can you try with document.querySelector('#element') instead?
    Also, do you have any navigation in your test app right now or is just a single page?

  • @Fran-Diox
    Ok I’ve edited the message above meanwhile you’re writing your post :)

    I’m using the swipe template.
    This is the homepage where I’m trying to show the list:

      <ons-template id="home.html">
            <div class="left">
              <ons-toolbar-button onclick="">
                <ons-icon icon="md-menu"></ons-icon>
            <div class="center">
              The Title
          <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
            Swipe right to open the menu!
    		<ons-list id="list">

  • Onsen UI

    So that’s why, your code is probably run before the page is attached. Use the page lifecycle init event for that. More info in the link I wrote before.

    <ons-template id="home.html">
      <ons-page id="myLazyRepeatPage">
    document.addEventListener('init', function(event) {
      var page =;
      if ( === 'myLazyRepeatPage') {
        var lazyRepeat = document.querySelector('#list');
        lazyRepeat.delegate = { ... };

  • @Fran-Diox
    Ok I write the code when you send me (thanks for your time).
    The code you’ve sent me run without issues but nothing is written into the list box.
    I’ve thought that the basic template will work out-of-the-box with the tutorial’s code.

  • @Fran-Diox
    I’ve used the infinite-list one (not the lazy-repeat tutorial code) and with your ‘init’ code it works! Great!


    All the code of each page MUST be written into this init function, so I know that it works, am I wrong?

  • Onsen UI

    @portapipe Yes, init event is where you should put your pages initialization code. If you have multiple pages you can do something like this (check the first 10 lines of app.js and controllers.js file).

    For the lazy-repeat. I guess this is what you were looking for?

  • @portapipe Sorry for being late to the party and it looks like @Fran-Diox has solved your issues. I would like to pitch a few sites that really help out: