I have 2 different pages with several user input elements (dropdowns, tables, boxes, ...) connected to 3 different datasets on both pages. Most of the user input elements work with filtering of databases (ie some dropdowns only have 1 or 2 choices left after the filtering is done).
One page has a submit button (stay on the page once successfully submitted) while the other is simply filtering databases to present information in different forms.
For both these pages, I would all input elements to be properly reseted once inquiries are done (submission (success or failure) on the first page, presentation of info in tables on the second page). How to do? Thanks a lot
TT
sgcbooking, would you have your complete code available for that page that I could look at....working with similar theme and issue
Hi,
I thought that might have been some reasons. I had already tried to remove the onReady event and did try again at once. But it does not make any difference. Unfortunately ... My problems remain the same ...
Regards,
Hey,
I noticed that you used the onReady event before filtering and refreshing the dataset.
Once a user uses the dropdown list or any other user inputs, the dataset is already ready to use. Therefore, there's no need to use this function before setting a filter or before refreshing the dataset.
Have a good day,
Tal.
Hi Tal,
On .../november-2 page, I have added following code:
QUOTE
//Refreshing datasets
export function submit_click() {
$w("#novemberdataset").onReady( () => {
$w('#novemberdataset').refresh()
.then( () => {
console.log('Done refreshing Novemberdataset');
});
});
$w("#directorydataset").onReady( () => {
$w('#directorydataset').refresh()
.then( () => {
console.log('Done refreshing Directorydataset');
});
});
}
UNQUOTE
As you will see in below print-screen (3 extract of print-screen on same file), it does refresh the dropdowns linked with the directorydataset but does NOT refresh the one linked with novemberdataset.
I have tried the same sort of code for the .../already-registered page with table-dataChange event handler (as I do not have any Submit button on this page) but it does not work.
Thanks a lot
Please see on http://www.shanghai-gc.com/november-2 and http://www.shanghai-gc.com/already-registered (where only November is properly referenced).
Thanks,
Hey,
Can you please send us the site URL?
Thanks,
Tal.
Dear Tal,
Thank you for your reply.
My page with a Submit button actually is properly connected (see attached print-screen).
Maybe the problem comes from Submit button is connected to a 'Registrations' dataset while the user dropdowns are connected to different datasets. Also, I have some code as per print-screen to properly filter data available in these inputs (see below).
After submission (see below), I am left with similar choice as before submission.
I have actually tried your solution 2 for this first page but it does not work.
As for my second page, I do not have a Submit button. Rather, I have several dropdowns to properly filter the data and present into different tables. See attached print-screen of this page with it's inputs.
Here is the code of this page which I use to filter all data:
QUOTE
import wixData from "wix-data";
//Filtering by Dates: Select Month will load all dates of events within this month. Then Event details and table of registered will appear in new tables
export function monthofevent_change() {
$w("#scheduledataset").onReady( () => {
const month = $w('#monthofevent').value;
$w('#scheduledataset').setFilter(wixData.filter().eq('month',month));
});
}
export function dateofevent_change() {
$w("#scheduledataset").onReady( () => {
const date = $w('#dateofevent').value;
$w('#scheduledataset').setFilter(wixData.filter().eq('monthlyRank', date));
$w("#registrationsdataset").onReady( () => {
$w('#registrationsdataset').setFilter(wixData.filter().eq('dateEvent', date));
if( $w("#tableofregistered").hidden ) {
$w("#tableofregistered").show();
$w("#tableofevent").show();
$w("#tableofevents").hide();
}
});
});
}
//Filtering by Member: First Name to be automatically filled-in depending on Last Name selected. Then table of events will appear in new table
export function lastnamebox_change (event) {
$w("#registrationsdataset").onReady( () => {
const lastName = event.target.value;
$w('#registrationsdataset').getItems()
.then(result => result.items.filter(row => row.title === lastName))
.then(items => items.map(item => ({label: item.firstName, value: item.firstName})
))
.then(firstNameOptions => $w('#firstnamebox').options = firstNameOptions);
});
}
export function firstnamebox_change() {
$w("#registrationsdataset").onReady( () => {
const firstName = $w('#firstnamebox').value;
$w('#registrationsdataset').setFilter(wixData.filter().eq('firstName', firstName));
if( $w("#tableofevents").hidden ) {
$w("#tableofevents").show();
$w("#tableofevent").hide();
$w("#tableofregistered").hide();
}
});
}
UNQUOTE
I hope my questions now make better sense. Thank you again and best regards,
Hey,
If I understand correctly, there are two scenarios:
1. The input element are connected to a DB collection:
In this case, you will need to change the 'Link connects to' field of the submit button to 'Submit' and all the connected input fields should be cleared automatically. I've attached a screenshot to clarify:
2. The input elements are not connected to a DB collection:
In order to reset the fields once a user submit the information, you will need to do the following:
Create an onClick event for the Submit button.
Reset the value of element element to 'null'.
Call the resetValidityIndication for each input element. You can find more information about this function in the documentation.
For example, in case I have a text input and a dropdown, I will need to add the following code:
export function submitButton_click(event) { if($w('#textInput').value && $w('#dropdownSelection').value){ $w('#textInput').value = null; $w('#dropdownSelection').value = null; $w('#textInput').resetValidityIndication(); $w('#dropdownSelection').resetValidityIndication(); } }
If this is not what you were referring, please clarify what you were trying to achieve and provide us with screenshots and the site URL so that we can have a look.
Best,
Tal.