How do I keep button click from displaying entire database in repeater

Ask the community
,
1

I have created a small search panel to locate data based on _id number. I wrote a code to accomplish this and it works great. You enter id # into search bar and click button and the desired data displays. Problem is when you click the button without entering anything into search bar, the repeater opens all database entries. I have set the dataset setting to show read-only and to show only 1 result.

Here is the code:
import wixData from ‘wix-data’ ;

$w.onReady( function () {
$w( ‘#searchButton’ ).onClick( function () {
search();
});
function search() {
wixData.query( ‘jobApplication02’ ).contains( ‘_id’ , $w( ‘#searchbar’ ).value)
.find()
.then(res => {
$w( ‘#repeater1’ ).data = res.items;
});
}
});
$w.onReady( function () {
$w( “#repeater1” ).onItemReady( ($item, itemData, items) => {
$item( “#searchButton” ).onClick( (event) => {
if ( $item( “#repeater1” ).hide) {
$item( “#repeater1” ).show();
}
else {
$item( “#repeater1” ).hide();
}
})
})
});

If anyone could assist me with this, It would be greatly appreciated - Thank You

2

You have a few issues with your code:

You have multiple onReady() functions which might result in unpredictable behavior of the code. You should put all code that needs to run, when the page is ready, in one oReady() function, in the order that you want the code to run.

You’ve defined two onClick functions for the same #searchButton. Is the button in the Repeater, or is it on the page?

You have stated that you " set the dataset setting to show read-only and to show only 1 result". Is the dataset connected to the Repeater? I don’t see the dataset being used in your code. In addition, y ou are using a database query to set the data of the Repeater, which will conflict with the dataset action.

I recommend reading Wix Repeaters with Corvid . The Repeater API is also an excellent source of material on the Repeater including details on all the options, usage cases, and code snippets.

3

Thank You

4

Thank you for your help. I cleaned up the code and arranged this a little differently. I have the search bar and button on one page:

import { local } from ‘wix-storage’ ;

import wixLocation from ‘wix-location’ ;

$w.onReady( function () {

});

export function searchButton_click(event, $w) {
[let](let word = $w(“#searchbar”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/buykashtools);
}) [ word = $w(](let word = $w(“#searchbar”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/buykashtools);
}) [“#searchbar”](let word = $w(“#searchbar”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/buykashtools);
}) [).value;](let word = $w(“#searchbar”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/buykashtools);
})
[ local.setItem(](let word = $w(“#searchbar”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/buykashtools);
}) [“searchWord”](let word = $w(“#searchbar”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/buykashtools);
}) [, word);](let word = $w(“#searchbar”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/buykashtools);
})
[ wixLocation.to(/buykashtools);](let word = $w(“#searchbar”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/buykashtools);
})
[}](let word = $w(“#searchbar”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/buykashtools);
})

And the search result on another page:

import { local } from ‘wix-storage’ ;

import wixData from ‘wix-data’ ;

$w.onReady( function () {

var sameWord = local.getItem( “searchWord” );

$w( "#searchbar" ).value = sameWord; 

$w( "#searchbar" ).placeholder = sameWord; 

$w( '#dataset9' ).onReady( **function**  () { 

    search(); 

});

});

export function searchButton_click() {

search();

}

function search() {

wixData.query( 'jobApplication02' ) 

    .contains( '_id' , $w( "#searchbar" ).value) 

    .or(wixData.query( 'jobApplication02' ).contains( '_id' , $w( "#searchbar" ).value)) 

    .find() 

    .then(res => { 

        $w( '#repeater1' ).data = res.items; 

    });

}

This seems to work well. Problem is, if you click on the button on the first page without adding a “searchword” Your are taken to the location, but the repeater opens all database entries (I only want one to show)

Is there a way to disable this button. so if there is no “searchword” that the button will not work? Thank You

5

@support89073 Set the searchButton to disabled as the default in the element’s settings panel. Use the TextInput onInput() function of the searchbar to set the searchButton to enabled if it contains a string, and disabled if it is empty.