[SOLVED] Virtual list shows list only after do a seachr on searchbar

Questions
1

Hi, I’ve a virtual list which is populated with item retrieve from a request to my server. The virtual list is populated well, the problem is that the list is showed only if I start to type on the searchbar. I’d like to see the list immediatly when the user go to the page. In this moment when I enter into the page I see in the correct way the searchbar but not the list. the list appers only if I do a search.

This is my code, I follow the example of the docs to write it. PS:now for the test I have only 17 elements, but I’m going to have next almost 40 elements.
Thank you in advance!
I call the method in pageInit() in this way in myapp.js

  on: {
	pageInit: function(){
						
	searchUser();
	
 }
},

this is searchUser() method when firstly I retrieve the elements for the list from a request, then I populate the array item and finally I create the virtual list

 app.request.get(urlServer, {keys: k},function(data){
			
			var d = JSON.parse(data);

			switch(d.response.code)
			{
				case '400': //wrong
					          break;

				case '200': //success								
				           //HERE I PPOPULATE THE LIST
					     for (var i = 0; i < d.data.length; i++) {		                        
	                                          items.push({ title: d.data[i].first_name + ' ' + d.data[i].last_name , subtitle: d.data[i].company , href: 'href=\'view/?data=' + JSON.stringify(d.data[i]) + '\''});
	                          
	                                      }
		  			      break;				
			}//switch
 	});//request

var virtualList = app.virtualList.create({
// List Element
el: '.virtual-list',
 // Pass array with items
items: items,
// Custom search function for searchbar
searchAll: function (query, items) {
var found = [];
for (var i = 0; i < items.length; i++) {
  if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
}
return found; //return array with mathced indexes
 },
 // List item Template7 template
itemTemplate:
 '<li>' +
  '<a  class="#" {{href}}>' +
    '<div class="item-inner">' +
      '<div class="item-title-row">' +
        '<div class="item-title">{{title}}</div>' +
      '</div>' +
      '<div class="item-subtitle">{{subtitle}}</div>' +
    '</div>' +
  '</a>' +
'</li>',
// Item height*/
height: app.theme === 'ios' ? 63 : 73,
 });
 }

this is the html

  <div data-name="users" class="page">
<form data-search-container=".virtual-list" 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="Search"/>
          <i class="searchbar-icon"></i>
          <span class="input-clear-button"></span>
        </div>
        <span class="searchbar-disable-button">Cancel</span>
    </div>
 </form>	      
<div class="searchbar-backdrop"></div>
<div class="page-content ">
    <div class="list links-list searchbar-not-found margin padding">
      <ul >
          <li>Nothing found</li>
      </ul>
    </div>
    <div class="list virtual-list media-list searchbar-found margin padding"></div>			
</div> <!-- ./ page-content -->
</div>
2

Thats your actual code?

app.request.get is async, so before it finish getting your data you already created the virtual list.

var virtualList = app.virtualList.create({...})

try moving your list creation on the return of the ajax call

 app.request.get(urlServer, {keys: k},function(data){
			
			var d = JSON.parse(data);

			switch(d.response.code)
			{
				case '400': //wrong
					          break;

				case '200': //success								
				           //HERE I PPOPULATE THE LIST
					     for (var i = 0; i < d.data.length; i++) {		                        
	                                          items.push({ title: d.data[i].first_name + ' ' + d.data[i].last_name , subtitle: d.data[i].company , href: 'href=\'view/?data=' + JSON.stringify(d.data[i]) + '\''});
	                          
	                                      }
                          app.virtualList.create({...})
		  			      break;				
			}//switch
 	});//request

also, no need to JSON.parse(), you can use app.request.getJSON(), and you will get a json

1 Like
3

wow it works! thank you for both correction :smiley: