making a list in jquery mobile using innerhtml

Question

I am trying to create a list using the styles provided by jquery mobile. When I make the list in the html file, the list incorporates the styles that jquery mobile provide: http://jquerymobile.com/demos/1.0/docs/lists/lists-search.html

However in my website, i need to generate the list based on the number of objects in my array so I want to do this by making the html script using javascript and changing the innerHTML of a div. When I do this, a normal list appears without the stylings of jquery mobile.

Does anyone have a solution to my problem?

Here's my markup code:

function GenerateList(appArray) {
    var searchList = document.getElementById('searchList');
    var app;
    var htmlString = "<ul data-role='listview' data-filter='true' data-filter- placeholder='Search...' data-filter-theme='a' data-theme='a'>";

    for(i=0; i<appArray.length;i++) {
        app = appArray[i];
        htmlString = htmlString + "<li><a id=App" + (i+1).toString() + " onclick='AppSelected(id);'>";
        htmlString = htmlString + "<img src='DummyImages/" + app[1] + "' alt='Logo' class='ListAppLogo'>";
        htmlString = htmlString + "<h3>"+ app[2] + "</h3>";
        htmlString = htmlString + "<p>" + app[4] + ".0/5.0</p>";
        htmlString = htmlString + "<input type='hidden'>" + app[0] + "</a></li>";
    }

    htmlString = htmlString + "</ul>";
    searchList.innerHTML = htmlString;
}

David Manske · Accepted Answer · 2012-04-02 17:35:08Z

2

You'll want to make sure JQuery Mobile initializes the list after you've created it with javascript. Use the following snippet where thislist is the id of the unordered list element.

$('#thislist').listview()

Also, if the unordered list with data-role='listview' already exists, then you'll want to use the same initializer with a parameter, 'refresh'. Here is another snippet where thislist is the id of the unordered list. You'll want to use the refresh if you've added/removed items from it dynamically.

$('#thislist').listview('refresh');

answered Apr 2, 2012 at 17:35

David Manske

2311 silver badge9 bronze badges

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

Comments

emoralesgt · Accepted Answer · 2012-02-21 20:43:18Z

I'm not taking credit for the solution instead trying to explain it in detail since it took me some time to figure it out but the changes should be something like this.

Original code:

function GenerateList(appArray) {
var searchList = document.getElementById('searchList');
var app;
var htmlString = "<ul data-role='listview' data-filter='true' data-filter- placeholder='Search...' data-filter-theme='a' data-theme='a'>";

...

searchList.innerHTML = htmlString;
}

Fixed code:

function GenerateList(appArray) {
var searchList = document.getElementById('searchList');
var app;
var htmlString = "<ul id='thislist' data-role='listview' data-filter='true' data-filter- placeholder='Search...' data-filter-theme='a' data-theme='a'>";

...

searchList.innerHTML = htmlString;
$('#thislist').listview();
}

This way it shows your list using the listview from jquery mobile.

lrusli · Accepted Answer · 2011-12-07 20:45:01Z

0

You're not using the same CSS as jQuery Mobile. If you look at the HTML on the link you provided, you'll see that they have additional classes on their list items:

<ul data-role="listview" data-filter="true" class="ui-listview">
  <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
    <div class="ui-btn-inner ui-li" aria-hidden="true">
      <div class="ui-btn-text"><a href="index.html" class="ui-link-inherit">Acura</a></div>
      <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
    </div>
  </li>
</ul>

answered Dec 7, 2011 at 20:45

lrusli

1133 bronze badges

4 Comments

theNoobProgrammer Over a year ago

i can make the list on the HTML page using the exact same scripts that i put up. It just fails to do so when i try to make it from the javascript

theNoobProgrammer Over a year ago

which plugin should i call and how and where should i call it? (i'm pretty new to web development)

lrusli Over a year ago

Right after setting that innerHTML. $('#searchList').listview();

lrusli Over a year ago

Hm...try adding an id to the <ul> element and call the plugin on that instead.

Collectives™ on Stack Overflow

making a list in jquery mobile using innerhtml

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related