Updating App Connect data after DOM update

Wappler General Need Help
1

Hi,
I was wondering if it would be possible to bring back the dmx.requestUpdate() function?
We are currently trying to update all the functionalities of our application and we keep running into problems where we used te use this function.
Because of this we aren't able to update our application to the newest wappler version and the longer we wait the further we fall behind.

We have (barely) been able to solve one of our problems in another post.

Right now I have a simular problem where I have a table of records with a checkbox infront of every row. And I have a second table where I need to show all records that are selected (checked).
I do this by refering to the first table and using a where formatter to filter all items where the checkbox is checked like so:

<div dmx-repeat:checked_items="first_repeat.where(`select_checkbox.checked`, true, '==')"></div>

This works great. Every time a checkbox is checked a new row appears and when it's unchecked it disappears.
But I also have a button where I want to check/uncheck all rows at the same time (check all even if some are unchecked and uncheck all when all are checked). I wrote a Javascript function where I change the checked state of the checkboxes like below:

function checkAll() {
    //select all checkboxes with the same classname
    let checkboxes = document.querySelectorAll('.select_checkbox');
    //count all checkboxes that aren't checked
    let count = [...checkboxes].filter(c => !c.checked).length;
    //check/uncheck all checkboxes if count is greater than 0
    checkboxes.forEach((c) => c.checked = count > 0);
    //dmx.requestUpdate() -- deprecated!
}

When I click the button the checkboxes are checked/unchecked, but the second table does not update to show all the rows that are checked. Only if I click an individual checkbox it updated to the correct checked rows.
If I enable the dmx.requestUpdate() in the older versions it works as expected.

There are a few more funtions where we rely on this function and they all work a little different but the result is the same. Without dmx.requestUpdate() the state of the application is'nt updating correctly.

Is there a chance to bring this funtion back or are there better options available that I am not aware of?

Thanks for your time.

3

With the new signals updates are triggered automatically when data changes. In your checkAll() function you update the DOM but not the components data, you have to let the component know that the DOM was updated. You can simple dispatch a change event on the checkbox, the component has a listener on it that will then update the data.

1 Like
4

Thanks for your reply!
Just for my clarification, I updated my function as so:

function checkAll() {
    //select all checkboxes with the same classname
    let checkboxes = document.querySelectorAll('.select_checkbox');
    //count all checkboxes that aren't checked
    let count = [...checkboxes].filter(c => !c.checked).length;
    //check/uncheck all checkboxes if count is greater than 0
    checkboxes.forEach((c) => c.checked = count > 0);
    //dispatch change event to update components (just once after all checkboxes are updated)
    checkboxes[0].dispatchEvent(new Event('change'));
}

It works like a charm!

I was just wondering, lets say I changed the value of another input (type text or number) in the DOM and I would only dispatch a change event for the checkbox, does the component also update the other input or only the checkboxes?

1 Like
5

It will indeed work on all inputs. All the input components listed to the change event to detect any changes to update their data.

1 Like