Forum | Appery.io

Is it possible to create a "load more" button? with the list component i want it to load the first 10 items. Then by clicking the "load more" button it will extend the list by 10 more items and push the "load more" button to the bottom of the list.

Thanks!

Hello Chris!

You can add 10 items with this JavaScript, on Click Event for Button Run JS:

codefor(i = 0; i < 10; i++){
Appery('list')&#46;append('<li><a>New item<&#47;a><&#47;li>');
Appery('list')&#46;listview('refresh');}/code

where 'list' is the name of the list.

Hi Alena,

Thanks for your help..

I've tried the code you gave me and i managed to get the button to load 10 more items. I think what i should have said was that by clicking the load more button it would change the limit value for the list to increase it by 10 and load the new 10 at the bottom of the current list.

I believe that would be different than the code you gave me?

Regards

Hi Chris,

The way you describe leads to excessive traffic in the application and decreasing performance as a consequence of the need to completely rebuild list each time.

The solution proposed by Alena shows you how you can add items to the list dynamically. That is, you need to implement a button that calls the service and increases additional list items from the response.

Ok i tried you suggestion and it certainly does add 10 more list items to the list.

Trouble is ive customized the list with images and a few labels so how to do make it look the same as the others in my list?

Additionally, how to i make the new items populate with data from the service? at the moment its just added 10 new items to the list with the text "new item".

Thanks for your patience. I'm a novice.

Hi Chris,

You need to create a service where in the response parameters you receive "How many records to skip" and "How many new ones to download". In the service Success event handler you have a "data" variable which contains the entire response from the server. From it you choose the new data, add them to the list as shown above, substituting New Item with the desired label from the data. You should repeat the basic structure of each element.

Appery('list').listview('refresh'); should be called at the end of the function, not in the loop. This line will cause the list to be redrawn to suit all styles and new items.