Blazor - updating input text control by java script - app doesn't see that

Question

At the blazor (server) app, I have input text. Something like that:

<input id="SearchPoint" Class="form-control" 
@bind="@searchPoint" @bind:event="onchange" />

To get the current location I'm using js and updating that control directly:

document.getElementById("SearchPoint").value = pos.coords.latitude + 
', ' + pos.coords.longitude

Problem is that although on-screen there is a new value still app doesn't see that new updated value and use the previous one like an update by js didn't happen.

if I will make any manual action like adding space at the end after updating that control by js everything is correct — Krzysztof Krysztofczyk, Nov 03 '21 at 18:17
There is simply not enough information to answer this question. Where does `pos.coords.latitude` and `pos.coords.longitude` come from. I'm guessing from some click on a map. I'm also guessing you're trying to use the input to transfer the information into Blazor. ?? If all my guesswork is right, then you probably need some JsInterop to pass the data from the click event directly into Blazor. All Guesswork, so I'll not try and answer yet. — MrC aka Shaun Curtis, Nov 03 '21 at 20:13
that in fact doesn't matter. Let's assume that before js update input text has value "Text 1" if I will update that by js to "Text 2", And I will submit the form after that. To server will send "Text 1" not "Text 2" — Krzysztof Krysztofczyk, Nov 03 '21 at 21:36
Correct. You're JS is changing the contents of the input, but not triggering any events on the input for Blazor to see and update the Blazor model values. Mixing JS and Blazor in inputs like this is a kludge and recipe for disaster. You are creating a mismatch between the Blazor version of the DOM and the browser DOM. So back to the drawing board, hence my question! — MrC aka Shaun Curtis, Nov 03 '21 at 22:11
You are right still I don't know how another way I could take device location without JS. with JS that is easy: navigator.geolocation.getCurrentPosition — Krzysztof Krysztofczyk, Nov 04 '21 at 10:33

score 0 · Accepted Answer · answered Nov 03 '21 at 22:39

Triggering event "onchange" solved the problem (based on answer @andy-e How can I trigger an onchange event manually?)

if ("createEvent" in document) {
     var evt = document.createEvent("HTMLEvents");
     evt.initEvent("change", false, true);
     document.getElementById("SearchPoint").dispatchEvent(evt);
 }
 else
     document.getElementById("SearchPoint").fireEvent("onchange");

Blazor - updating input text control by java script - app doesn't see that

1 Answers1