I have a list with a data filter. The list expands and contracts exactly as planned. What I'd like to do is to be able to read through the list items and perform a function for each item that is visible. How can I do this ?
I have a list with a data filter. The list expands and contracts exactly as planned. What I'd like to do is to be able to read through the list items and perform a function for each item that is visible. How can I do this ?
Hello Bob,
Could you please clarify with screenshots what kind of list are describing? Is it a list from service response?
Sorry. Cut the selection filter off the top of the image but I think you get the idea.
This is what I'm currently using but I get all the list items every time when I just want to display those that appear in the filtered list.
Code: Select all
var inputCustomer = Apperyio("customer_list").prev(".ui-filterable").find("input");
var row = Apperyio("customer_list_item");
while ($(row).length 0) {
if ($(row[0]).is(':hidden')) console.log('hidden');
if (!$(row[0]).is(':visible')) {
row = $(row).next();
} else {
var selectedRow = row[0];
// load the value if one found
if (selectedRow.hasAttribute("_idx")) {
var idx = selectedRow.attributes._idx.value;
var lat = $('#scrPlannerMap_latitude' + idx).text();
var long = $('#scrPlannerMap_longitude' + idx).text();
var name = encodeURIComponent($('#scrPlannerMap_name' + idx).text());
console.log($('#scrPlannerMap_name' + idx).text());
if ((long * 1) !== 0) {
var markerLatLng = new google.maps.LatLng(lat, long);
var styleMaker2 = new StyledMarker({
styleIcon: new StyledIcon(StyledIconTypes.BUBBLE, {
color: "B0E0E6",
text: name,
}),
position: markerLatLng,
map: map
});
markersArray.push(styleMaker2);
bounds.extend(markerLatLng);
}
}
row = $(row).next();
}
}
It's been a while since I asked. Any ideas please?
Hello Bob!
Not yet, sorry. We'll update here.
Something that may help and has me stumped.
Put this into my javascript
var id = $('#scrPlannerMap_customer_list_item' + idx);
var id2 = (id[0].attributes.class);
console.log(id2);
(mainly the last 2 lines)
and got this on the console
I can see the hidden lines but can't work out how to test for this or at least put it into a string that I can test.
Hi. May be a little closer. Am taking a slightly different approach. I can get the following to run
alert($('#scrPlannerMap_customer_list li:not(.ui-screen-hidden)').length);
The only problem is that in older versions of jqm the "input" and "keyup" events fire AFTER the list changes (as a result of entering something in the filter) but in the newer versions of JQM these events are fired BEFORE the list changes. Therefore always 1 keystroke behind... Is there an event I can use that fires AFTER the list is refreshed ? and do I attach it to the list, the input field in the filter or the list items ?
After much googling I've come up with a solution. I created an override filter. This allows me to find and select the records I need to display and process accordingly.
Have a look at the following http://demos.jquerymobile.com/1.4.4/f... for details on how to do this.