CODEWITHSUNDEEP
javascriptjqueryjquery-mobilejquery-mobile-listview
zennon
zennon

Reputation: 1090

Add dynamic list items to dynamically created panel with a istview

I'am using jquery mobile 1.3.2 for my web project.

The following code creates a panel for all pages:

function injectPanelIntoAllPages(){
    console.log("IncetPanel");

    var panel = '<div data-role="panel" id="mypanel" data-position="left" data-display="push">' + 
                 '<div><ul data-role="listview" id="history"></ul></div> </div>';


    $(document).on('pagebeforecreate', '[data-role=page]', function () {
        if ($(this).find('[data-role=panel]').length === 0) {
            $('[data-role=header]').before(panel);
        }
        $(document).on('pagebeforeshow', '[data-role=page]', function () {
            $(this).trigger('pagecreate');
        });
    });

}

Now i want to add (dynamically) list items to the listview in the panel, but it don't works.

For adding list items i use the following method:

function addToHistory(value) {
    $("#history").append(
            "<li id='history-element'>" + value + "</li>");
    $("#history").listview("refresh");

}

What can i do to solve this issue?

Upvotes: 1

Views: 1221

Answers (1)

Omar
Omar

Reputation: 31732

Note that you're using same Id for both panel and listview. This isn't recommended, however, it still can work as long as you specify which element to target within active page.

Another note, you don't need to call any enhancement method once you append panels dynamically, since you append them on pagebeforecreate. They will be created/initialized by jQM on that event.

$(document).on('pagebeforecreate', function () {
  if ($(this).find('[data-role=panel]').length === 0) {
    $('[data-role=header]').before(panel);
  }
});

To append elements into listview, you need to look for it into active page's. Otherwise, new elements will be added to first element with #history ID.

var listview = $.mobile.activePage.find("#history");
listview.append("elements").listview("refresh");

Demo

Upvotes: 3

Related Questions