[solved] Bug with several same virtuallists

Questions
1

I have a json data chunk of about 9000 items.

I’m using in for three virtualLists, for the same use (select an item and add into lists/cart)

The first VirtualList works perfectly.
The secondth VL prints only the first hundred results, and after bugs. If i try to search on items, the VL don’t find items that haven’t been printed.
For the third VL, i’m only have tenth per cent of the secondth VL results.

Maybe it’s a copy paste problem, but i’m wondering…

Here is the 1st one :

         var virtualList = app.virtualList.create({
        el: '.virtual-list',
        items: gameItems,
        searchAll: function (query, items) {
          var games_found = [];
          for (var i = 0; i < gameItems.length; i++) {
            if (gameItems[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') games_found.push(i);
          }
          return games_found; //return array with mathced indexes
        },
        itemTemplate:
          '<li>' +
            '<a href="#" class="item-link item-content"  data-item-id="{{id}}">' +
              '<div class="item-inner">' +
                '<div class="item-title-row">' +
                  '<div class="item-title">{{title}} {{#if inLudo}}<span class="badge color-green">Ludothèque</span>{{/if}}</div>' +
                '</div>' +
              '</div>' +
            '</a>' +
          '</li>',
        // Item height
        height: app.theme === 'ios' ? 63 : 73,
        on: {
          itemsAfterInsert: function (fragment) {
            let listLastItems = this.filteredItems;
            for(kitem in listLastItems){
              let a = $$('a[data-item-id="'+ listLastItems[kitem].id + '"]');
              if (a[0] !== undefined){
                aClone = a[0].cloneNode(true);

                $$(aClone).on('click', function(ev){
                  let post_id = $$(this).data('item-id');
                  app.request.post(THEMEREX_ajax_url, { token: API_profile_token, controler: 'Ludotheque', action: 'addInLudo', user: userId, post_id: post_id },  function (data) {
                    app.router.navigate('/games/', { reloadCurrent: true });
                  }); 
                });

                a.parent()[0].replaceChild(aClone, a[0]);
              }
            }

          }
        } 
      });

The secondth now :

var VAddGameToPlay = app.virtualList.create({
      el: '.add-game-to-play',
      items: game_items,
      showFilteredItemsOnly: false,
      searchAll: function (query, game_items) {
        var games_for_plays_found = [];            
        for (var i = 0; i < items.length; i++) {
          if (game_items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') games_for_plays_found.push(i);
        }
        return games_for_plays_found; //return array with matched indexes
      },
      itemTemplate:
        '<li>' +
          '<a href="#" class="item-link item-content"  data-item-id="{{id}}">' +
            '<div class="item-inner">' +
              '<div class="item-title-row">' +
                '<div class="item-title">{{title}}</div>' +
              '</div>' +
            '</div>' +
          '</a>' +
        '</li>',
      height: app.theme === 'ios' ? 63 : 73,
      on: {
          itemsAfterInsert: function (fragment) {
            let listLastItems = this.filteredItems;
            for(kitem in listLastItems){
              let a = $$('a[data-item-id="'+ listLastItems[kitem].id + '"]');
              if (a[0] !== undefined){
                aClone = a[0].cloneNode(true);

                $$(aClone).on('click', function(ev){
                  let post_id = $$(this).data('item-id');
                  app.request.post(THEMEREX_ajax_url, { token: API_profile_token, controler: 'Ludotheque', action: 'addInLudo', user: userId, post_id: post_id },  function (data) {
                    app.router.navigate('/games/', { reloadCurrent: true });
                  }); 
                });

                a.parent()[0].replaceChild(aClone, a[0]);
              }
            }

          }
        }             
    });

And finally :

 var VAddGameToList = app.virtualList.create({
      el: '.add-game-to-list',
      items: game_items_for_lists,
      searchAll: function (query, game_items) {
        var games_for_list_found = [];            
        for (var i = 0; i < items.length; i++) {
          if (game_items_for_lists[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') games_for_list_found.push(i);
        }
        return games_for_list_found; //return array with matched indexes
      },
      itemTemplate:
        '<li>' +
          '<a href="#" class="item-link item-content"  data-item-id="{{id}}">' +
            '<div class="item-inner">' +
              '<div class="item-title-row">' +
                '<div class="item-title">{{title}}</div>' +
              '</div>' +
            '</div>' +
          '</a>' +
        '</li>',
      height: app.theme === 'ios' ? 63 : 73,
      on: {
        itemsAfterInsert: function (fragment) {            
          page.route.route.methods.addToTop(topId);
          // une fois la recherche commencé on remet les événements
          VAddGameToList.on('itemsAfterInsert', function(fragment){
            page.route.route.methods.addToTop(topId);
          });
        
        }
      } 
    });

I’m goin’ nuts !!

2

Looks like you have a copy & paste mistake in your searchAll function that might be causing these problems:

In the first one replace searchAll: function (query, items) with searchAll: function (query, gameItems).
In the second and third one replace for (var i = 0; i < game_items.length; i++) with for (var i = 0; i < game_items.length; i++)

My advice would be to replace all of your variables in the three lists with consistent names to avoid these mistakes.

2 Likes
3

I thought like you, a copy & paste side effect. But even if i change all names, the issue remains.

app.methods.setGameList();

     for(let i=0; i < app.data.games.length; i++){
        gameItems.push({ 
          id: app.data.games[i].jeu_id,
          title: app.data.games[i].name,
          inLudo: parseInt(app.data.games[i].isInLudo, 10)
       });        
     }

     var virtualList = app.virtualList.create({
        el: '.virtual-list',
        items: gameItems,
        searchAll: function (query, gameItems) {
          var games_found = [];
          for (var i = 0; i < gameItems.length; i++) {
            if (gameItems[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') games_found.push(i);
          }
          return games_found; //return array with mathced indexes
        },
        itemTemplate:
          '<li>' +
            '<a href="#" class="item-link item-content"  data-item-id="{{id}}">' +
              '<div class="item-inner">' +
                '<div class="item-title-row">' +
                  '<div class="item-title">{{title}} {{#if inLudo}}<span class="badge color-green">Ludothèque</span>{{/if}}</div>' +
                '</div>' +
              '</div>' +
            '</a>' +
          '</li>',
        // Item height
        height: app.theme === 'ios' ? 63 : 73,
        on: {
          itemsAfterInsert: function (fragment) {
           // actions
          }
        } 
      });

Seconth list :

app.methods.setGameList(); 

    for(let i=0; i < app.data.games.length; i++){
      game_items_to_play.push({ 
          id: app.data.games[i].jeu_id,
          title: app.data.games[i].name
      });        
    }
    var VAddGameToPlay = app.virtualList.create({
      el: '.add-game-to-play',
      items: game_items_to_play,
      showFilteredItemsOnly: false,
      searchAll: function (query, game_items_to_play) {
        var games_for_plays_found = [];            
        for (var i = 0; i < game_items_to_play.length; i++) {
          if (game_items_to_play[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') games_for_plays_found.push(i);
        }
        return games_for_plays_found; //return array with matched indexes
      },
      itemTemplate:
        '<li>' +
          '<a href="#" class="item-link item-content"  data-item-id="{{id}}">' +
            '<div class="item-inner">' +
              '<div class="item-title-row">' +
                '<div class="item-title">{{title}}</div>' +
              '</div>' +
            '</div>' +
          '</a>' +
        '</li>',
      height: app.theme === 'ios' ? 63 : 73,
       on: {
        itemsAfterInsert: function (fragment) {            
          page.route.route.methods.gameForPlay();
        }
      } 
    });

third list :

    app.methods.setGameList(); 

    for(let i=0; i < app.data.games.length; i++){
      game_items_for_lists.push({ 
          id: app.data.games[i].jeu_id,
          title: app.data.games[i].name
      });        
    }

    var VAddGameToList = app.virtualList.create({
      el: '.add-game-to-list',
      items: game_items_for_lists,
      searchAll: function (query, game_items_for_lists) {
        var games_for_list_found = [];            
        for (var i = 0; i < game_items_for_lists.length; i++) {
          if (game_items_for_lists[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') games_for_list_found.push(i);
        }
        return games_for_list_found; //return array with matched indexes
      },
      itemTemplate:
        '<li>' +
          '<a href="#" class="item-link item-content"  data-item-id="{{id}}">' +
            '<div class="item-inner">' +
              '<div class="item-title-row">' +
                '<div class="item-title">{{title}}</div>' +
              '</div>' +
            '</div>' +
          '</a>' +
        '</li>',
      height: app.theme === 'ios' ? 63 : 73,
      on: {
        itemsAfterInsert: function (fragment) {            
          page.route.route.methods.addToTop(topId);
        }
      } 
    });
4

Your first list uses the element “.virtual-list” which is the F/ class that is used in each of your virtual lists. Try to set a unique identifier for each of your lists.

1 Like
5

ok found ! when i renamed all the classes in order to make them different, i transform virtual-list into my-virtual-list. Don’t. the “virtual-class” is mandatory.

Thanks for the help, frooplet !!