how to create auto list dividers when dynamically creating a list in jquery mobile

Question

I've created a list of messages dynamically. I have a <ul> tag and I'm generating a list inside dynamically. However, I don't know how to add list dividers to this. Would there be a refresh method in js that I can call which would add dividers after I have my list?

This is what I have:

<ul id="messages" data-autodividers="true" data-role="listview" data-theme="c">

    //a list of <li> are dynamically generated here

</ul>

This only appends on list divider to the very top, I need several of them within the <li> tags. My list of <li>'s are messages. I want to be able to have dividers by Date so it makes it much easier to use.

Have you read JQM docs? http://jquerymobile.com/demos/1.2.1/docs/lists/lists-divider.html — Ateszki, Mar 20 '13 at 15:00
yes, however there isn't a scenario for when you already have a list generated and want to go in after and add list-dividers — DannyD, Mar 20 '13 at 15:02
Can you add the dividers dynamically when you inject the messages? You can also add the dividers later and refresh the list $('#mylist').listview('refresh'); — Ateszki, Mar 20 '13 at 15:04

Ateszki · Accepted Answer · 2013-03-20T16:01:58.390

I've a jsfiddle http://jsfiddle.net/yVtVE/2/

The code is a bit different but it works

assuming a list like this

<ul data-role="listview" id="MessagesList" data-autodividers="true">
                <li date="2013-03-20"><a href="#">Event 1</a></li>
                <li date="2013-03-20"><a href="#">Event 2</a></li>
                <li date="2013-03-19"><a href="#">Event 3</a></li>
           </ul>

Your code would be

$("#MessagesList").listview({
            autodividers: true,
            autodividersSelector: function (li) {
                var out = li.attr('date');
                return out;
            }
        }).listview('refresh');

ORIGINAL

From the JQM docs http://api.jquerymobile.com/listview/

Autodividers

A listview can be configured to automatically generate dividers for its items. This is done by adding a data-autodividers="true" attribute to any listview.

By default, the text used to create dividers is the uppercased first letter of the item's text. Alternatively you can specify divider text by setting the autodividersSelector option on the listview programmatically. For example, to add a custom selector to the element with id="mylistview":

$( "#mylistview" ).listview({
autodividers: true,
// the selector function is passed a <li> element from the listview;
// it should return the appropriate divider text for that <li>
// element as a string
autodividersSelector: function ( li ) {
var out = /* generate a string based on the content of li */;
return out;
}
});

Let's say you have a date in your message your code would work something like this

$( "#mylistview" ).listview({
autodividers: true,
autodividersSelector: function ( li ) {
    var re = /\/\d{4}\/\d{2}\/\d{2}/i;
    var out = $(this).html().match(re);
    return out;
  }
});

I have not tested this code, it might have bugs, but it will give you an idea to try.

how to create auto list dividers when dynamically creating a list in jquery mobile

1 Answers1

Linked