Hi. I have a field that I want to update by an external javascript (not part of corvid code)
I find the INPUT element that I want to update, set its value, however as soon as I click on it, the value changes back to empty.
If I update the field by typing, the value stays put.
How do I make sure that the value I set via Javascript stays put as if the user entered it? I want to make that field hidden and not show it to the user at all.
Input objects have both a placeholder and value property so try setting them both.
One way that would surely work is to set the value in Corvid code. It sounds like you’re doing DOM manipulation but this is failing to hook into the React internals. I don’t mean to rearchitect everything inside Corvid, but where you’re setting the input value, instead communicate with Corvid (whether that’s by postMessage or something else) and set the value from there.
I can postMessage and Corvid will read and react to it? Where can I read more about this?
I updated my JS to also update the placeholder value. it is still NOT being submitted with the form.
Absolutely. Earlier it was just a hunch I’ve had for a few a weeks, but I finally got around to confirming yes it’s possible.
The only documentation I know of is here. The MDN page for postMessage might give a little more context but it’s not necessary.
https://www.wix.com/corvid/reference/$w.HtmlComponent.html#onMessage
It doesn’t tell you exactly how to do it I suspect because they probably don’t want you doing it.
What you wanna do is find the HtmlCompontent (iframe) in the DOM, postMessage to that, handle that event in the iframe and postMessage back up to the Corvid page. You can use the code example on the above page and just change how the first message is handled.
Yes it’s a bit jank but this is Corvid, so hey.
@lee1 It’s not meant to be a secret or anything. In fact, it’s the recommended way and even highlighted in a few official examples.
The docs highlight the basic principle because you can do just about whatever you want with it. Just use the $w object selector to relay messages and the rest is up to you.
You can use window.parent.postMessage(“”, “*”) from the iframe.
@skmedia I get the impression you think I’m talking about sending messages between the iFrame and Corvid. I’m talking about sending* messages to the root Wix page via the iframe and essentially gaining full DOM/CSS control** from within Corvid (although that involves additional simple code because you can’t clone window through postMessage). If this is shown in official examples then please show me, because I know Yisrael has said DOM access is flat out not possible.
*I actually only tested in the opposite direction, but it seems reasonable that two-way communication would be possible
**subject to the type of bugs OP has run into and Yisrael was worried about
I added an HTML Iframe that has only job of taking a message and reposting it back to the main page. Then in my external JS I found the IFrame in question and posted my message. The message was reposted to main page and I was able to set the value I needed and submit it into the database. Problem solved.
@lee1 Gotcha. Yeah, trying to wrap my head around potential security holes that way but I don’t think it’s anything any normal iframe setup wouldn’t also have. Might be a good idea to define your iiframe’s sandboxing settings jic.