I have a listview with a jquerymobile datafilter and I'm using iscroll. After a search with the datafilter I would like to reload Iscroll since it doesn't resize the scrollable area.(So it's possible to scroll away from the items)
This is my html:
<div id="mywrapper" class="wrapper">
<div data-role="content" id="myscroller">
<ul data-role="listview" id="lstvw_myitems" data-filter="true"></ul>
</div>
</div>
I have already tried to bind a change event to the listvw_myitems change but it doesn't seem to get called.
This is what I've tried:
$('#lstvw_myitems').change(function() {
loadIScroll('wrapper');
});
Are there any other (jquery)events I could try to catch on the listview?
This is the Iscroll code I use.(the timeout is to fix a bug when iscroll was loading,the other code is to prevent selecting while scrolling.)
function loadIScroll(wrapperId){
setTimeout(function () {
var myScroll = new iScroll(wrapperId, {bounce: false, hScrollbar: false, vScrollbar: false, vScroll: true, useTransform: true, zoom: false,
onBeforeScrollStart: function(e){
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
}, 1);
}
I'm using jqm 1.3 jq 1.9.1 and iscroll v4.2.5.
In stead of looking for events on the list object I have change my code to look for input in the search inputbox.
Here's an example:
$(document).on('pagebeforeshow',"*", function(e, data){
//bind keypress of datafilter to resize iscroll
$('.ui-input-search > input').bind("keyup",function(){
myScroll.refresh();
});
});
Notes: Iscroll var has to be available in the scope to refresh it. This event is always called because of the * selector, using another selector would be better. I also don't know if the '.ui-input-search > input' selector is enough to cover only those search input boxes.
Maybe someone else will come up with a better solution!