[FIXED] 2 virtual-lists

1

Hello there,

I have a virutal-list working fine but in the same page/view I have another button that opens a second page with another virtual list
When the second page opens, it’s writing the list in the previous view instead of the second one.

How can I add an identify to avoid that?>

First Virtual list:

                    var virtualList = app.virtualList.create({
		// List Element
		el: '.virtual-list',
                    etc...

Second Virtual list
var virtualList_chat = app.virtualList.create({
// List Element
el: ‘.virtual-list’,
etc…

Thanks

2

Choose unique class names as identifiers for each of the lists.

3

Hi @Frooplet,

Thanks for the reply.

Could you please provide a quick example? I’m beginner on that and not sure where the new class names need to be places.

Sorry and Thanks

4 
<div class="list virtual-list virtual-list-chat"></div>

var virtualList_chat = app.virtualList.create({
el: ‘.virtual-list-chat’,
...
});

Just add another unique class to your virtual-list element (here: virtual-list-chat) and reference that in list initialization. Otherwise your app won’t know which one to work on.

1 Like
5

Thanks for the reply @Frooplet.

What will be syntax in a data-search-container?

html

<div class="title">Empleados</div>
        <div class="subnavbar">
          <form data-search-container="list virtual-list virtual-list-chat" data-search-item="li" data-search-in=".item-title" class="searchbar searchbar-init">
           <div class="searchbar-inner">
              <div class="searchbar-input-wrap">
                <input type="search" placeholder="Buscar"/>
                <i class="searchbar-icon"></i>
                <span class="input-clear-button"></span>
              </div>
              <span class="searchbar-disable-button">Cancelar</span>
            </div>
          </form>
        </div>

js

var virtualList_chat = app.virtualList.create({
			// List Element
			el: '.virtual-list-chat',
			// Pass array with items

Many thanks for your help.

6

Fixed now. I had to change the following div.

Original

<div class="list virtual-list media-list searchbar-found"></div>

New

<div class="list virtual-list-chat media-list searchbar-found"></div>

Thanks again.