Re-render input field without keeping current value / Shadow DOM - javascript

I am working on a network graph editor with an inspector view on the right side.
The inspector is a separate web component built with Lit.
When I click on a node I would like to be able to view and change properties of the node, like the node title, in the inspector view. That works well as long as I don't change any value in the input field. Once I changed the value the input field keeps it's manual value even if set a new value during re-rendering.
To provide an example. This is how the web inspector of Safari shows the HTML element:
If I now change the node value it looks like this:
Now, I change to the second node I get this:
As you can see, the value attribute changed, even the id is different. However, Safari (and Chrome), keep the existing value, hence showing me the wrong title for the second node.
The input field shows the node's value each time, as long as I don't change the value manually. After that the input field maintains the manually set value.
The corresponding line in render() is
<input id="text_${this.currentElement.id}" value="${this.currentElement.text}"/>
I specifically change the id but that has no impact on the result.
What do I need to do in order to 'loose' the manual value during re-rendering? Many thanks in advance!

You should use .value to bind to value property.
<input id="text_${this.currentElement.id}" .value="${this.currentElement.text}"/>
You could read more on property-expressions.

Related

Where does Blazor store form data?

Interestingly, some input elements of Blazor Forms don't have the data stored in HTML as value (attribute) of the input-field. The fields doesn't even have a value attribute!
When I inspect and use 'Store as global object' functionality in chrome and check the value of the element in console (temp1.value), I can see the value.
I'm wondering where this value is being stored in the browser.
The value attribute is not set by changing the DOM's .value property.
Consider the following minimal example:
<input id=time>
<script>setInterval("time.value = new Date()", 1000);</script>
<input type=button onclick=alert(time.value) value=read>
You can inspect the clock and see that there's never a value attribute, yet the input's value property can be both setted and getted by script.
Thus, the value of the form input in your question can come from almost anywhere. It's likely embedded deep inside the other library support code that makes it easy to shuttle data back and forth, but that's speculation on my part. It's a JS variable of some sort, that much we know. The main thing is that attributes are not needed when making heavy use of JS.

Select value not changed on state update ReactJS

I have no idea how to fix this thing
have been spent more than an hours to solve this problem
but none of the solution fix this
So i have a combo box (Select tag element) which i would like to change the value when a modal box is opened.
I have already implement defaultValue to set the value of the combobox but it won't change. However on other input such as the notes / amount it can get the defaultValue and set it to the element.
I have try to debug the this.currState.deposit_type_id and i get the right value
But in fact it won't change
it always refer to the default value
I have made several type of this thing but none of them has ever had this bug
Here's the screenshot for the code and the image
This is the code to pass the data from parent's component, and deposit type for all the value i will put on the combo box
This is the code that i used for set the default value when the modal box is opened
This is the result, it supposed to choose "Kas Besar", yet it choose "Deposit Type" instead
Not sure as I am not able to try it now but you could try to add your value argument for input's html like this:
value={ this.state.currData && this.state.currData.deposit_type_id }
But it would be better to get currData from props. So this.props.currData.

Sitecore - Field not detected as modified. How to force the save prompt to show?

We are using the Taxonomy module for Sitecore: https://marketplace.sitecore.net/Modules/T/Taxonomy.aspx?sc_lang=en
The module works fine 90% of the time. The only catch is that when in a taxonomy field you select a value from the auto-complete options, the field doesn't seem to be marked as changed. This creates the occasional confusion with editors as when they publish the "Do you want to save?" prompt doesn't show and the content is published without tags.
If instead of selecting from the auto-complete we use the dialog box, everything works fine.
I looked at the markup, JavaScript and C# code and couldn't find a solution.
I even tried to set Sitecore.Context.ClientPage.Modified = true but it doesn't seem to do anything.
How can I force the save prompt to show?
I had a similar issue, I was updating a field using js and the experience editor wasnt detecting the change.
I got this working by doing the following using js:-
There is a save button state object saved in a view state field. You can grab by doing window.parent.document.getElementById("__SAVEBUTTONSTATE"). I then did the following:-
var saveButtonState = window.parent.document.getElementById("__SAVEBUTTONSTATE");
saveButtonState.value = 1;
saveButtonState.onchange();
This will make the save button enabled
In the experience editor, Sitecore wraps your sitecore item fields in an span element, which contain a unique id. (These are the fields you interact with in the experience editor). However, its not these values which Sitecore receives when you hit Save button. Sitecore actually stores values of your item fields in hidden inputs, so when you interact with the span element, in the background, these hidden inputs are being updated. So in order for Sitecore to receive your changes, you must update the corresponding hidden input. If you open Inspect element in the experience editor and search "scFieldValues", you will see these hidden inputs. I updated the field by using jquery:-
$('#scFieldValues').children('input').each(function () {
if (id.indexOf($(this).attr('id')) >= 0) {
$(this).val(value);
}
});
The id object is the id of the span element. The contents of that id is used in the id of the hidden input. This is why I use "id.IndexOf" to find correct input element. So when I update the span element value, I grab that value and update the corresponding input.
Hope this helps

xpage getComponent always returns null even when variable is declared and initialized

I've seen a few articles here trying to bind computed fields but my preferred solution; getComponent is just not working for me. I'd rather not have hidden "real" fields. Here's what I have. A computed VAT Tax percentage field called VP
<xp:text escape="true" id="VP" value="#{FInvoiceDoc.VP}" style="text-align:right">
<xp:this.converter>
<xp:convertNumber pattern="0.00"></xp:convertNumber>
</xp:this.converter>
</xp:text>
Here is one of the calculations where I set the value of this field;
XSP.getElementById("#{id:VP}").innerHTML = tmp.toFixed(2);
tmp calculates correctly, VP displays the correct expected value on the page.
Then in my querySaveDocument event, I do the following
var VP = getComponent("VP").getValue();
FInvoiceDoc.replaceItemValue("VP",VP);
and what gets stored is a Null value. I've even confirmed that the VP variable is null by doing a "Print (VP)" command after setting the VP variable then checking the log. There's got to be something I'm missing.
At page submit you don't get a computed text field's value back to server as it is read only.
You are looking for a solution where you can:
show a document's field in read mode
set new values to this field on client side with CSJS
save the value back to document's field on submit
The first two points working already with your solution.
The third point you can achieve with adding an input text field "VPdoc" which is bound to your document's field "VP" and hidden with style="display:none".
<xp:inputText
id="VPdoc"
value="#{FInvoiceDoc.VP}"
style="display:none">
<xp:this.converter>
<xp:convertNumber pattern="0.00"></xp:convertNumber>
</xp:this.converter>
</xp:inputText>
At submit copy the current value (innerHTML) from computed text field "VP" to input text field "VPdoc" using the following CSJS code in submit button:
<xp:this.script><![CDATA[
XSP.getElementById("#{id:VPdoc}").value =
XSP.getElementById("#{id:VP}").innerHTML
]]></xp:this.script>
This way the value which was set on client side to field "VP" is saved to document.
You do NOT assign a value, but replace the html- representation by some html code. With that you simply break the element and kind of "convert" it to a stupid div (sorry, don't know how to explain better)...
Never mess around with the frontend: the element is bound to an item in your document. Modify that value, and the element representing it will represent the change.
And: you do not need that lines of code in querysavedocument to save back the value... This will be done automatically, that's what binding (value property of element) is for...
Perhaps, instead of manipulating the innerHTML, you used
getComponent("VP").setValue(tmp.toFixed(2));
Would that work? You'd be setting the value of the component then, I think.....

Can javascript "show" a field's input value?

I have a field that shows a value 4 in the UI. The site is built using a complex build process that I do not totally understand (I work as part of a team).
When I inspect the HTML for the field, I don't see the value 4.
I am confused about how this might happen. Is it possible that javascript is "showing" the value of the input field?
DOM elements have attributes and properties. The two are not always identical. The web inspector, in general, shows attributes as part of the DOM structure, like.
<input type="text" value="4" />
However, if there is no value attribute, this does not mean that the element has no value. For example, consider the following HTML:
<input type="text" id="test" />
When you load the page, the attribute document.getElementById("test").getAttribute("value") is null, and the property document.getElementById("test").value is "" (empty string). When you enter 4 into the input field, the attribute "value" is still null, but the property value has changed to "4".
Long story short, the web inspector is not obligated to show the value of an input since it is does not always appear in the DOM as an attribute.
yes, you can change the value in javascript. and that is what is happening in your case
document.getElementById("materials_price_1").value = "4";
I am not sure what the issue is.
If the input contains a 4 that does not mean the attribute value will be equal to 4.
It just means that the value of the input is 4.
Just check value of this field with JavaScript:
document.getElementById('materials_price_1').value;
Or with jQuery:
$('#materials_price_1').val();
Yes, if you using chrome you can in inspect element stand with the mouse on the elemnet in 'Elements' tab and right click.
Now choose 'Inspect DOM Properties' this will open you bottom of the tab the console tab. there you can find the DOM object of your field. open the object and find property value. this is the active value right now
Sure. it happens in the DOM. you can simply make it blank by writing this code in your body tag :
<script>
document.getElementById('materials_price_1').value='';
</script>
just make sure you put the code after your other Javascript codes.

Categories