Alpine: how to update model values, When changing input field values programmatically.

[Mutahhar]

When changing an input field programmatically by JavaScript or jQuery, how to update model values.

[HugoDF]

Do you have an example?

My feeling is that you should update the variable from JS instead of writing to the input

[muzafferdede]

@SimoTod Some clarifications about the original example, unfortunately it uses jQuery which doesn't trigger real native Events but it uses custom versions which work with jQuery handlers and on* attributes but don't work with native listeners. See jquery/jquery#3347

For this reason you can't use the x-model directive. Your best shot is to use an implementation like the one suggested by Hugo or to switch to a different select library that doesn't use jquery.

@HugoDF I think it is related to this. Native events...

[HugoDF]

@SimoTod Some clarifications about the original example, unfortunately it uses jQuery which doesn't trigger real native Events but it uses custom versions which work with jQuery handlers and on* attributes but don't work with native listeners. See jquery/jquery#3347

For this reason you can't use the x-model directive. Your best shot is to use an implementation like the one suggested by Hugo or to switch to a different select library that doesn't use jquery.

@HugoDF I think it is related to this. Native events...

I don't think so, and until the creator of the issue replies we can't really help.

The way I understand the question is "I'm mutating the DOM using JS, how do I make Alpine reflect those changes" the answer being "mutate your Alpine data instead of the DOM"

[Mutahhar]

@HugoDF
To simplify this let's say I have an input field named "first_name" and an alpine model variable first_name. I am showing this input field's value as inner-text to an HTML tag using x-text.

When a user enters/changes the value in the input field using the keyboard it works fine.

But the value of this field can also be automatically updated by clicking on a button. And that functionality is written in jQuery by some other developer. When this happens it does not update the model variable's value and hence does not reflect the change in the inner-text of the tag using x-text.
Maybe it is, as mentioned in the above commend, due to "jQuery which doesn't trigger real native Events", but I am not sure.

[HugoDF]

@Mutahhar ah right

Yes that is correct, you need to hook into the jQuery upgrades programmatically and sync them to Alpine.js state.

Same issue, different library https://github.com/alpinejs/alpine/issues/402

Solution for select2 integration https://codepen.io/hugodf/pen/NWGbvxx

Without a codepen of your issue I don't know how else to help you.

[Mutahhar]

@HugoDF
Will triggering native js change event, after updating the input field's value using jQuery, do the trick?

[HugoDF]

@Mutahhar yeah it should work, if you're able to do that what's the reason not to update Alpine JS data directly? You can access it using root element .__x.$data

[Mutahhar]

@HugoDF ok, let me try that. Thanks for the help 👍.

[SimoTod]

@Mutahhar the only difference is that you need to use the input event for normal text fields to trigger the alpine reactivity.
Here's the logic if it can help: https://github.com/alpinejs/alpine/blob/master/src/directives/model.js#L6
You use change for select, checkboxes, radio buttons or input with the lazy modifier, input otherwise.
That being said, it's an internal implementation so watch out for future changes (although I can't see why there should be any).