Hidden input value updated from JS, not updating in dynamic binding in AC2

Wappler General Need Help
1

Hi.

I have a set of hidden inputs, which are updated using a custom JS implementation.
On click of a button, I call a server connect load function, and bind all the hidden inputs as various GET parameters.

This setup was working fine with AC1, but with AC2, these hidden fields bindings return empty.
Have tried dispatch the update event from JS, but it does not have any effect.

Code extract:

<div class="col d-flex justify-content-between">
    <input type="text" id="txtDefaultContactPhone" class="form-control form-control-lg sf-intl-input" placeholder="Phone" maxlength="13" minlength="6" onchange="GetFullPhoneNumber('txtDefaultContactPhone', 'txtDefaultContactCountry', 'txtDefaultContactContryCode', 'txtDefaultContactFullPhone')">
    <input type="hidden" id="txtDefaultContactCountry">
    <input type="hidden" id="txtDefaultContactContryCode">
    <input type="hidden" id="txtDefaultContactFullPhone">
    <div class="d-flex ms-1 flex-row">
        <button class="btn sf-btn-link p-0" dmx-on:click.debounce:300="scContactUpdate.load({PatientID: dsContactDetails.data[0].patient_id, phone: txtDefaultContactPhone.value, isd: txtDefaultContactContryCode.value, country_code: txtDefaultContactCountry.value});"><img src="/assets/icons/tick-02-primary.svg"></button>
    </div>
</div>

The JS function GetFullPhoneNumber updates hidden fields like txtDefaultContactContryCode etc.
Then on button click, when trying to send that value in SC, the binding returns null.

Please help.

2

Have you checked if this occurs by checking the DOM a.k.a. Inspect element? (just in case something broke with AC2)

3

From the foroum topics, I have noticed that a few components/elements in AC2 have difficulty on default values or initialization...

Can you test it by giving a static value on your hidden inputs and check the result?
I can't test it (still on AC1...)
(If that rings a bell, maybe working on this way you can fix it... :thinking:)

4

Yes, I can see the updated value in Elements tab, and also if I try to get the data using JS.
Only Wappler bindings are unable to read this - dmx.app.data and dmx.parse don't work either.

5

I do have a dynamic binding on the actual code. (Removed from sample code above)
And that dynamic binding is from DataDetail, which works fine.

But irrespective of having a value set or not set on the element, updating from JS does not reflect the change in Wappler bindings.

7

When you update an input from JavaScript the component doesn't know about it, setting the value programmatically doesn't trigger any event.

// get the dom element
const input = document.getElementById('txtDefaultContactCountry');
// update the value
input.value = 'Netherlands';
// trigger a change event to let the App Connect know it was updated
input.dispatchEvent(new Event('change'));
3 Likes
8

I tried jQuery trigger function, and that did not work.
$("#txtDefaultContactContryCode").trigger('change')

Will try again with vanilla JS.

The dev working on this also added this and it worked. I don't know what it does, so will probably not keep it.
document.getElementById('txtDefaultContactCountry').dmxComponent._changeHandler();

What does this do, and is this okay to use?

9

This dispatch event is working.

I tried document.getElementById('txtDefaultContactCountry').dmxComponent.dispatchEvent('updated'); earlier as well, but that didn't work.

10

jQuery doesn't trigger a native DOM event but has its own events which only work with jQuery.

That calls the internal method that also is being called after a change event is triggered. So it does the same but the method could change in the future since it is not a public api.

This triggers the updated event on the component but doesn't update any internal state.

2 Likes