1

Is it possible to use jQuery data-filter to filter items brought in from external HTML via .load?

I use jQuery's data-filter to allow users to filter lists, so that only list items which match their input are displayed.

<div data-role="content">
  <ul data-role="listview" data-icon="false" data-filter="true" data-filter-placeholder="Search..." data-inset="true">

    <li data-role="list-divider"> Characters </li>
    <li data-filtertext="apples:oranges">Group 1</li>
    <li data-filtertext="apples:bananas">Group 2</li>
    ...
    <li data-filtertext="monkeys:boxes">Group 200</li>

  </ul>
</div>

But, I want to move the list items to a separate html file, and call it using:

$("div[id^=menu]").each(function() {
  var match = this.id.match(/\w+$/)[0];
  $(this).load('menus/' + match + '.html');

So that I can replace all the list items with 

<div data-role="content">
  ul data-role="listview" data-icon="false" data-filter="true" data-filter-placeholder="Search..." data-inset="true">

  <div id="menutest"></div>

  </ul>
</div>

On the index page, and have the lists in menus/menutest.html

At the moment, although this'll display the lists when index is loaded, they're just static on the page and it doesn't allow them to be filtered. Can this be done?

Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64
user5513718
  • 51
  • 5
  • which plugin you use? – Dekel Sep 09 '17 at 00:19
  • You need to call the filter function in the callback function of `.load()`. – Barmar Sep 09 '17 at 00:20
  • Barmar, assuming I don't know what I'm doing 90% of the time - what would that look like? – user5513718 Sep 09 '17 at 00:33
  • Dekel, I don't think I'm using any plugin, just straight jquery and jquery mobile – user5513718 Sep 09 '17 at 00:33
  • *«assuming I don't know what I'm doing 90% of the time»* -- This is then you main problem. You should at least try to know what you're doing. **1)** Read aout how to append elements using [`.append()`](http://api.jquery.com/append/) or [`.replaceWith()`](http://api.jquery.com/replacewith/) in order to add a ` – Louys Patrice Bessette Sep 09 '17 at 00:49
  • <>. Thanks Louys Patrice Bessette. I'm still learning, which is why I'm asking questions. I've spent a lot of time trying different variations of code to get this to work, and only come here for help when I'm out of ideas. Usually, when I find a working peice of code, I can then go through it piece by piece and identify why it works and what it all means. – user5513718 Sep 09 '17 at 04:54
  • @Barmar I thin I need to do something like: $("div[id^=menu]").each(function() { var match = this.id.match(/\w+$/)[0]; $(this).load('menus/' + match + '.html', function() { listview('refresh'); })}}; but I'm clearly getting something wrong – user5513718 Sep 09 '17 at 05:51
  • Where is your code that does the filtering? jQuery doesn't know anything about `data-filter` by itself, so you're either using a plugin that processes it or you have your own functions to do the filtering. – Barmar Sep 09 '17 at 06:14
  • @Barmar hmm I can't find any customised code that'd be relevant. It looks like data-filter is part of jquery mobile - would that be right? – user5513718 Sep 09 '17 at 08:26
  • You're right, it is part of jquery-mobile: http://demos.jquerymobile.com/1.4.0/filterable/ – Barmar Sep 09 '17 at 23:55
  • This question looks related: https://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content – Barmar Sep 09 '17 at 23:56

0 Answers0