Also on my previous screenshot it shows a divider header at the bottom called 'NightName'
This is the header name in the collection for Circle, monday Madness and Now Thats What I Call Disco Inferno.
Im confused as to why that is there.
P.S the collection I'm using at the moment is only has test data of 3 clubs.
The full collection will contain 200 clubs+ so categorising by Genre is extremely important for me.
Thanks
Hi Joe,
Dividers works with text inside list item.
So you should add this text to list item. If you place this text in the begining of the list item you will get correct result.
Other way you can add inside listItem some hidden label and link your field to this label in the mapping.
Then replace code:
pre
return li.text().trim().replace(/\s.*/gi, "");
/pre
With following one:
pre
//Note you need replace "labelName" with your label component name.
return li.find('[name="labelName"]').text().trim();
/pre
Regards.
Thank you so much Yurii!
this has been driving me crazy, I can't wait to start learning JS.
It's working exactly how I want it to, just one last problem.
I think its not hiding the first unused divider. At the bottom it's showing a divider with the text 'Genre'. I the label has been made invisible but this had no affect.
Hi Joe,
Please replace this code:
pre
Appery(listName).listview("refresh"); //Refresh list component
Appery(listName).trigger("listviewcreate"); //Initiate dividers creation
Appery(listName).find("li").eq(0).hide(); //Hide first unused divider
/pre
With following:
pre
Appery(listName).listview("refresh"); //Refresh list component
Appery(listName).trigger("listviewcreate"); //Initiate dividers creation
var listItems = Appery(listName).find("li");
listItems.eq(0).hide(); //Hide first unused divider
listItems.eq(listItems.length - 1).hide(); //Hide last unused divider
/pre
Regards.
Hi Yurii,
Thank you but it's still showing the exact same.
this is the full code I have on the event rest service success:
var listName = "mobilelist_2";
var deviderOrder = 0;
Appery(listName).listview({
autodividers: true,
autodividersSelector: function (li) {
Code: Select all
return li.find('[name="Genre"]').text().trim();
} });
Appery(listName).listview("refresh"); //Refresh list component
Appery(listName).trigger("listviewcreate"); //Initiate dividers creation
var listItems = Appery(listName).find("li");
listItems.eq(0).hide(); //Hide first unused divider
listItems.eq(listItems.length - 1).hide(); //Hide last unused divider
For some reasons it's still showing the label name "Genre" as a header at the bottom. The same as the last screenshot I sent.
Thanks for all your help so far.
Hi Joe,
Please give us your app public link and describe steps to reproduce this problem.
Regards.
Hi Yurii
http://appery.io/app/mobile-frame?src...
startscreenNightsManchester Monday-Sunday
Each day monday-sunday have there own page with separate rest services with the rest service e.g where = {"Day":"Monday"}.
Each page monday-sunday are very similar with the only difference being different where parameters in the rest service.
The list on the page displays fields from the data base mapped to labels. These results are categorised by the 'Genre' column in the database. The type of Genre is given as the divider title. The problem is there is a divider at the bottom of the list with the title 'Genre'. This should not be here.
On each page there is a list with:
Label (NightName) visible
Labal (@) visible
Label (Club) visible
Label (ItemID)
Label (Genre)
on page load a rest service is invoked with the parameter for a each day of the week depending which page you're on e.g where = {"Day":"Monday"}. This rest services maps the fields from the database to the labels above.
Event:
rest service success run JS:
var listName = "mobilelist_20";
var deviderOrder = 0;
Appery(listName).listview({
autodividers: true,
autodividersSelector: function (li) {
return li.find('[name="Genre"]').text().trim();
}
});
Appery(listName).listview("refresh"); //Refresh list component
Appery(listName).trigger("listviewcreate"); //Initiate dividers creation
var listItems = Appery(listName).find("li");
listItems.eq(0).hide(); //Hide first unused divider
listItems.eq(listItems.length - 1).hide(); //Hide last unused divider
Let me know if you need anymore information.
Please note, i'm very new to JS and appery
Thank you
I have just added a few inputs and a button below the list on those pages.
This shouldn't change anything with the list, i just thought I'd let you know.
Hi Joe,
Please use following code:
pre
var listName = "mobilelist_20";
var deviderOrder = 0;
Appery(listName).listview({
autodividers: true,
autodividersSelector: function(li) {
Code: Select all
return li.filter(":visible").find('[name="Genre"]').text().trim();
} });
Appery(listName).listview("refresh"); //Refresh list component
Appery(listName).trigger("listviewcreate"); //Initiate dividers creation
var listItems = Appery(listName).find("li");
listItems.eq(0).hide(); //Hide first unused divider
/pre
Regards.
Thank you so much Yurii!