Using jQuery Mobile: Implementing listview data-filter for multiple data sets

I'm working on a JQM page with two data-role="listview" elements. Both of them are using the same data set, but one listview displays only text while the other includes icons as well.

My goal is to implement the data-filter="true" option for both listviews, but have only one filter that updates both of them simultaneously.

I've been struggling to figure out how to achieve this, so any tips or suggestions would be greatly appreciated.

Here's a snippet of my current code:

 <ul data-role="listview" data-filter="true" data-divider-theme="c">
    <li data-role="list-divider">B</li>
    <li><a href="#profile" data-transition="slide"><img src="loc/icons/brandSprite.png" class="ui-li-icon">One</a></li>
    <li><a href="#profile" data-transition="slide"><img src="loc/icons/brandSprite.png" class="ui-li-icon">Two</a></li>
    <li><a href="#profile" data-transition="slide"><img src="loc/icons/brandSprite.png" class="ui-li-icon">Three</a></li>
    ...

 <ul data-role="listview" class="iconList">
    <li data-icon="false"><a href="#profile" data-transition="slide"><img src="img/brands/icon_one.png" /><h3>One</h3></a></li>
    <li data-icon="false"><a href="#profile" data-transition="slide"><img src="img/brands/icon_two.png" /><h3>Two</h3></a></li>
    <li data-icon="false"><a href="#profile" data-transition="slide"><img src="img/brands/icon_three.png" /><h3>Three</h3></a></li>
    ...

The first listview has the filter functionality, which should apply to both lists at the same time.

Thank you for any assistance provided!

Answer №1

Two distinct lists are displayed here. The data-filter="true" attribute is meant for filtering in a single list when applied. One workaround could be to set data-filter=true in both lists, hide the filter on the second list after refresh (using display:none), and then create an event handler that mirrors text input between the two filters.
While this solution may work, it is not the most optimal approach. It is advisable to develop your own filtering mechanism instead of relying on data-filter="true". Alternatively, you could apply data-filter to the first list only and then manually hide corresponding elements in the second list.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is JSP being double-dipped via an Ajax request?

I'm encountering an issue with a JSP1 that is using Ajax to pass a variable to another JSP2. It seems like JSP2 is being loaded twice, and I can't figure out why. When I check my app console log, I see the following: my_id = 77An2J my_id = null ...

Tips for ensuring text remains within a div container and wraps to the next line when reaching the edge

Currently, I am working on a flash card application using Angular. Users can input text in a text box, and the text will be displayed on a flash card below it. However, I have encountered an issue where if the user types a lot of text, it overflows and mov ...

Arrange the items in a list in JavaScript in descending sequence

How to sort a list of records in JavaScript in descending order? var number; //dynamic number retrieved from API var test; //dynamic text retrieved from API for (var i; i <= accList.length; i++) { var odlist = 'you have :' + test + number ...

A guide to utilizing asynchandler within a class in Node.js

I'm currently in the process of converting my routers into a class structure, but I'm facing a challenge when trying to wrap the asyncHandler function inside the class. Can anyone provide guidance on how to achieve this? userController.js const ...

Could you please explain the distinctions among onLoad, onDomready, No wrap - in <head>, and No wrap - in <body>?

When it comes to editing my code, I rely on JSFiddle. However, I have noticed that in certain instances when running JavaScript or jQuery, the code only works if I choose "No wrap - <head>" or "No wrap - <body>". CLICK HERE FOR THE JSFIDDLE EX ...

Issue with burger menu functionality, button unresponsive

Two files are involved in this issue, one is a Vue file and the other is a JavaScript file. The JavaScript file contains an array and the problem is being described in the console. Additionally, there may be an issue with items as sometimes the same error ...

What is the optimal method for transmitting data for a substantially large music playlist via HTTP?

I am currently in the process of developing an online music player. My main challenge lies in retrieving a comprehensive list of songs from the database and transmitting it to the user. The user should have the ability to create playlists on-the-go, hence ...

what are some advanced techniques for manipulating the DOM with a datatable?

I am currently involved in a project where we are presenting the data summary for each year to the user. The summary includes the total data for each year (counted rows). View Data Summary: Click here When the user clicks on the "+" icon, they will be ab ...

What are the latest advancements in using Java for AJAX technology?

Interested in creating a Rich Internet Application (RIA) with AJAX using Java for the backend. Although DWR may offer an RPC style approach, it hasn't been updated since 2008. Considering alternatives like DOJO and GWT as well. Seeking recommendati ...

Having a concise way to submit forms with Javascript and JQuery

Seeking a more concise way to submit form data to Electron in JSON format as a beginner in JavaScript and jQuery. How can this code be rewritten for brevity? <section> <input id="server" type="text" placeholder="Server"> <i ...

Using jQuery to populate an array with selected table items

Issue Description: I am working on an HTML page with two add buttons and two tables. Currently, when the add button is clicked, rows are appended to their respective tables. However, in the backend, I need to gather all row elements when a specific "button ...

Server-side access to form data has been restricted

When I make a PUT request from the frontend, I am currently using the XMLHttpRequest and FormData API. However, on the server side, I am not receiving any data such as req.params, req.body, and req.query are all empty. Front-end Implementation var report ...

I currently have a set of 6 popovers that all open simultaneously, but I am looking to make them open sequentially, one after

My component generates a div with 6 different experiences, each with its own popover. However, when I click on an experience to open its popover, all 6 popovers appear. How can I assign a unique ID to each popover? This is the code for my experience compo ...

Incorporating a YouTube or Vimeo video while maintaining the proper aspect ratio

On my video page, I embed Vimeo videos dynamically with only the video ID. This causes issues with the aspect ratio as black bars appear on the sides due to the lack of width and height settings. The dynamic video ID is implemented like this: <iframe ...

Functionalities of HTML controls

I currently have a select element in my HTML code which looks like this: <select> <option id="US" value="US"> </option> <option id="Canada" value="Canada"> </option> </select> My requirements are twofold: ...

View a pink map on Openlayers 2 using an iPhone

I am currently working on a project where I am trying to track my location using my smartphone and display it on a map. To achieve this, I am utilizing openlayers 2. However, I am encountering an issue. When I implement the code below in a Chrome Browser ...

JavaScript: Translating Date into Moment

Is there a way to convert a Date object to Moment in JavaScript? let testDate = new Date(2020, 05, 03, 1, 2); I attempted the following code without success toMoment(testDate) What is the correct syntax to achieve this conversion? ...

Obtain the inner text input value using jQuery

In my form, there is a feature that adds a new row of text inputs dynamically when a user wants to add more rows. Each new row is automatically populated with input fields that have the same id and class as the previous ones. My question is: how can I re ...

The AjaxFileUpload1_UploadComplete event is failing to trigger when a query string is included in the page URL

I am working with the AjaxFileUpload1 component from the Ajax Control Toolkit. In my setup, I pass a query string to the page where the AjaxFileUpload1 control is used. For example, on a page like WebForm1.aspx?Key=22. The issue arises when I try to pas ...

Encountering a 404 XHR Error when attempting to add a component in Angular 4.1.0 within Plunker

Having some trouble setting up Angular 4 on Plunker and adding a new component. The following URL is where I'm working: https://plnkr.co/edit/1umcXTeug2o6eiZ89rLl?p=preview I've just created a new component named mycomponent.ts with the necessar ...