I am adding div to the DOM as below,
React.createElement("div", { className: "test"});
The rendered html should be as below
<div class="test" data-test>
</div>
Where can I add data-test in the createElement?
If you refer to the doc on createElement API, you can insert the value to your data-test prop like this:
React.createElement('div', {className: 'test', 'data-test': 'some value'});
You can't do that because attribute without any value means that this attribute has value true in JSX. Just don't pass data-test and this.props['data-test'] will be undefined in your component. Or if you need to have this attribute with empty value then just add it to your default values in component definition.
defaultProps: {
'data-test': ''
}
Related
Have been looking for this answer in SO, but perhaps I'm not frasing it correctly or there is actually no answer yet for this.
I am using an input component that uses a key to render it valid (green border) or invalid (red border) and I would like to add it dynamically:
<Input type="select" valid /> //This input has green border
<Input type="select" invalid /> //This input has red border
Since they key valid/invalid has no value like true or false, I'm not sure how to change it dynamically through a function since as far as I'm aware, I can change values dynamically with a JSX expression, but not add a key itself.
Can you please suggest a way to add 'valid' or 'invalid' tag dynamically without value?
"Without value" is actually not accurate. What you see there is syntactic sugar for valid={true} and invalid={true}.
So, the same can be accomplished by:
const valid = // whatever logic here to determine if it's valid.
<Input type="select" valid={valid} invalid={!valid} /> // Either return or assign to something.
Alternatively:
let inputProps = {type: 'select'};
if (/* whatever logic here to determine if it's valid*/) {
inputProps.valid = true;
}
else {
inputProps.invalid = true;
}
<Input {...inputProps} />; // Either return or assign to something.
But the latter is a lot more verbose.
Not sure if this will work but give it a try.
JSX reads properties without values/= as boolean/true.
Set null values:
<Input type="select" invalid={null} />
You can then conditionally show valid or invalid input elements
How to code optional attribute without value to show/hide some blocks?
Demo
For example, when the "showsum" attribute exists in the line below:
<div ng-controller="myCtrl" showsum headers="['Table Header 1', 'Table Header 2']">
I want to show this line (ex: Sum: 12)
<td ng-show="showsum">Sum: {{ getCol1Sum() }}</td>
well since the ng-show directive takes in an expression, you cannot use it the way you did there,
The ngShow directive shows or hides the given HTML element based on
the expression provided to the ngShow attribute.
i dont know what your reason is to define it as an attribute, but what you can do is create a directive
like so
myApp.directive('showsum ', function() {
return {
restrict: 'A', // restrict to an attribute so we can use it as such
link: function(scope, element, attrs) {
scope.showsum = true; // set the show sum expression so we can access it in the scope
}
}
})
example:
http://plnkr.co/edit/mE5LrSMWdIwPRazEdD3b?p=preview
it will create a showsum attribute for the scope and you can do w.e you want with it
I have understood from my last question here that string concatenate is not allowed with 0.9 and above (currently I am migrating to version 1.0).
I have to rather wrap every variable inside separate HTML element.
However there are times when I need to use a href or class attribute to be assigned with values dynamically. I cannot make it to work directly like the following:
Link text
since 1.0 won't allow string concatenation!
Please see the snippets below. I am trying to pass an attribute value from my index.html which in turn should replace the value in class attribute inside my custom element. But it is not working and I understand why.
<dom-module id="multi-color-bar-chart">
<template>
<div id="chart">
<p>{{title}}</p>
<div class="{{v1bg}}">
<!-- I want {{v1bg}} to be replaced by value sent from index.html -->
<span>{{value1}}</span>%
</div>
<div class="v2" style="background:#ffcc00;">
<span>{{value2}}</span>%
</div>
<div class="v3" style="background:#369925;">
<span>{{value3}}</span>%
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</template>
<script>
(function () {
Polymer({
is: 'multi-color-bar-chart', //registration of element
properties: {
title: { type: String },
value1: { type: String },
value2: { type: String },
value3: { type: String },
v1bg: { type: String }
}
});
})();
</script>
</dom-module>
Here is the snippet in index.html
<multi-color-bar-chart
title="Annual"
value1="45.5"
value2="22.3"
value3="32.2"
v1bg="#ff0000">
...
...
</multi-color-bar-chart>
I am passing a hex code #ff0000 via v1bg attribute which I intend to actually replace the property inside the element.
I don't know yet if there is a work around to it. Might have used document.querySelector() but didn't try that yet. If there is a direct HTML approach that would be wonderful.
Try class$="{{v1bg}}", as this will bind to the class attribute rather than the class property.
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding
The 'comment' field has 'id' and 'class', I can't give a unique 'id' because it is coming from a database (dynamic output). I have tried to 'toggle' (hide and show) with Jquery, but when I click a particular 'comment' field all of the form (textarea) is appearing (Toggling). How do I toggle a particular field with same id or class?
$(".commentForm").hide();
$(".askForComment").click(function(){
$(".commentForm").toggle();
});
<div id='comments'>
<div id='askForComment' class='askForComment'>Comments?</div>
<div id='viewComments'></div>
<form id='commentForm' class='commentForm'>
<textarea cols='20' rows='2'></textarea>
<input type='button'>
</form>
</div><!-- this element is looped (dynamic) -->
You should target the specific .commentForm here :
$(".askForComment").click(function(){
$(this).siblings(".commentForm").toggle();
});
This will toggle the .commentForm which is near the askForComment. Or, you could do this :
$(".askForComment").click(function(){
$(this).parent().find(".commentForm").toggle();
});
Hope this helps!
Try this
$(".askForComment").on("click",function(){
$(this).next(".commentForm").toggle();
});
As it is the best option rather than click if your HTML formed at runtime means after DOM loding prefer to use $(".askForComment").on("click",function(){
Change this:
$(".askForComment").click(function(){
$(".commentForm").toggle();
});
To this:
$("#comments").on('click', ".askForComment", function(){
$(this).next(".commentForm").toggle();
});
You don't want to use .siblings() because that gets ALL the matching siblings. You want to use .next() because it will only get the closest one.
What are the ways to get and render an input value using jQuery?
Here is one:
$(document).ready(function() {
$("#txt_name").keyup(function() {
alert($(this).val());
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<input type="text" id="txt_name" />
//Get
var bla = $('#txt_name').val();
//Set
$('#txt_name').val(bla);
You can only select a value with the following two ways:
// First way to get a value
value = $("#txt_name").val();
// Second way to get a value
value = $("#txt_name").attr('value');
If you want to use straight JavaScript to get the value, here is how:
document.getElementById('txt_name').value
There is one important thing to mention:
$("#txt_name").val();
will return the current real value of a text field, for example if the user typed something there after a page load.
But:
$("#txt_name").attr('value')
will return value from DOM/HTML.
You can get the value attribute directly since you know it's an <input> element, but your current usage of .val() is already the current one.
For the above, just use .value on the DOM element directly, like this:
$(document).ready(function(){
$("#txt_name").keyup(function(){
alert(this.value);
});
});
You have to use various ways to get current value of an input element.
METHOD - 1
If you want to use a simple .val(), try this:
<input type="text" id="txt_name" />
Get values from Input
// use to select with DOM element.
$("input").val();
// use the id to select the element.
$("#txt_name").val();
// use type="text" with input to select the element
$("input:text").val();
Set value to Input
// use to add "text content" to the DOM element.
$("input").val("text content");
// use the id to add "text content" to the element.
$("#txt_name").val("text content");
// use type="text" with input to add "text content" to the element
$("input:text").val("text content");
METHOD - 2
Use .attr() to get the content.
<input type="text" id="txt_name" value="" />
I just add one attribute to the input field. value="" attribute is the one who carry the text content that we entered in input field.
$("input").attr("value");
METHOD - 3
you can use this one directly on your input element.
$("input").keyup(function(){
alert(this.value);
});
I think this function is missed here in previous answers:
.val( function(index, value) )
You can get the value like this:
this['inputname'].value
Where this refers to the form that contains the input.
To get the textbox value, you can use the jQuery val() function.
For example,
$('input:textbox').val() – Get textbox value.
$('input:textbox').val("new text message") – Set the textbox value.
You can simply set the value in text box.
First, you get the value like
var getValue = $('#txt_name').val();
After getting a value set in input like
$('#txt_name').val(getValue);
For those who just like me are newbies in JS and getting undefined instead of text value make sure that your id doesn't contain invalid characters.
Try this. It will work for sure.
var userInput = $('#txt_name').attr('value')
You can try
let quantity = $('input[name = quantity]').val()
where the name of the input field is quantity
Shortest
txt_name.value
txt_name.onkeyup = e=> alert(txt_name.value);
<input type="text" id="txt_name" />