JQuery Mobile format variable output into list

Question

I am trying to format the output from variable containing an array as a Jquery mobile list. However I am just getting a normal bullet list. If I copy the example Jquery mobile list code into a variable and output this to html, I get a list however no styling from the Jquery mobile. It appears the variable output cannot see the styling information from Jquery mobile? The rest of the page displays correctly.

This code is within a function on the same page as my links to the CSS / JS files, and loads on click.

 var output = '<ul data-role="listview" data-inset="true">';
 for(name in results){
 output += '<li>'+results[name]+'</li>';
 }
 output += '</ul>';


 $("#TomTop").html(output);

$("[data-role=listview]").listview(); after $("#TomTop").html(output);. — Omar
– Omar, Commented Feb 13, 2014 at 10:50
@Omar Thanks, how come the data-role needs to be stated twice? Also i now get a space between the styling of each list item, i.e The first item is styles correctly and the second one, however instead of touching each other there is a 10px approx gab between the list items? — Environment
– Environment, Commented Feb 13, 2014 at 10:57
what do you mean by data-role stated twice? if #TomTop is the id of the listview, then var output = '<ul data-role="listview" data-inset="true" id="TomTop>'; and $("#TomTop").html(output).listview();` will refresh listview. Regarding the padding, please post more details of your markup or create a fiddle. — Omar
– Omar, Commented Feb 13, 2014 at 11:01
check this, go through code thoroughly jsfiddle.net/Palestinian/9pgMq — Omar
– Omar, Commented Feb 13, 2014 at 11:35
@Omar It was a trailing <pre> tag that I had accidentally copied in. If you put your solution into a question I will accept it. — Environment
– Environment, Commented Feb 13, 2014 at 11:37

Omar · Accepted Answer · 2014-02-13 13:09:14Z

1

Based on the fiddle you've provided, you have to do the following changes.

Refrain from using .ready() in jQuery Mobile, instead, bind events on pagecreate.

$(document).on("pagecreate", "#Page_ID", function () {
  $(".selector").on("click", function () { });
});

Dynamically added elements enhancement:

When adding items dynamically to a div you can enhance all elements within it at once, using .enhanceWithin(). However, if you want to do modifications to a widget i.e. listview, you need to use widget's function .listview().
```
$("#TomTop").html(output).enhanceWithin();
```

Demo

answered Feb 13, 2014 at 13:09

Omar

31.7k9 gold badges73 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery Mobile format variable output into list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related