scholzr scholzr - 7 months ago 35
Javascript Question

Jquery mobile listview autodividersSelector

I have been searching all over the web (and here), and can't seem to figure out what is going on. I have a jquery mobile (1.2) page with several items on a listview. I have added a custom attribute to each [li] tag and set that as the auto-divider according the the jquery mobile demo.

HTML

<div data-role="page" id="ScheduleDay">
<div data-role="header">
<a href="#HomePage" data-icon="home" data-direction="reverse">Home</a>
<h1 id="ScheduleDayText">Schedule</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="ScheduleList">
<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>
</ul>
</div>
</div>


JQUERY

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


I have created a jsfiddle to show what I am trying to accomplish.

I can't seem to get the dividers to show up, and I am sure that I am overlooking something fairly minor (or completely missing the boat alltogether- I am still fairly new to jquery).

Any help would be greatly appreciated.

Answer

To make it work:

  1. Still need to use data-autodividers="true" on your <ul>
  2. Put the code in the appropriate jQM handler pageinit() or pagebeforeshow()
  3. There is a typo in var out = li.attr('time');] <-- you don't need the bracket at the end

That being said, your listview's markup will look like:

<ul data-role="listview" id="ScheduleList" data-autodividers="true">
</ul>

and JS code will look like:

$(document).on("pageinit", "#ScheduleDay", function(){
    $("#ScheduleList").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr("time");
            return out;
        }
    }).listview("refresh");
});

Here is jsFiddle

Comments