I am using Redux to manage the state.
Here we have two conditions:
We have two input fields here:
lets suppose: InputField1 and InputField2.
FIRST CONDITION:
Now, whenever i change InputField1 value to, eg: inputvalue1 then when i click outside the input field, it calls the api to change the store value.
And, it does successfully. And when the store is updated successfully, the InputField1 tag and the InputField2 tag are mapped to updated store accordingly.
SECOND CONDITION:
Let's suppose, when i change the InputField1 value to inputvalue1updating and lets say it is in the process of udpating the store. Now, if i start changing something the InputField2 value, eg:inputvalue2. And i am still changing the value. Now, if the InputField1 value is udpated and updated the store. Then what happens is it again maps the updated value i.e. InputField1 to inputvalue1 and InputField2 to `` (empty) as it was empty in previously.
What I want?
What I want is whenever i am in any input field and if i am typing or changing. I don't want the updated value to be mapped in the fields.
what I tried.
I tried to use the onFocus attribute. I tried if the input is in onFocus, it should not change the value but it does not work as it wont let to type anything as well.
Related
Using twitter's typeahead library https://twitter.github.io, if you attempt to update an inputs value with javascript (or jQuery), the value is reset to its original value when the input is selected, and then you click away.
See this gif below
https://gfycat.com/tautsphericalirishdraughthorse
As you can see the typeahead form (with id team2) first contains the string randomstring
When updated with $("#team2").val("test") the change can be seen in the input, but when you select the input and then click away it resets.
Values only seem to persist if you select the box and type in the value.
I need a way where I can alter the value through a js command.
I am trying to use the final-form calculator to clear a field whenever another field has changed.
In my example, I have two fields. Whenever the first field changes, the second field is cleared. This is expected.
However, A problem arises when the parent component of the form is re-rendered. Each time the parent component calls to it's render function, the second field is cleared even though the first field has not changed. This can be observed by clicking the forceUpdate button at the top.
Is it possible to prevent the second field from clearing like this? Preferably without using shouldComponentUpdate
I have been able to resolve it by moving the decorators array outside of the component.
const decorators = [calculator]; // declared outside of App
And reference the value in the form props
<Form
decorators={decorators}
...
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.
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.....
is there a possibility to check if form values has changed in ExtJs?
Thanks
myForm.getForm().items.each(function(field){field.on('change',function(f,n,o){alert('detected! '+f.label+' value changed from '+o+' to '+n);});});
In the above snippet, what you are basically doing is -
Iterate over all fields in the form (myForm.getForm().items.each())
For each field, add a change listener. (field.on(...))
When a field's value is changed, the listener will be invoked with the field info and old and new value.
In the listener, change the alert with the appropriate logic.