Jquery mobile list <UL> not formatted when created programmatically

Question

I'm probably doing something stupid but I can't figure this out for the life of me. I have a list in Jquery Mobile formatting. I create the list elements programmatically in a for loop from a table.

The first time the list is displayed from the function call, it displays properly with JQuery Mobile formatting and following the theme. However, if the function is called a second time, or more, the list reverts to standard HTML formatting with a blue underlined link.

Here is the code:

var createlist = function()
{
    window.$("#searchresults").html(resultsstring);
    var htmlstring = "";
    for (var i = 0; i<resultsarray.length; i++)
    {
        var eventtime = resultsarray[i].eventtime;
        var displaystring = resultsarray[i].string;
        var tmp = /(\d\d\d\d)-(\d\d)-(\d\d)\s(\d\d):(\d\d):(\d\d)/.exec(eventtime);
        var adjusteddate = new Date(tmp[1],tmp[2] - 1,tmp[3],tmp[4],tmp[5],tmp[6]);
        adjusteddate.setMilliseconds(adjusteddate.getMilliseconds() + offset); //this converts the VB event time to their local time
        htmlstring += "<li><a href=\"javascript:applib.showcameras(" + i + ")\">" + adjusteddate.toLocaleTimeString() + displaystring + "</a></li>"; //title=\""+resultsarray[i].string+"\"
    }
    window.$("#events").html(htmlstring);
    window.$("#events").trigger('refresh');
    window.$.mobile.changePage("#eventspage");
};

Here is the HTML string it spits out during my testing:

"<li><a href=\"javascript:applib.showcameras(0)\">‎9‎:‎01‎:‎18‎ ‎AM security state was set to disarmed</a></li>"

And here is the HTML:

<div data-role="page" data-theme="a" id="eventspage" >
    <div data-role="content">
        <ul data-role="listview" id="events" data-filter="true" data-filter placeholder="Search Records...">
        </ul>
</div>

Any advice is greatly appreciated! It looks like a nice list button the first time, and blue text the second time.

Omar · Accepted Answer · 2013-11-19 15:55:53Z

2

You're not calling enhancement correctly, you should use $("#events").listview("refresh").

window.$("#events").html(htmlstring);
window.$("#events").trigger('refresh'); // remove this
window.$.mobile.changePage("#eventspage");

Add the below code

$(document).on("pagebeforeshow", "#eventspage", function () {
  $("#events").listview("refresh");
});

Or call createlist function on pagebeforecreate, without calling .listview() or .trigger().

$(document).on("pagebeforecreate", "[data-role=page]", function (e) {
  createlist();
});

edited Nov 19, 2013 at 15:55

answered Nov 19, 2013 at 12:48

Omar

31.7k9 gold badges73 silver badges117 bronze badges

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

1 Comment

Jivex5k Over a year ago

Ah yes, listview is working. Thanks for the help, much appreciated!

Sam Tyson · Accepted Answer · 2013-11-18 21:41:13Z

0

You don't want to replace the html of your UL:

window.$("#events").html(htmlstring);

you want to append the new html to it:

window.$("#events").empty().append(htmlstring);

answered Nov 18, 2013 at 21:41

Sam Tyson

4,6344 gold badges29 silver badges35 bronze badges

2 Comments

Jivex5k Over a year ago

I changed it. So If I understand correctly, before it was replacing the UL html entirely? But now it adds it after the empty space? Also, it didn't fix the issue I am having with the formatting.

Sam Tyson Over a year ago

empty() would just remove any previous <li> elements before appending the current set.

Collectives™ on Stack Overflow

Jquery mobile list <UL> not formatted when created programmatically

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related