Forum | Appery.io

Hello! On page events in mapping from dateFrom to eventDivider-text instead your code paste the following:
codevar dateArray = value.split("-");
var date = new Date(dateArray[0], dateArray[1] - 1);
var monthNames = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
return monthNames[date.getMonth()] + " " + date.getFullYear();/code

Hey Marina,

the bug with NaN seems to be gone now.

Thank you sooo much!

Now my (hopefully) last issue with all this is the following:
As i have "Render all pages in one HTML file (jQuery Mobile multi-page template)" active because i, i somehow would need to trigger the data loading/refreshing on the page show event. at least this is what i understand, as the pages are not reloaded. this setting is activated because otherwise i loose the data loaded when i open/close popups.

the question is now, where do i have to put this code block for the divider. in case i have it in the success method of the event, the filter box is duplicated on each request.

when i have it in the on page load event, the dividers are not applied and the data doesnt refresh when page is shown again.

when i have it in the page show request (as i currently have it in the load), it works the first time but after a second show of the page list is empty (but dividers are there)

when i have a on load event which does the loads data and applies dividers and another event on the show event just executing the service - it appears to be an empty list with correct dividers.

i really dont get it where to apply that stuff. could you pleeeease help me out here?

Hi Yves,

Thank you for the detail description. I'll test this and update.

Hello! On Load Events screen should be code:
codeAppery("eventList").listview({
autodividers: true,
filter: true,
autodividersSelector: function (li) {
//Modify this function to generate divider text
var label = li.find("[name=eventDivider]"); //Find component
return label.text(); //Return label text
}
});
Appery("eventList").trigger("listviewcreate"); //Initiate dividers creation/code

Here shouldn't be codeAppery("eventList").find("div").eq(0).hide();/code

2) On service Success event run the following code:
codeAppery("eventList").listview("refresh"); //Refresh list component
Appery("eventList").find("li").eq(0).hide(); //Hide first unused divider/code

hey there,

This seems to work like a charm, beside one small thing that the first "unused" divider isnt hidden. actually, it hides it in the success event, but the complete event triggers the function "$t.refreshScreenFormElements("j_141");" which shows it again (saw this while debugging with chrome dev tool). Then i tried to add the hide event to the complete message, but unfortunatelly my code is inserted before the "$t.refreshScreenFormElements("j_141");" so it has no effect either.

The line in yor Appery.js which does show this nasty divider is:
ctx.find("ul[data-role='listview']:not([idx]), ol[data-role='listview']:not([idx])").listview('refresh');

i tried also to remove this unused divider or set its height to 0 but nothing helped. So again, i need your help

thank you very much in advance,

cheers yves

We'll check it and we'll update you.

Hello! Try this code on service complete:
code$t.refreshScreenFormElements($.mobile.activePage.prop('id'));
Appery("eventList").find("li").eq(0).hide();
return;/code

thank you! it works now.

Summary:

Idea is to get custom dividers for a "List" Component.

List:

Name:eventList 
Divider: Defined as Label with name eventDivider 
Data: Delivered by JSON via service. Divider Data mapped into label "eventDivider" 

Events:

Page Load event: 

code
Appery("eventList").listview({
autodividers: true,
filter: true,
autodividersSelector: function (li) {
//Modify this function to generate divider text
var label = li.find("[name=eventDivider]"); //Find component
return label.text(); //Return label text
}
});
Appery("eventList").trigger("listviewcreate"); //Initiate dividers creation
/code

Service Success event:
code
Appery("eventList").listview("refresh"); //Refresh list component
Appery("eventList").find("li").eq(0).hide(); //Hide first unused divider
/code

Service completed event:
code
$t.refreshScreenFormElements($.mobile.activePage.prop('id'));
Appery("eventList").find("li").eq(0).hide();
return;
/code

Please check that you change the name "eventList" to your lists name defined in the component. Make sure to replace "eventDivider" as well with the name of your label which holds dividers data.

Big Thanks to awesome support for helping me out.

Cheers and happy dividing, Yves

hi,
I am following this steps but i want to know what is listviewcreate in
Appery("eventList").trigger("listviewcreate");

and "eventList" is list name/list item name

Thanks,
Ishani