CODEWITHSUNDEEP
javascripthtmllistviewjquery-mobile
user2848357
user2848357

Reputation: 53

Jquery Mobile Duplicating Autodividers

I have a list but when I try to generate autodividers for that list I'm getting duplicate dividers. Here is the code for the ul and the relevant script:

<div data-role="content">   
        <ul data-role="listview" id="ScheduleList" data-autodividers="true">
            <li time="3:30PM"><a href="#">Event 1</a></li>
            <li time="3:30PM"><a href="#">Event 2</a></li>
            <li time="4:30PM"><a href="#">Event 3</a></li>
            <li time="3:30PM"><a href="#">Event 4</a></li>
            <li time="3:30PM"><a href="#">Event 5</a></li>
            <li time="4:30PM"><a href="#">Event 6</a></li>
       </ul>
    </div>
</div>
<script>
$(document).on("pageinit", "#ScheduleDay", function(){
    $("#ScheduleList").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr('time');
            return out;
        }
    }).listview('refresh');
});
</script>

Here is the code in JSFiddle: http://jsfiddle.net/4fGT6/65/

I know that I could reorder the list items in the html and that would eliminate the duplicate autodividers, but if I made the list to be generated dynamically from user inputs then I couldn't manually reorder the html.

Is there a way to solve this if the list had been generated dynamically?

Thanks.

Upvotes: 3

Views: 1271

Answers (1)

Omar
Omar

Reputation: 31732

First step, sort list items based on data-time attribute (I added data to facilitate reading values - data attribute is ignored by user agent, thus it won't mess up your code).

I used the below simple code, yet genius, made by @undefined.

Update:

Thanks to @Keir Lavelle for reviewing the code of sorting li elements.

var listview = $('#ScheduleList'),
    listitems = listview.children('li');

listitems.detach().sort(function (a, b) {
    var adata = $(a).data('time');
    var bdata = $(b).data('time');
 /* return (adata > bdata) ? (adata > bdata) ? 1 : 0 : -1; */
    return (adata > bdata) ? 1 : -1;
});

listview.append(listitems);

Second step, apply autodividers dynamically.

$("#ScheduleList").listview({
  autodividers: true,
  autodividersSelector: function (li) {
    var out = li.jqmData('time');
    return out;
  }
}).listview('refresh');

Demo

Credits to @undefined and @Keir Lavelle

Upvotes: 6

Related Questions