Easier way to get proper JQM styling and functionality to dynamically generated listview ( ul / li ) ? (Source : JS/JQuery)
Greetings.. and thank you for using your time reading my post...
Setting up a listview in the markup is easy, and looks like it should when applying the correct data-roles and styles to it...
But.. populating (databinding) a listview from javascript/jquery was more brutal than i thought it should have been...
I wonder... am i doing something terribly wrong, when ending up with the code you can see below to create the jqm listview or is this the way to do it ? I hope.. the first :)
var listString = '<ul id="worklist" data-role="listview" data-indent="true">';
// this is a div
$workListViewContainer = $('#worklistcontainer');
$.each(instoreWorkList.OrderLines, function (index, value) {
listString += '<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-count ui-btn-up-c" style="height:120px">';
listString += '<div class="ui-btn-inner ui-li">';
listString += '<div class="ui-btn-text" style="padding-left:10px; padding-top:10px">';
listString += '' + this.ProductName + '';
//listString += '<a href="#" data-icon="grid" ui-icon-shadow="none" class="ui-link-inherit" data-transition="slide">' + this.ProductName + '</a>';
listString += '<div id="hidProductId" style="display:none">' + this.ProduktId + '</div>';
listString += '</div>';
listString += '<div style="clear:both; display:block; height:1px"></div>';
listString += '<div data-role="controlgroup" data-type="horizontal" style="padding-left:5px">';
listString += '<a data-role="button" class="minus"><img src="Content/Images/InStore_48x48_back.png" style="vertical-align:middle" /></a>';
listString += '<input type="text" class="ui-body-c ui-corner-all ui-shadow-inset productcount" style="width:30px; height:30px; text-align:center" value="' + this.ProductCount + '" />';
listString += '<a data-role="button" class="plus"><img src="Content/Images/InStore_48x48_forward.png" style="vertical-align:middle" /></a>';
listString += '</div>';
listString += '</div>';
listString += '</li>';
});
listString += '</ul>';
$workListViewContainer.html(listString);