Forum | Appery.io

I am trying to dynamically add items via JS code to a list depending on contents of a local storage variable. The list (named - list) is created via the UI component and has only 1 item to begin with (named listItem): I want the dynamically created list items to inherit the properties and actions of the listItem. The code is below:

var strList = localStorage.getItem('list');
var listJSON = JSON.parse(strList);
for (var i = 0, len = listJSON.length; i < len; i++) {
if (i==0)
Appery('listItem').text((listJSON));
else {
Appery('list').append( ""+listJSON+"" );
}
}
Appery('list').listview('refresh');

This works fine in terms of UI display (the multiple list items appear with appropriate text), but when I create a new onClick event for component listItem on UI to run simple JS alert("FOO"), then the dynamically created listItems above don't respond as expected (but the first item - listItem - does).

How could I fix this? Thank you for your feedback.

Hello!

As you have only one listItem in UI, please try to use Click event for List component not listitem, choose it in breadcrumbs (http://docs.appery.io/documentation/b...).

Let us know about result.

It works for a generic alert. i.e. I get a alert "FOO" when any of the listItem in List component is clicked. However I need to be able to retrieve Appery('listItem').text() depending on which 'listItem' is clicked. What would you recommend?

Thank you.

Hi,

You would need to add click event handler for new items:pre$("selector")&#46;on("click", myfun);/preWhere 'selector' is a listitem selector,
'myfun' is a handler function.

Hi Katya

I accordingly modified the new item addition to have the "data-name" field included. Please see snippet below. I am wondering if this create the selector I need? However alert(Appery('listItem_1').text()) still yield blank. Could you suggest what might be wrong here? I am hoping this will help someone else looking to build listItems dynamically.

for (var i = 0, len = listJSON.length; i < len; i++) {
if (i==0)
Appery('listItem').text((listJSON));
else {
Appery('list').append( ''+buddyListJSON+'');
}
}
Appery('buddyList').listview('refresh');

Secondly, could you suggest what "myfun" handler function should I use? In other words what does Appery use for its UI based listItem component.

Thank you.

Hi Katya

I accordingly modified the new item addition to have the "data-name" field included. Please see snippet below. I am wondering if this create the selector I need? However alert(Appery('listItem_1').text()) still yield blank. Could you suggest what might be wrong here? I am hoping this will help someone else looking to build listItems dynamically.

for (var i = 0, len = listJSON.length; i < len; i++) {
if (i==0)
Appery('listItem').text((listJSON));
else {
Appery('list').append( ''+buddyListJSON+'');
}
}
Appery('buddyList').listview('refresh');

Secondly, could you suggest what "myfun" handler function should I use? In other words what does Appery use for its UI based listItem component.

Thank you.

I am posting my question as within the image to preserve semantics. Will appeciate your feedback.

Hi,

Please share the app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a and tell me where to see this.

I have shared the project as suggested. You can see the above JS code linked to load of mainInputAndDisplayPagev2 page (please see action #4 for on load event, and JS associated with it.)

Thank you.

Hi,

Try adding attribute 'name' to tag 'a' in element 'li':pre&#46;&#46;&#46;&#46;
Appery('buddyList')&#46;append( 'a href="http://" name="buddyListItem" rel="nofollow"'+buddyListJSON+'');
&#46;&#46;&#46;&#46;/a/pre