Add or Remove ListItem from List Manually

[Egor Kotov6832188]

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

[xman]

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

[Yurii Orishchuk]

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.

[xman]

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.

[Yurii Orishchuk]

Hi Xman,

Tried this code again and it works.

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

Regards.

[xman]

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

[xman]

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

[xman]

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.

[Yurii Orishchuk]

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.

[xman]

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.