jquery-mobileiscroll4

How to reload Iscroll after jqm datafilter change?


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.


Solution

  • 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!