Forum | Appery.io

Hello,
Unfortunately, we can help you with this issue, it is all matter of debugging.

Egor, I understand that ..but unfortunately debug is not helping. This is something that I need to resolve soon ...but I am making no headway

Hi Xman,

Yes this is solution for basic list(with no other components inside).

So you can try to get this solution work in following way:

1. Add new list to the page.

2. Use following JS code to add items:

   pre

   var newItemText = "Hello this is new item";
   //Where "mobilelist_47" is your list component name.
   var list = Apperyio("mobilelist_47");
   //Get list template item.
   var templateITem = list.find('li[data-appery-tpl="true"]');
   var newItem = templateITem.clone().removeAttr("data-appery-tpl");
   //Set text to new item
   newItem.find("h3").text(newItemText);
   //Append new item to end of the list component.
   newItem.insertBefore(templateITem);

   /pre

   Regards.

How is that going to work for adding the first item in the list? The list will be empty at that time and there will be no item with data-appery-tpl="true".

Is there another way to do this? That is add items progressively to the end of the list, starting from the point when the list is actually empty?

...appreciated.

Hi Xman,

Tried this code again and it works.

Here is where you can test it: http://appery.io/app/view/93534752-d9...

Regards.

No luck ...I noticed that my list actually does not have that data-appery-tpl="true" attribute at all, so how is that "find" going to work on it?
code
</a><!--
--><!-- mobilelist_199 -->
<ul data-role="listview" id="eventDetails_mobilelist_199" class="eventDetails_mobilelist_199"
name="mobilelist_199" dsid="mobilelist_199" data-inset="true" data-theme="b" data-divider-theme="b"
data-count-theme="b" style="" data-split-icon="carat-r">
<!-- mobilelistitem_200 -->
<li class="eventDetails_mobilelistitem_200" data-icon="carat-r">
<a id="eventDetails_mobilelistitem_200" name="mobilelistitem_200" dsid="mobilelistitem_200"
tabindex="70" class="eventDetails_mobilelistitem_200">
<h3></h3>
</a>
</li>
</ul>

/code

Hi Yurii, I have a question please check the comment below. I don't have that attribute that the code is searching.

Ok, so I got Yurii's solution to work for me by manually adding that specific property first from the design tab to my listitem in the list.

This is a good step forward, but the full solution to my problem requires to take this a step forward. So how do I?

(1.) Make the solution above to work for a list, where the listitem has a label placed inside it?
(2.) On every button click, I need to first empty the list (so that new clicks don't just keep adding repeatedly). What is the best way to do that?

appreciated.

Hi Xman,

Here is JS code for list with label inside:

precode

var newItemText = "Hello this is new item&quot
&#47;&#47;Where "mobilelist_47" is your list component name&#46;
var list = Apperyio("mobilelist_47");
&#47;&#47;Get list template item&#46;
var templateITem = list&#46;find('li[data-appery-tpl="true"]');
var newItem = templateITem&#46;clone()&#46;removeAttr("data-appery-tpl");

&#47;&#47;Set text to the "mobilelabel_77" label&#46;
newItem&#46;find('[name="mobilelabel_77"]')&#46;text(newItemText);

&#47;&#47;Append new item to end of the list component&#46;
newItem&#46;insertBefore(templateITem);

/code/pre

Regards.

Thanks that works! How about #2 - do you have any tips for that? I have to first clear this list on every button click - then the service will run on it and keep populating it.