Jquery Mobile Duplicating Autodividers

Question

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.

You need to sort them first and then apply auto-divider. – Omar Oct 06 '13 at 06:47 — Omar, Oct 06 '13 at 06:47

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

6

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 08 '13 at 11:17

Omar

32,302
9
69
112

what is the purpose of the nested ternary statement in the line return (adata > bdata) ? (adata > bdata) ? 1 : 0 : -1; – Keir Lavelle Mar 19 '14 at 14:58
@keirlavelle it's used to sort `li` elements before applying auto dividers. Pls check link in my post for more details about this block of code. – Omar Mar 19 '14 at 15:11
Isn't that line only ever going to return 1 or -1 though? I was just confused as to why you compare adata > bdata twice? – Keir Lavelle Mar 19 '14 at 15:15
@keirlavelle I got that code from a different answer. I'm not good in JS. Do you have better solution? I'll be happy to update my answer with it :) – Omar Mar 19 '14 at 15:32
1

definitely not a better solution, i've upvoted your answer as i've used it for myself :) however the return line compares adata > bdata twice, if the first comparison is true then so is the second, so you could remove the second ternary statement and have it read return (adata > bdata) ? 1 : -1; - saves you a couple of bytes of data :p – Keir Lavelle Mar 19 '14 at 15:35
@keirlavelle thank you for reviewing the code and the +1 :) I'll update my answer accordingly. – Omar Mar 19 '14 at 16:01
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/50059/discussion-between-omar-and-keir-lavelle) – Omar Mar 19 '14 at 17:33

Jquery Mobile Duplicating Autodividers

1 Answers1

Update:

Linked