How to Use Code to Let Your Users Search a Collection

Ask the community
,
1

Hello,
I am using the provided code example to use a dropdown box to get user input to search a collection and show the results in a table. The dropdown box is working, but the table never gets refreshed to show the results. Can anybody help? I feel like I am just missing something. Here is the code:

export function dropdown1_change(event, $w) {
wixData.query(‘FDResource dataset’)

// Query the collection for any items whose “arena1” field contains
// the value the user selected in the dropdown
.contains(‘arena1’, $w(‘#dropdown1’).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(‘#table1’).rows = res.items;
});

2

Hi,
Have you tried the refresh function after setting the filtered data to the table?

Tal.

3

Thank you. I just tried that with no change. Hmmmm

4

Hello,

There is no need to refresh the table.
Make sure to add the fields in the Manage Table menu.

The field names must match the field names from your collection in order to display the information.

5

Thank you. I have checked the names to make sure there are no errors and that they match. But still no luck. So I decided to begin again with a very simple database and a very simple dropdown box. My simpledb only has 3 fields (Lastname, Firstname, Teamnumber). Below is my code. The dropdown box seems to work, and the table is displayed without any data being shown. There are 4 records in the database. Two records with Teamnumber of 1 and two records with Teamnumber of 2. So when I select 1 from the dropdown box, 2 records SHOULD show in the table. And when I select 2 from the dropdown box, 2 records SHOULD show as well. But in both cases, NOTHING shows in the table.

Any help would be greatly appreciated!!!

export function dropdown1_change(event, $w) {
wixData.query(‘Simpledb’)

// Query the collection for any items whose “Teamnumber” field contains
// the value the user selected in the dropdown
.contains(“Teamnumber”, $w(‘#dropdown1’).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(“#table1”).rows = res.items;
$w(“#table1”).refresh();
});
}

$w.onReady(function () {
$w(“#table1”).columns = [{
“id”: “col1”,
“dataPath”: “Lastname”,
“label”: “Last Name”,
“width”: 100,
“visible”: true,
“type”: “string”,
}, {
“id”: “col2”,
“dataPath”: “Firstname”,
“label”: “First Name”,
“width”: 100,
“visible”: true,
“type”: “string”,
}, {
“id”: “col3”,
“dataPath”: “Teamnumber”,
“label”: “Team Number”,
“width”: 100,
“visible”: true,
“type”: “string”,
}, {

}];
});

$w(“#table1”).refresh();

6

Still no luck. Does it have to be a dynamic page to do what I am trying to do?

7

So I tried setting up a dynamic page to do this. The dynamic page shows the table. But, again, it does not show a subset of the data based on the user selection through a dropdown box. I am beginning to think this wix code does not actually work like the tutorials say it should. Below is my code. I have made sure that all the names and IDs are valid. You can see the screen shot below of the simple table showing the only 4 records in the database. That is great. But when the user makes a selection from the dropdown box, the table never changes to show the results.

HELP ME PLEASE. I am very frustrated and confused. Thank you in advance!!!

import wixData from ‘wix-data’;

export function dropdown1_change(event, $w) {
wixData.query(‘#dataset1’)

// Query the collection for any items whose “Name” field contains
// the value the user selected in the dropdown
.contains(“Teamnumber”, $w(‘#dropdown1’).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(“#table1”).rows = res.items;

});
}

1284×721 189 KB

8

Hi,

can it be, that there are type mismatches? Like the number in the database is an integer, but the dropdown value is a string?

In cases you are not getting the data you expect, there are few things you can o to debug the issue:

  1. Add a console.log to your promise handler and log the result. If the items[] is empty - problem with the query, if results are there, but not displayed in the table - problem with table configuration.
.then(result => {
  console.log(result)
  // ...
})
  1. If the results are empty, play with wixData directly and try to figure out how the correct query would look like. Ex. in this case instead of .contains(…) try .eq(…) with both string and number and see if one of them works.

I hope this helps. Let me know how it went!