How to temporarily disable pull to refresh on a virtual list when searching

I have a list dynamic page much like the virtual list example but I also have a pull to refresh implemented on this list so the user can order the list by location distance.

The problem I have is that whilst using the search, the list narrows down as you type (as expected) but the pull to refresh is still active, and this messes up the results if accidentally pulled.

I’d like to disable the pull to refresh during a search but neither the searchbarEnable nor autocompleteOpen events are being fired to hook into this. Any ideas?

http://framework7.io/docs/pull-to-refresh.html#pull-to-refresh-app-methods .destroy and .create

Yea I wanted to do that when either the autocomplete is opened and closed or when the searchbar is enabled and disabled. But when I try to get in on those events they don’t seem to be getting called:

return {
  data: function () {
  },
  methods: {
  },
  on: {
    pageInit: function() {
      console.log( 'pageInit' );
    },
    pageBeforeout: function () {
      console.log( 'pageBeforeout' );
    },
    pageBeforeRemove: function () {
      console.log( 'pageBeforeRemove' );
    },
    autocompleteOpen: function(autocomplete) {
      console.log( 'autocompleteOpen' );
    },
    autocompleteClose: function(autocomplete) {
      console.log( 'autocompleteClose' );
    },
    searchbarEnable: function(searchbar) {
      console.log( 'searchbarEnable' );
    },
    searchbarDisable: function(searchbar) {
      console.log( 'searchbarDisable' );
    },
  }
}

Am I being an idiot? I can only see the page events being fired.

This “on” thing in router component only for router page events. Component events must added on components itself, or if you use DOM events like autocomplete:open must be added on DOM elements

1 Like

Thank you for clearing that up. I achieved it like this isn the end:

<form data-search-container=".virtual-list" data-search-in=".item-title" class="searchbar searchbar-expandable searchbar-demo searchbar-init" @searchbar:enable="ptrDestroy" @searchbar:disable="ptrCreate">
  <div class="searchbar-inner"></div>
</form>

methods: {
  ptrDestroy: function () {
    var self = this, app = self.$app;
    app.ptr.destroy('.ptr-content');
  },
  ptrCreate : function () {
    var self = this, app = self.$app;
    app.ptr.create('.ptr-content');
  }
}
1 Like