[Code_A]

I am trying to dynamically add list items to a select list based on a json response from a database on my web server. I tried to follow the Mobi Bike News example (along with referencing the m1 generated html), but I am not able to get the list items to show up in the simulator. Below is my code, and I have confirmed that there is data in the response.

var list = $('#m1-RSS-lstSite');

          //get total items to add
          var itemCnt = response.sitestatus.length; 

          //remove current list items
          $(list).empty();
          //$(list).children().remove(); 
          phoneui.showActivityDialog('Loading sites...');
          
        //build list 
        for (var i=0; i<itemCnt; i++){
               $(list).append(
                   
                    '<li id="m1-RRS-site' + i + '" class="' +
                       (i == 0 ? 'm1-first' : '') + 
                    (i == (itemCnt - 1) ? 'm1-last' : '') + 
                     ' m1-clickable m1-highlight" ' +
                     ' value="' + response.sitestatus[i].siteID + '">' +
                     ' <label id="m1-RRS-' + i + '" class="m1-active-color-1">' + response.sitestatus[i].siteName + '</label>' +
                   '</li>'
               );
        
        }
        // Set scrollable panel size
        list.parent().attr('data-layout-content-height', (itemCnt-1)*44 + 20);
        phoneui.preprocessDOM(list);  
        phoneui.hideActivityDialog();

Thanks for your help!

[support-octavio]

Hi Code A,

Have you check if there is some javascript syntax error?
Is the list built without data?
Could you share a sample project so we can review it easily? If you want to keep data private send it to support at genuitec dot com, use title mobione data from Code A

[Code_A]

Thank you for the reply.

I do not believe there is a syntax error in the script. The list is built without data in MobiOne. I have a list without any children. I am trying to add the children (list items) dynamically.

I have simplified the code for testing but still no luck. Am I going about this the right way or is there an easier method?

var list = $('#m1-RSS-lstSite');

//remove current list items
$(list).empty();
       
//build list
for (var i=0; i<10; i++){
list.append('<li id = "'+i+'"> '+i+' List Item </li>');
}
phoneui.preprocessDOM(list); 

[Brandon]

Just a guess without seeing any additional code, but are you sure that response.sitestatus.length is returning a value?
to check it try: alert(response.sitestatus.length);

[support-octavio]

Hi Code A,

I have compared the code you have provided with the code in the custom list example and found out that there’s a little difference in the way you are removing previous items:

var list = $(‘#m1-RSS-lstSite’);

//remove current list items
$(list).empty();

//build list
for (var i=0; i<10; i++){
list.append(‘<li id = “‘+i+'”> ‘+i+’ List Item </li>’);
}
phoneui.preprocessDOM(list);

Change code in bold for:

list.children(list).remove();

Tested it in that way and worked well for me. Let me know how it goes.

[Code_A]

Thanks for the reply.

I tried the code change you suggested but it did not seem to fix the issue. I will download the custom list example you provided and see if I can get it working by building a smaller, simpler app and following the example. I will feedback my findings.

Somehow I missed that how-to!

[support-octavio]

Hi Code A,

Let us know how it goes and if you need further assistance just let us know.

[Code_A]

After following the example, I am closer but still cannot seem to get things to work properly. Not sure if this is right or not, but I am using the code from the m1 generated html. In the example, the code is calling the images externally. Is that a necessity?

The list is building, but I am seeing 3 issues:

1. The selection “checkmarks” are not showing up when a list item is selected.
2. The selectListItem “widths” are taking up the whole screen.
3. The “firstItem” class is not being applied.

I have attached the file I have been testing.

Attachments:

You must be logged in to view attached files.

[support-octavio]

Hi Code A,

This sample design should be helpful:

Attachments:

You must be logged in to view attached files.

[Code_A]

Thank You Ocatavio! I got it working correctly with the example you provided.

[Code_A]

I am building my list dynamically exactly as the example shows. Everything is working great, until I try to get the value of one of the list items. I am trying the 2 methods below, but neither are giving me what I would expect. How do I retrieve the “data-val” value that I assigned to the item?

alert($('select[name="list1"] :selected')) //returns [object object]
alert($('select[name="list1"]').val()) //returns the text value from the "original" list before it dynamically changed, i.e. "Item"

Per the example, the data value is being assigned dynamically using the method below:

clone.attr('data-val', "val" + i);

Thanks for the help.

Attachments:

You must be logged in to view attached files.

[Code_A]

I have also tried using the following methods too but with no luck. I feel like I am missing something very simple.

alert($('select[name="list1"]').attr('data-val'));
alert($('select[name="list1"]').data('val'));

[Code_A]

Anyone?

I could really use some help with this…

[support-octavio]

Hi Code A,

I have escalated this problem to the dev team. The problem seems to be that the hidden <s elect>(disregard space) that mobione uses to manage user’s data is keeping just the old item so it can’t get the value that you select on the UI side. Will share more info as soon as I have an status update.

[Code_A]

Thank you for the reply and letting me know what us going on. This has been driving me crazy and my app development is at a standstill right now until I can get this working.

I would like to know what the eta is on a fix because if it’s going to be awhile then I may just need to redesign my GUI. Do you know if the same issue exists with the combobox or the select list menu?

[Author]

Posts