Develop Reference

JQuery add class to row based on a value

I am reading a data from SQL Server database and displaying it in the form of a table. However, I need help on how to add a styling to a row in a table based on a value of one of the attributes using jquery
The column has a class like so
<td>
<span class="funding-eligible">#Html.DisplayFor(modelItem => item.FundingEligibility)</span>
</td>
In the javascript file I have this
$(document).ready(function () {
if ($(".funding-eligible").text() == 1) {
$(".funding-eligible").addClass("eligible")
}
});

Loop through funding-eligible class .each() then use closest() to get the parent row
$(document).ready(function () {
$(".funding-eligible").each(function(){ // .each to loop through elements
if(+$(this).text().trim() === 1){ // .trim() to avoid white-spaces , + here to covert the string to number
$(this).closest('tr').addClass("eligible"); // .closest() to get the closest row
}
})
});
You can also use .filter()
$(document).ready(function () {
$(".funding-eligible").filter(function(){ // .filter to filter elements by condition returned
return +$(this).text().trim() === 1; // .trim() to avoid white-spaces , + here to covert the string to number
}).closest('tr').addClass("eligible"); // .closest() to get the closest row
});
But.. Why you don't use a condition to add a class to row directly in your html before appending?? something like<tr class="<?php echo ($eligible == 1) ? 'eligible' : '' ?>">

How can I use one event handler for multiple radio buttons?

I want mutliple radio buttons (number unknown, because they get created dynamcially) to have the same onClick or onChange event, whichever fits the best. I found examples for jQuery but not pure Javascript. Should i just loop trought all radio buttons on the form?
They get created in php like so:
//DB Connection already established
$sql = "SELECT * FROM users";
$results = $dbConnection->query($sql);
if($result->num_rows > 0){
while($row = $result->fetch-assoc()){
echo "<li><input type=radio name=all_users[] value='". $row['E-Mail'] . "'/>" . $row['Name'] . " " . $row['Lastname'] . "</li>";
}
}
else
{
echo "<p>No users found</p>";
}
How can i do that loop? Or is there any more common way of doing that?
If one of them get's clicked i want their value as a parameter for the event, in only one function.
Or Should i just add onclick=myfunction(this) into the php file?

I want multiple radio buttons (number unknown, because they get created dynamically) to have the same onClick or onChange event.
If one of them get's clicked i want their value as a parameter for the event, in only one function.
Let's assume that your PHP has rendered the list items and you have a common function called myFunction() which you want to use to log it's parameter to your console:
function myFunction(val){
console.log("The value is " + val);
};
Now if I understand you correctly, you want to run the above function whenever one of the rendered radio buttons are clicked and to pass the value of the value attribute of the radio button that was clicked as a parameter for the above function.
Firstly, you need to assigned all the rendered radio button in your list to a variable:
var x = document.querySelectorAll("li input");
Secondly, since x is a collection of objects (here, all the radio buttons rendered), you will now have to map through each item on x using forEach and assign a click listener on each radio button which runs the ClickItem()function passing it the item's defaultValue as a parameter val like this:
x.forEach(function(radio) {
radio.addEventListener('click', function() {
var val = this.defaultValue;
myFunction(val);
});
});
jsFiddle: http://jsfiddle.net/AndrewL64/2y6eqhb0/56/
However, if by value, you mean the content after the input tag but still inside the respective li tag, then you just need to make slight changes to the above code like this:
Firstly, to prevent the selector from querying li elements from other parts of the page, you need to wrapped your list items with a div or a ul having a unique ID like this:
<ul id="someList">
//create your list items here
</ul>
Secondly, you need to assigned all the rendered list items to a variable:
var x = document.querySelectorAll("#someList li");
Thirdly, similarly to what we did above, since x is a collection of objects (here, all the list items rendered), you will now have to map through each item on x using forEach and assign a click listener on each list item which runs the ClickItem()function passing it the item's innerText as a parameter val like this:
x.forEach(function(radio) {
radio.addEventListener('click', function() {
var val = this.innerText;
myFunction(val);
});
});
jsFiddle: http://jsfiddle.net/AndrewL64/2y6eqhb0/58/

Actually the JQuery make it easier, but you can do the same with pure JS.
the real concept is to capture the event bubbling, try this:
fatherElement => element that is not dynamic
fatherElement.addEventListener("click", function(event){
if(event.target.type == 'radio'){
//do something
}
});

Use this echo line instead yours:
echo "<li><input onchange='yourOnChange(event)' type=radio name=all_users[] value='". $row['E-Mail'] . "'/>" . $row['Name'] . " " . $row['Lastname'] . "</li>";
I add onchange='yourOnChange(event)' there. And of course remember to add proper js function e.g function yourOnChange(e) { console.log(e); } to your web page.

Or Should i just add onclick=myfunction(this) into the php file?
Yes, you can do that. In that case code will be;
<li><input onclick='myclick('". $row['E-Mail'] ."')' type=radio name=all_users[] value='". $row['E-Mail'] . "'/>" . $row['Name'] . " " . $row['Lastname'] . "</li>"
Now in JS code myclick(email) function can handle anything with email argument.
Pure JS solution:
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type.toLowerCase() == 'radio') {
if(inputs[i].checked)
{
//if radio button is checked
myClick(inputs[i].id, 'checked') //you can get anything apart from id also
}
else
{
//if radio button is not checked
myClick(inputs[i].id, 'unchecked') //you can get anything apart from id also
}
}
}
myClick(id, stat)
{
//YAY!! I have got the id
}

You can do a for of loop if you have querySelectorAll.
Here is an example:
const radios = document.querySelectorAll('input[type=radio]');
for (const element of radios ) {element.addEventListener('click', function(event) {
console.log(event.currentTarget)
})
}

Using pure JS you can select your radio buttons and add event listeners like so:
const radios = document.querySelectorAll('input[type=radio]');
radios.forEach(radio => radio.addEventListener('change', e => {
// radio is your radio button element
});
Same with jQuery:
$('input[type=radio]').change(() => {
//your code goes here
});

My checkbox doesn't work with loop for to display data

I did the checkbox work good, this is my one:
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).prop("checked") == true){
document.getElementById("srt").value = document.getElementById("Ultra").value;
}
else if($(this).prop("checked") == false){
document.getElementById("srt").value = "";
}
});
});
At my display data part, I have the loop for to show all the record. I want after I click the checkbox the value I get from document.getElementById("Ultra").value and display on document.getElementById("srt").value. It work good at 1 record only, the rest I check didn't work. I think the problem is I display it on <input type="text" id="srt"> and the textbox I put in loop with loop for to display database. Any help?
This one is php part:
for ( $v = 0 ; $v < mysql_num_rows($result) ; $v++ )
{
$row = mysql_fetch_assoc($result);
?>
<td><input type="checkbox"/></td>
<?php
echo'<td>'.$row['aaa'].'</td>';
echo'<td>'.$row['bbb'].'</td>';
echo'<td>'.$row['ccc'].'</td>';
echo'<td><input type="text" id="srt"></td>';//////this one to display value i get
echo'<td>'.$row['dddr'].'</td>';
}
The value only display on 1 row only.

One thing I see is you have <input type="text" id="srt"> in each loop. This means your ids are not unique and this could cause problems in the document.getElementById("srt").value = document.getElementById("Ultra").value; call.
Try make ids unique (this means giving a different id for every textbox, maybe something like srt_'.$v.' and also retrieving the correct textbox id in the jquery function)
PS: can you please show also the "Ultra" input in your php code?
Edit: to get the correct textbox you could set an id to your checkbox too and use it to get the correct id of the textbox.
In your page:
echo'<td><input type="checkbox" id='.$v.'/></td>';
and
echo'<td><input type="text" id="srt'.$v.'"></td>';
And in your function
if($(this).prop("checked") == true){
document.getElementById("srt"+this.id).value = document.getElementById("Ultra").value;
}
I did not test it so there could be something to adjust, but the idea is there.

try this..
$(document).ready(function(){
var values = $('input.high_name:checked').map(function () {
return this.value;
}).get();
alert(values);
});
and your checkbox add class name,
<input type="checkbox" value="" name="high[]" class="high_name">

Get attribute from many divs to toggle class

So I am trying to check a bunch of divs on an inbox page and I am returning an array from an AJAX call to know which divs to change the font-style of. To achieve this, I have to first check their data-value attribute and then add/remove a class(bold vs. normal fro read/unread messages). The problem is that when I refer to the messageDiv object, it toggles all the messages on the page. Looping through the messages makes the most sense to me, but I do not know how to store a div an array to achieve this.
data['messages']=[3,5,8,9]
var messageDiv=$('.widget .inbox-row');
if (data['status']=='A'){//read
if ($.inArray(messageDiv.data('value'),data['messages']) && messageDiv.hasClass('unread-msg')) {
messageDiv.removeClass('unread-msg').addClass('read-msg');
}
}
if (data['status']=='N'){//unread
if ($.inArray(messageDiv.data('value'),data['messages']) && messageDiv.hasClass('read-msg')) {
messageDiv.removeClass('read-msg').addClass('unread-msg');
}
}
This is what a message looks like, iterated many times on the page:
<div class="<?php echo $message_read_status; ?> inbox-row" data-value="<?php echo $messageid; ?>" >
<?php echo $body; ?>
</div>
Sincere thanks for any help. Sorry if this is a pretty specific question. I tried to make it as non-specific as possible.

The problem is e is a set of elements, so when you say messageDiv.data('value'), it will return teh data-value of the first element in the set.
You need to iterate over each item in the array and run the conditions against each one
var messageDiv = $('.widget .inbox-row');
messageDiv.each(function () {
var $this = $(this);
if (data['status'] == 'A') { //read
if ($.inArray($this.data('value'), data['messages']) > -1 && $this.hasClass('unread-msg')) {
$this.removeClass('unread-msg').addClass('read-msg');
}
} else if (data['status'] == 'N') { //unread
if ($.inArray($this.data('value'), data['messages']) > -1 && $this.hasClass('read-msg')) {
$this.removeClass('read-msg').addClass('unread-msg');
}
}
})

How to get the value of an option in a dropdown by knowing only the id of select tag using javascript

here is my js code:
var currentsecondarycategory = document.getElementById("se_category");
if(currentsecondarycategory.childElementCount > 1)
{
if(!currentsecondarycategory.value.match(whiteSpaceRegExp))
{
error = 1;
alert("please enter a secondary category for the Item.");
currentElement.select();
currentElement.focus();
return;
}
}
i want to check if their is only one option,then how to check the value of that option,so that if it is other than the value "No records found",then i can apply the 2nd if condition above to that option also.please help me.
here the options are coming dynamically,so not possible to check by a single id.

Use .value property of currentsecondarycategory. Here is a jsfiddle demonstrating the process:
http://jsfiddle.net/2nNy3/
HTML
<select id="dropdown"><option value="test">that's the value</option></select>
JS
console.log(document.getElementById("dropdown").value);
If you want to get the text of the option tag then use:
document.getElementById("dropdown").options[0].innerHTML;

Use currentsecondarycategory.childNodes to get the <option> nodes within the <select>. If there is only one option, it will be currentsecondarycategory.childNodes[0], and its value will be currentsecondarycategory.childNodes[0].value.

var currentsecondarycategory = document.getElementById("se_category");
if(currentsecondarycategory.selectedIndex == 0){
alert('put your message here');
return false;
}
currentsecondarycategory.selectedIndex it will return the selected index of the selectbox
please try this...may helpful