- This topic has 3 replies, 2 voices, and was last updated 11 years, 5 months ago by
.
-
Posts
-
I need to figure out why the List item is not selectable once the html has been appended with new values.
Ive even tried replacing all the UI .js and css with jquery mobile UI and it still wont fire the selected tab.project sample link http://www.globalgraffiti.net/clients/mobionetest/form-landing-screen3.html
on products tab
Choose “type” list option first and then it will load in a new “model” list
It works only you can no longer select any items in the “model” list.I viewed the source, and there is a CSS element that is not firing on.click and that’s the
“m1-selected” class.Here is the HTML generated by Mobione before i append the list.
<ul id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-selection-list" class="m1-rounded-list m1-selection-list m1-list" data-multiple="false" data-selectioninfoid="m1-form-landing-screen3-selectListMenu3-selinfo" data-hiddeninputid="m1-form-landing-screen3-hidden-select-selectListMenu3"> <li id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-si-" class="m1-selected m1-first m1-clickable m1-highlight m1-font-11 m1-icon-3 m1-icon-4 m1-icon-5 m1-icon-6 m1-icon-7 m1-effect-1" data-val="select model"> <label id="m1-form-landing-screen3-20" class="m1-active-color-3">select model</label> </li> <li id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-si-F" class="m1-clickable m1-highlight m1-font-11 m1-icon-3 m1-icon-4 m1-icon-5 m1-icon-6 m1-icon-7 m1-effect-1" data-val="F"> <label id="m1-form-landing-screen3-21" class="m1-active-color-3">F</label> </li> <li id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-si-G" class="m1-clickable m1-highlight m1-font-11 m1-icon-3 m1-icon-4 m1-icon-5 m1-icon-6 m1-icon-7 m1-effect-1" data-val="G"> <label id="m1-form-landing-screen3-22" class="m1-active-color-3">G</label> </li> <li id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-si-GA" class="m1-clickable m1-highlight m1-font-11 m1-icon-3 m1-icon-4 m1-icon-5 m1-icon-6 m1-icon-7 m1-effect-1" data-val="GA"> <label id="m1-form-landing-screen3-23" class="m1-active-color-3">GA</label> </li> <li id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-si-FA" class="m1-clickable m1-highlight m1-font-11 m1-icon-3 m1-icon-4 m1-icon-5 m1-icon-6 m1-icon-7 m1-effect-1" data-val="FA"> <label id="m1-form-landing-screen3-24" class="m1-active-color-3">FA</label> </li> <li id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-si-BP" class="m1-last m1-clickable m1-highlight m1-font-11 m1-icon-3 m1-icon-4 m1-icon-5 m1-icon-6 m1-icon-7 m1-effect-1" data-val="BP"> <label id="m1-form-landing-screen3-25" class="m1-active-color-3">BP</label> </li> </ul>Here is my JS code that will append the list for 1 of the 3 “type” options.
function listItemsTwo() { var list2 = $('#m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-selection-list'); //loopup<ul> list2.html(''); list2.append(' <li id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-si-" class="m1-first m1-clickable m1-highlight m1-font-11 m1-icon-3 m1-icon-4 m1-icon-5 m1-icon-6 m1-icon-7 m1-effect-1" data-val="select model">'+ '<label id="m1-form-landing-screen3-20" class="m1-active-color-3">select model</label>'+ '</li>'+ ' <li id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-si-GAA" class="m1-clickable m1-highlight m1-font-11 m1-icon-3 m1-icon-4 m1-icon-5 m1-icon-6 m1-icon-7 m1-effect-1" data-val="GAA">'+ ' <label id="m1-form-landing-screen3-21" class="m1-active-color-3">GAA</label>'+ '</li>'+ ' <li id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-si-BAA" class="m1-last m1-clickable m1-highlight m1-font-11 m1-icon-3 m1-icon-4 m1-icon-5 m1-icon-6 m1-icon-7 m1-effect-1" data-val="BAA">'+ ' <label id="m1-form-landing-screen3-22" class="m1-active-color-3">BAA</label>'+ '</li>' ); }Here is the list after its appended
<ul id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-selection-list" class="m1-rounded-list m1-selection-list m1-list" data-hiddeninputid="m1-form-landing-screen3-hidden-select-selectListMenu3" data-multiple="false" data-selectioninfoid="m1-form-landing-screen3-selectListMenu3-selinfo"> <li id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-si-" class="m1-first m1-clickable m1-highlight m1-font-11 m1-icon-3 m1-icon-4 m1-icon-5 m1-icon-6 m1-icon-7 m1-effect-1 m1-selected" data-val="select model"> <label id="m1-form-landing-screen3-20" class="m1-active-color-3">select model</label></li> <li id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-si-GAA" class="m1-clickable m1-highlight m1-font-11 m1-icon-3 m1-icon-4 m1-icon-5 m1-icon-6 m1-icon-7 m1-effect-1" data-val="GAA"> <label id="m1-form-landing-screen3-21" class="m1-active-color-3">GAA</label></li> <li id="m1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-si-BAA" class="m1-last m1-clickable m1-highlight m1-font-11 m1-icon-3 m1-icon-4 m1-icon-5 m1-icon-6 m1-icon-7 m1-effect-1" data-val="BAA"> <label id="m1-form-landing-screen3-22" class="m1-active-color-3">BAA</label></li> </ul>Hi,
>Here is the HTML generated by Mobione before i append the list.
The code you are using to populate the Select List Menu looks a little bit different than the one we have shared in the past to populate a Select List Menu, that is the most probably reason of the issue. Please take a look at next example and try to populate your list using a similar code:
http://portal.genuitec.com/support-genuitec/viewtopic.php?p=14030#p14030Hey Thanks,
I was able to modify the code to pull the values of an array, which was exactly what i needed.
Code is below for others who want to use this with array method.
Also the select values weren’t appending till i targeted slmId.attr as ID
rather than data-hiddeninputid which was not defined on my <select>
elements.// There are IDs you need to change appropriate to your design: // 1. ID of SLM (Select List Menu) HTML element var slmId = 'm1-form-landing-screen3-hidden-select-selectListMenu3'; // 2. ID of UL HTML element where SLM list is located var slmPageId = 'm1-form-landing-screen3-m1-form-landing-screen3-selectListMenu3-selection-list'; var select = $('#' + $('#' + slmId).attr('ID')); var list = $('#' + slmPageId); var placeholder = select.children()[0]; var liplaceholder = list.children()[0]; list.empty(); select.empty(); var itemsCount = 10; // Count of items we want to add var selectedIndex = 0; // Index of selected item var myvalues = new Array(); myvalues[0] = "none"; myvalues[1] = "test1"; myvalues[2] = "test2"; myvalues[3] = "test3"; myvalues[4] = "test4"; myvalues[5] = "test5"; myvalues[6] = "test6"; myvalues[7] = "test7"; myvalues[8] = "test8"; myvalues[9] = "test9"; myvalues[10] = "test10"; // That list fills <options> and SLM's list for (var i=1; i<=itemsCount; ++i) { var clone = $(placeholder).clone(); var liclone = $(liplaceholder).clone(); clone.attr('value', myvalues[i]); clone.attr('label', myvalues[i]); clone.text(myvalues[i]); if (i != selectedIndex) { clone.removeAttr('selected'); liclone.removeClass(m1Design.css("selected")); } select.append(clone); if (i != 1) { liclone.removeClass(m1Design.css("first")); } if (i != itemsCount) { liclone.removeClass(m1Design.css("last")); } $("label", liclone).text(myvalues[i]); liclone.attr('data-val', clone.attr('value')); list.append(liclone); } // Set scrollable panel size list.parent().attr('data-layout-content-height', (itemsCount-1)*44 + 20); setTimeout(function() { phoneui.preprocessDOM($('#' + slmPageId).parent().parent()); }, 50);Glad about your success. Closing thread. Let us know if you have other questions.
