How to pass value dynamically in JavaScript - javascript

I have a table which has the column name "12" Instead of that value I want to pass it dynamically and for that I have a created item "P_Itm_val" see attached image for reference.
$('td[headers = "12"]').each(function() {
$(this).css({"background-color":"whitesmoke"});
$(this).css({"color":"green"});
$(this).css({"font-weight":"bold"});
});
image

Just put the value there instead of "10"
$('td[headers = P_Itm_val]').each(function() {
$(this).css({"background-color":"whitesmoke"});
$(this).css({"color":"green"});
$(this).css({"font-weight":"bold"});
});
If that doesn't work, try appending the value into the call
$('td[headers = "'+P_Itm_val+'"]').each(function() {
$(this).css({"background-color":"whitesmoke"});
$(this).css({"color":"green"});
$(this).css({"font-weight":"bold"});
});
I'm not quite sure what I did for this however, I've done something similar to this.

Related

Trouble detecting the correct data value

I am using this function below to find the data value inside of 3 possible DIVs. The data attribute dynamically changes each time that a slide changes position. I am trying to get the correct returned value of false, but it incorrectly returns true for each slide. What might be the problem?
$('.slidelink').on('click', function(e) {
var parent = $(this).parent().parent().parent().parent();
var parent_name = parent[0].nodeName.toLowerCase();
var parent_tagname = $(parent_name);
if (parent_tagname.attr('data-isactiveslide') == 'true') {
alert('working!');
}
});
And the HTML, which represent individual slides in Revolution Slider Wordpress plugin:
<rs-slides>
<rs-slide data-isactiveslide="false">
<rs-layer-wrap>
<rs-loop-wrap>
<rs-mask-wrap>
<rs-layer class="slidelink"></rs-layer>
</rs-mask-wrap>
</rs-loop-wrap>
</rs-layer-wrap>
</rs-slide>
</rs-slides>
You are walking up the tree referencing the element name. Using that to find all the elements in the page with that tag, and looking at the first one.
$('.slidelink').on('click', function(e) {
var parent = $(this).closest("[data-isactiveslide]");
console.log(parent.data('isactiveslide'))
});

How to get second column value of invoked row in table?

In below context menu example .. how to get value of second column that invoked it?
Refer Link
tried with $(this).find('td:second').text() but it didnt work. :P
How to do this?
No need to write such this long code here. Just assign a class name to each <tr> like row then add click event listener like this:
$(".row").click(function () {
var txt = $(this).children().eq(1).text();
alert(txt);
});
jsfiddle
You can get your row or invoked row then use cells proberty to access second column
$(".row").click(function () {
var colText = $(this).cells[1].textContent;
// or-> var colText = row.cells[1].textContent;
});

Jquery input value not showing up correctly

I have something very simple to just get an input value.
The code looks like this:
var $a = $('.custom-amount').val();
$('.custom-amount').on('change', function() {
alert($a)
})
And my input:
<div class='custom-amount'>
<input placeholder='Custom Amount' type='text-area'>
For some reason, my alerts are empty. Does anyone see whats going wrong?
Change your selector to $('.custom-amount input'), and get the value after the change event is fired, e.g.
$('.custom-amount input').on('change', function() {
var a = $(this).val();
alert(a);
});
Right now, you are trying to get the value of a div, which won't work. You need to get the value of the input.
Edit: also, it looks like you are trying to display a textarea. Try replacing this...
<input placeholder='Custom Amount' type='text-area'>
With this...
<textarea placeholder='Custom Amount'></textarea>
This may help:
http://jsfiddle.net/d648wxry/
The issue is very simple, you are getting the value of the div element. Instead you should retrieve the value of the input element so the 'custom-amount' class must be added to the input.
Also you need to execute the val() method inside the event to get the value updated.
var $a = $('.custom-amount');
$('.custom-amount').on('change', function() {
alert($a.val());
});
Cause your div has no value. Change your code to:
var $input = $('.custom-amount input');
$input.on('change', function() {
var $a = $input.val();
alert($a)
})
First of all, you only assign to $a outside of the change function. This would be more clear if you kept your code lined up better (see the edit I made to your post). This is the right way to do it:
$('.custom-amount').on('change', function() {
var $a = $('.custom-amount').val();
alert($a)
});
Second of all, the class custom-amount is assigned to a <div> instead of the <input> element. You have to select the <input> element, not the <div>. Change your markup to:
<div>
<input placeholder='Custom Amount' type='text-area' class='custom-amount'>
</div>

How do i target specific data values

I have assigned data attributes to every grid class, each value is a different number ranging from 1-64.
I want it so that it adds a class 'success' to the grid class with a data-value="1", i can only get it without the specific value. so it finds all data attributes called data value and adds the success class but I cant figure out how to only add it to classes with the data attribute of 1.
function clickSquare() {
$('.grid').click(function(){
if ( $('.grid').data('value'))
{
$(this).addClass("success");
}
else
{
$(this).addClass("error");
}
});
}
<div data-value="1" class="grid pointer">1</div>
also, if i set up an array
var values = ['1', '2']
how could i do it so that the jquery only attaches the class to values with that of the array. hope that made sense!
You need to use this inside the event handler to refer to the clicked grid element. If you use the selector .grid inside the handler it will return the data value of the first grid element in the page instead of current element
$('.grid').click(function () {
if ($(this).data('value') == 1) {
$(this).addClass("success");
} else {
$(this).addClass("error");
}
});
Demo: Fiddle

How can the IDs of visible jqGrid grids be determined?

I have a page with severl jqGrids, but only one is visible at a time. I want a simple function to return which one is visible at any time. Is there some function like this, which would show which divs are visible:
$('div').each(function(){
if($(this).is(':visible')){
alert($(this).attr('id'));
}
});
Is there something like this that can parse through all jqGrids on a page?
Thanks!
You need probably something like the following
$("table.ui-jqgrid-btable:visible").attr('id');
If no grid are on the table you will get undefined value. If more as one grid is visible you will get the id of the first one.
To have array of ids of all visible grids you can use the following code
var ids = $.map($("table.ui-jqgrid-btable:visible"), function(value) {
return value.id;
});
// now we have all ids in the array
alert(ids.join()); // display all as comma-separated
You can make the above code more safe with the test for grid expandos:
var ids = $.map($("table.ui-jqgrid-btable:visible"), function(value) {
if (value.grid) { return value.id; }
});
// now we have all ids in the array
alert(ids.join()); // display all as comma-separated
As far as I have seen, All grids are wrapped with a div class ui-jqgrid. So try something like below,
$('div.ui-jqgrid:visible').each(function () {
alert(this.id); //above would return the gview_<table_id> or gbox_<table_id> or
//something_<table_id>
alert($(this).find('.ui-jqgrid-btable').attr('id')); //should return table_id
});

Categories

Resources