Database search filter reset causing cancelled trigger events

[Marc]

Windows 10, Wappler 4.0.5, Nodejs

I have a Bootstrap 5 generated table listing menu items from a database, with filters above it
The category filter drop down is a list of categories linked in as a foreign table
The description filter is just a search that ends up as a WHERE clause with a “contains”

The reset button basically initialises both filters to their start states, and should re-populate the table with all results.
The reset button does NOT have a dynamic event reloading the server connect that populates the table as this seems to cause more cancelled events than I get now.

Even without the reset not having a dynamic event I still seem to be experiencing cancelled events
Note: the resetting of ONLY the dropdown does not trigger the repopulation of the table, this is easily fixed by adding a dynamic event to the reset button

Note: the resetting of ONLY the description does trigger the repopulation of the table

The problem is when the reset is resetting the dropdown, and the description as this seems to cause a cancelled event, is this something to be concerned about?

It seems to me that I am getting multiple triggers in quick succession on the same server connect reloading the table and the 2nd trigger cancelling the 1st trigger

How do I stop cancelled events?

BA946654-6AA7-436C-8733-57EB2B02F97F

[Teodor]

Sorry, what is the exact issue here? The reset does not refresh the data when clicked and dropdown is selected?

[Marc]

@Marc

The problem is when the reset is resetting the dropdown, and the description as this seems to cause a cancelled event, is this something to be concerned about?

This is my issue

[Teodor]

That is no an issue at all.
I thought (or this is what i see in the video) that the problem is when you select anything in the dropdown and then reset the form - the data is not updated/refreshed.

[Marc]

@Teodor

I thought (or this is what i see in the video) that the problem is when you select anything in the dropdown and then reset the form - the data is not updated/refreshed.

1. Yes this is also an issue, but I think that a dynamic event on the reset button will fix that since the change in data selection in the dropdown does NOT seem to trigger a refresh.
   OR are you thinking that it should reload the table when there is no dynamic event on the reset button?

2. What does it mean then when a request is cancelled, why is it in red in Chrome debugger, seems like a warning?

[Teodor]

@Marc

Yes this is also an issue, but I think that a dynamic event on the reset button will fix that since the change in data selection in the dropdown does NOT seem to trigger a refresh.
OR are you thinking that it should reload the table when there is no dynamic event on the reset button?

Whenever a value changes in an input it should refresh the server action it's used in automatically.

@Marc

What does it mean then when a request is cancelled, why is it in red in Chrome debugger, seems like a warning?

This happens, because two inputs change their values immediately one after another and both try to refresh the server action. Not an issue as i explained.

So what are your select menu items? Can you please paste its code here?
How do you pass it to the server action?
What filter its value is used with?

[Marc]

Thank you @Teodor for your assistance

Select menu items come from a lookup table
The static value “-” in options table is to ensure no value is returned to api to ensure db query returns all records for that selection.

<select id="fltrCategory" class="form-select adm-mi-filter-category me-2" dmx-bind:options="scnMenuCat_Get.data.qryGetMenuCategories" optiontext="category" optionvalue="menu_cat_id" name="fltrCategory">
<option value="">-</option></select>
<input id="fltrDescription" name="fltrDescription" type="text" class="form-control adm-mi-filter-description me-2" placeholder="Search Menu Description">
<button class="btn adm-mi-filter-reset btn-primary" id="btnResetAddMenuItem" dmx-on:click="fltrCategory.setValue('');fltrDescription.setValue('')">Reset</button>

It’s passed to the server action via $_GET variable

[Teodor]

Why are you using a button like, it’s not a real reset button:

<button class="btn adm-mi-filter-reset btn-primary" id="btnResetAddMenuItem" dmx-on:click="fltrCategory.setValue('');fltrDescription.setValue('')">Reset</button>

?

Why not just use a form wrapping your inputs and use a regular reset buttton?

<button class="btn adm-mi-filter-reset btn-primary" id="btnResetAddMenuItem" type="reset">Reset</button>

[Marc]

I had never considered using a form in that way, that is a much better solution, and works perfectly.
Am learning something new everyday, thank you Teodor for your assistance, it’s appreciated.