As noted by this question and in this fiddle, when injecting an input the value attribute doesn't seem to be added to the DOM, MooTools seems to handle it internally. Unfortunately this means that an input injected thus:
new Element("input", {type: "text", value: "injected value"}).inject(parent);
can't be selected like so:
parent.getElements('input[value="injected value"]').length;
(this returns 0 instead of 1 as it would if the value attribute was present)
In my project I need to insert blank input boxes but only if there isn't already a blank one;if(parent.getElements('input[value=""]').length == 0)however this is always resolving to true no matter how many blank inputs there are.
Is there a better way to achieve my goal or is there a fix for what seems like a bug?
You could try adding:
var x = new Element("input", {type: "text", value: "injected value"}).inject(parent);
x.setAttribute("value",x.value);
Caveat: While this fixes your issue with the element's value attribute not being reflected, the value attribute is typically not a good way to check if a field is empty, because it is not sync'd with the input's contents.
It would be better to use something like this:
$$('input[type=text]').filter(function(item){return (item.value=="");})
Related
I'm having issues setting up new values to cloned input fields.
clonedElement = element.clone(true); //This is a whole DIV which has inputs in it.
I then search for the inputs and modify as needed.
var newValue = "New Value";
$(clonedElement).find("#"+id).val(newValue);
every time I try to set a value (before appending the clonedElement) I get the following error.
Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable
however, this works using the same process.
$(clonedElement).find("#"+id).val("");
Also, changing values to attributes such as the name also work as expected
vew newName = "new_name";
$(clonedElement).find("#"+id).attr("name", newName);
I can set a blank value and empty the fields but I cannot pass any actual values, neither coming from another variable or even hard-coded values, only blank works.
Another thing I noticed is that the "disabled" property is not getting copied along with the cloned inputs. All other attributes and properties do get copied.
Any ideas how to get new values added to cloned elements before appending the element to the document?
Thanks in advance,
I figured what the problem was. there is an input type file among all of the inputs and since I was looping all inputs to set the value without filtering some input types, the loop broke whenever it reached a select.
To fix the issue i simple did something like this.
var newValue = "my new value";
$("#"+newId+":not(input[type=file])", clonedElement).val(newValue);
$("#"+newId+":input[type=file]", clonedElement).text(newValue);
that's a workaround that worked for me and can easily be improved.
I comment, and looked here and I can not find the solution, my problem is the following:
in my html template in angular, I need to pass a series of data to the metadata property of a button, I can't get the correct way to successfully concatenate the variable that contains the value.
this should be the html element:
<mati-button clientId="clientId" flowId="flowId" color="green"metadata='{"user_id":"1234778","email":"som#som.com"}'/>
I tried several ways but I can't insert the respective values....
example:
<mati-button metadata='{"userID": "{{user.id}}" }'></mati-button>
unsuccessfully...
Assuming mati-button is an Angular component with metadata as Input(), you are probably looking for
<mati-button
[clientId]="clientId"
[flowId]="flowId"
[color]="green"
[metadata]="{ userId: '1234778', email: 'som#som.com'}"
></mati-button>
See the guide on property binding to learn more:
To bind to an element's property, enclose it in square brackets, [], which identifies the property as a target property. [...] The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.
By "dynamic expression" they mean JS-expressions, i.e., a public variable available through the component's TypeScript, a boolean expression, an array, or, like in your case, a JS-object that you can construct inline.
You can try doing this
<mati-button metadata="{'userID': user.id }"></mati-button>
metadata='{" userID ": {{user.id}}}'
in the end I got it. Apparently I don't know why, but the third-party script hides that parameter and it couldn't be debugged in the console, but it does receive them without any problem! Thanks everyone for your help!
Have a look at the following screenshot. You can see that the text input field is empty, yet its value attribute is set to "b".
You'll also notice in the Properties tab, under input, that value here is set to "". Why are they different? What does this mean?
Could this be related to the fact that the input was rendered by React?
If it helps, here is the jsx responsible for this element (redacted):
return (
<td
key={field._id}
className={`oldField ${colPos}`}
>
<input
type="text"
defaultValue={value}
onChange={this.changeOldField(record, field)}
/>
</td>
)
It seems that you are changing the defaultValue based on something from the state. The defaultValue prop should be set only once and not changed later on, because any more changes will be ignored by React. If you want to change the value based on state you should use the normal value prop. Otherwise, if you want a predefined value to appear to the user and at the same time control the input when it gets changed, you can either use some logic in your code that handles both onChange and the code in your component that wants to automatically change the value, or possibly place it in the placeholder prop, which will give you something like what you want.
I am using react-rails gem to work with ReactJS for Rails.
The weird thing is if I set a non-empty value property when rendering React component, the input field won't receive any keyboard event
This doesn't work!
React.DOM.input
type: 'text'
className: 'form-control'
value: "ABC"
But it works
React.DOM.input
type: 'text'
className: 'form-control'
value: ""
Any idea guys? Thanks a lot!
I have answered to one question similar to this, i don't know how to share that answer to you. So i am re-typing that.
In react, the component render's only when the state changes. Whenever the state of the component changes, then the corresponding component render. That means we are updating virtual DOM with new value and attach it to the main DOM. That's how react works.
In the case of input text fields the value of the text fields changes only when the user enter some value. In this case we are not updating any state, we are adding new value to "value" property of the text field. So the react wont render anything and new value is not added to the DOM. Here we are violating react behavior. So the react wont allow us to edit the input text fields.
In order to the get the smooth flow of the react, it allow us to use on change call back function in-order to set the state. On changing the value of the text filed, state set's with the new value so the react render and the DOM updated with the new value.
Instead of using call back function, we can use valuelink property to add value to input text. like:
getInitialState: function(){
return {
value:'' //for empty text value
}
}
For value link, we have to give state value instead of variable value. For complete understanding please refer:
https://facebook.github.io/react/docs/two-way-binding-helpers.html
whenever we enter the text in text box, the state get updated and the value of the input text set to state value.
I'm having a problem with a template: I'm trying to display a form for changing a value, in which the user enters the current value in a textarea and the old value is kept inside a hidden field for auditing purposes. This value is generally some HTML, and when I render the page this HTML in the hidden field seems to get partially rendered: the value attribute of my hidden field gets closed by the first quotation marks inside the entered HTML, and the rest of the HTML spews out onto my page. I've tried using the escape decorator but that hasn't changed anything.
Firstly, a better solution might be to keep the audit value in a separate model field defined with editable=False. You can still perform checks against the value in a form's clean method:
def clean(self):
cleaned_data = super(SomeForm, self).clean()
if instance.the_audit_field == cleaned_data['the_editable_field']:
...raise a validation error?
You can also modify the value of the audit field from within the model's save method.
Secondly, assuming you must do it the way you are now, let me address the non-escaped value in your template. I assume you're using something like the following:
<textarea value="{{ form.the_audit_field.value }}"></textarea>
You should instead use the following:
<textarea>{{ form.the_audit_field.value }}</textarea>
Note, the value goes inside the textarea, instead of in the value attribute of it.
An even better way to do it is to simply allow Django to render the field for you like the following:
{{ form.the_audit_field }}