We Keep Coding

Jquery/JS - css is working but attr is not

Im trying to disable an input after a condition and i dont understand why this not working. I tried to use $("#exemplaire_50001_0").attr('disabled', true); and $("#exemplaire_50001_0").prop('disabled', true); but both are changing nothing. Im using Jquery 1.5.1 so i think .attr must be used.
When i add
$("#exemplaire_50001_0").css("background-color", "red");
to my selector so the background is changing to red.
My question is, why the .css working but the .prop or .attr is not ? Where is the problem come from ? Is there an other solution to disable an input with jquery ?
Code :
var test = $('#num_cppap').val();
var test2 = test.substr(0,3);
console.log(test2);
if(test2 == "AIP"){
$("#exemplaire_50001_0").css("background-color", "red");
$("#exemplaire_50001_0").attr('disabled', true);
}
html ( this how i build the html ( using ZendFramework ) ) :
Nav render :

As mentioned here :
jQuery 1.5 and below
The .prop() function doesn't exist, but .attr() does similar:
Set the disabled attribute.
$("input").attr('disabled','disabled');
To enable again, the proper method is to use .removeAttr()
$("input").removeAttr('disabled');
var text = $("#text");
var btn = $("#btn");
btn[0].onclick = function() {
text.attr('disabled', 'disabled');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<input id="text" value="toto" />
<button id="btn">
click me
</button>

Can you look at this please, i maked an exemple :
var id = $("#exemplaire_50001_0");
var test = $('#num_cppap').val();
//var test2 = test.substr(0, 3);
//console.log(test2);
//if(test2 == "AIP"){
$("#exemplaire_50001_0").css("background-color", "red");
id.attr('disabled', 'disabled');
//}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="tableNiveau" class="declare">
<table id="tableNivPrep" class="tabData" border="0" style="display:block">
<thead>
<tr class="entete">
<th colspan="2" rowspan="2" class="entete">Préparation</th>
<th colspan="2" class="entete">Déclaré</th>
<th colspan="2" rowspan="2" class="entete">Option</th>
<th colspan="2" rowspan="2" class="entete" style="width:20%">Offre grand compte</th>
</tr>
<tr class="entete">
<th class="entete">Exemplaires</th>
<th class="entete">Paquets</th>
</tr>
</thead>
<tbody>
<tr id="50001" class="odd">
<td>Edition LDQL</td>
<td></td>
<td><input type="hidden" value="" name="idPrepa_50001_0"><input type="text" value="" name="exemplaire_50001_0" id="exemplaire_50001_0" class="saisie nivPrep Edition" style="text-align: right; background-color: red;" onkeyup="calculTotauxDeclare()"
onkeypress="return chiffres(event);"></td>
<td></td>
<td></td>
<td><select name="option_preparation_50001_0" id="option_preparation_50001_0"><option value="">Choix de l'option</option><option value="81000800">LOCAL </option><option value="81000801">Standard </option><option value="81000802">DIRECT </option><option value="81000803">DepotCTC </option><option value="81000804">DepotCDIS </option></select></td>
<td
style="text-align:center;"><input type="checkbox" name="zone_dense_50001" id="zone_dense_50001">
</td>
</tr>

you have to correct your code like below:
from
$("#exemplaire_50001_0").attr('disabled', true);
to
$("#exemplaire_50001_0").attr('disabled', 'disabled');
above code is for disable and if you want to enable it you have to remove disable attribute like below code :
$("input").removeAttr('disabled');

Unable to extract value using jQuery

I have a function to calculate when there is a change in one of the 3 input boxes and then display that answer. I'm able to trigger the function when there's a change but I'm unable to get the values from each of the inputs. Below are html and js snippets.
HTML:
<div>
<table>
<tr>
<th></th>
<th>Base</th>
<th class="gen-specific g3 g4 g5 g6">IVs</th>
<th class="gen-specific g3 g4 g5 g6">EVs</th>
<th></th>
<th></th>
</tr>
<tr class="hp" onchange="hp_calculator()">
<td>
<label>HP</label>
</td>
<td>
<input class="base" value="100" />
</td>
<td class="gen-specific g3 g4 g5 g6">
<input class="ivs calc-trigger" value="31" />
</td>
<td class="gen-specific g3 g4 g5 g6">
<input class="evs calc-trigger" type="number" min="0" max="252" step="4" value="0" />
</td>
<td><span class="total">341</span>
</td>
<td></td>
</tr>
</table>
</div>
JS:
function hp_calculator() {
var hp = $(this).find(".base").val()*$(this).find(".iv calc-trigger").val()+$(this).find(".ev calc-trigger").val();
$(this).find(".total").val(hp);
}

Firstly this is going to be the window and not the element. Pass the element inside your handler instead and use the parameter.
<tr class="hp" onchange="hp_calculator(this)">
Then you need to change your class selectors.class1.class2 for a many class selector, and then .text() to change the text of the span element. A final note is you left off the "s" in both ivs and evs:
function hp_calculator(ele) {
var hp = $(ele).find(".base").val()*$(ele).find(".ivs.calc-trigger").val()+$(ele).find(".evs.calc-trigger").val();
$(ele).find(".total").text(hp);
}
Demo
Note
It's generally bad practice to give event handlers inline. Rather I would recommend you to attach them directly in JavaScript, this way this will work as you would expect. Here is an example how you would do so in jQuery (demo):
$('.hp').change(function(){
var hp = $(this).find(".base").val()*$(this).find(".ivs.calc-trigger").val()+$(this).find(".evs.calc-trigger").val();
$(this).find(".total").text(hp);
});

remove link when checkbox is checked

I have a table with Datatable plugin, and I did the part when the user clicks on the row (tr) that he will be redirected to that link. but i don't want the user to be redirected to the link when he clicks the checkbox on the row.
Here is the html:
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class=""> ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class=""> 22 Candidates</td>
<td class="">01 Apr 2016</td>
<td></td>
</tr>
Here is my javascript code for redirecting the user to the link when it's clicked:
$('#sample_1').on( 'click', 'tr', function() {
var $a = $(this).find('a').last();
if ( $a.length )
window.location = $a.attr('href');
} );
So i don't want to redirect the user when the checkbox is clicked, pls help :)
Thank you

You can use e.target to check what element the user clicked on. In the example below, we check if the user clicked on an input of type checkbox. Then we don't run the rest of the function.
$('table').on( 'click', 'tr', function(e) {
var target = $(e.target);
debugger; // For debugging purposes.
if (target.is('input[type=checkbox]')) {
// Do not continue if it's an input
console.log('no redirect');
return true;
}
console.log('do redirect');
var $a = $(this).find('a').last();
if ( $a.length )
window.location = $a.attr('href');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class=""> ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class=""> 22 Candidates</td>
<td class="">01 Apr 2016</td>
<td></td>
</tr>
</table>
Update:
In this particular case the checkbox had some custom styling, which led to e.target being a span. The solution is to change the condition to $(e.target).is('span'), or even better set a class on the span and use $(e.target).hasClass('my-custom-checkbox').

Here you go - Add this to cancel the event when the checkbox is clicked:
$("tr input:checkbox").click(function(event) {
event.stopPropagation();
// Do something
});
Here is a working Demo
$('table').on('click', 'tr', function() {
var $a = $(this).find('a').last();
if ($a.length)
alert("fsfsd");
});
$("tr input:checkbox").click(function(event) {
event.stopPropagation();
// Do something
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class="">ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class="">22 Candidates</td>
<td class="">01 Apr 2016</td>
<td>
</td>
</tr>
</table>

Use the if construction
if ($('input.checkbox_check').is(':checked')) {
...
}

Add a class named yourradio in your radio button and add this javascript
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox' class="yourradio">
<span></span>
</label>
<script>
$('.yourradio').on('click', function(){
return false;
});

CasperJS to select a checkbox with specified text

I want to use casperJS to automatically select a checkbox
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="1" data-crdid="0005442" data-numcrd="3" value="">
</td>
<td>Data Structures and Algorithms</td>
<td>INT2203></td>
</tr>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="2" data-crdid="0005682" data-numcrd="3" value="">
</td>
<td>Machine Learning</td>
<td>INT2204></td>
</tr>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="3" data-crdid="003643" data-numcrd="3" value="">
</td>
<td>Artificial Intelligence</td>
<td>INT2205></td>
</tr>
The first column is the checkbox to select.
The second one is the name of the subject and the last one is the ID of the subject.
Now I just know the ID of the subject: INT2204 and I want to use casperjs to select the box of this subject. However, the only thing to distinguish is data-crdid which I have no clue.
Are there anyway to select the checkbox of the subject with ID 'INT2204' by casperjs?

You can use jQuery to filter on the element and get the siblings. This can be evaluated inside the page by CasperJS if you inject jQuery (if it isn't already).
Inject jQuery:
casper = require('casper').create();
casper.start();
casper.open('some url');
casper.then(function doSomething() {
this.page.injectJs('relative/local/path/to/jquery.js');
this.evaluate(function (courseId) {
$('td').filter(function() {
return $(this).text() === courseId;
}).siblings().find('input').prop('checked', true);
}, 'INT2203>');
});
Example in Browser:
var courseId = 'INT2203>';
$('td').filter(function() {
return $(this).text() === courseId;
}).siblings().find('input').prop('checked', true);
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Checkbox test</title>
</head>
<body>
<table>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="1" data-crdid="0005442" data-numcrd="3" value="">
</td>
<td>Data Structures and Algorithms</td>
<td>INT2203></td>
</tr>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="2" data-crdid="0005682" data-numcrd="3" value="">
</td>
<td>Machine Learning</td>
<td>INT2204></td>
</tr>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="3" data-crdid="003643" data-numcrd="3" value="">
</td>
<td>Artificial Intelligence</td>
<td>INT2205></td>
</tr>
</table>
</body>
</html>

I finally found a way to solve my problem without using jQuery.
Here is the HTML code which I copied from #Evers answer:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Checkbox test</title>
</head>
<body>
<table>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="1" data-crdid="0005442" data-numcrd="3" value="">
</td>
<td>Data Structures and Algorithms</td>
<td>INT2203</td>
</tr>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="2" data-crdid="0005682" data-numcrd="3" value="">
</td>
<td>Machine Learning</td>
<td>INT2204</td>
</tr>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="3" data-crdid="003643" data-numcrd="3" value="">
</td>
<td>Artificial Intelligence</td>
<td>INT2205</td>
</tr>
</table>
</body>
</html>
I will use method getElementsInfo and getElementsAttribute of CasperJS:
First, I need to collect all the data which related to the subjects. Since the only things I know is the ID and the name of the subjects, I need to know their data-crdid in order to select the checkbox.
casper.then(function () {
// Select all the subject IDs in the table
id = this.getElementsInfo('table tr td:nth-child(3)')
.map(function (value, index, array) {
return array[index].text();
});
// Select all the data-crdid in the table
data = this.getElementsInfo('table tr td input', 'data-crdid');
});
After that, everything is simple. I just need to pick my subject by its ID and the data-crdid will have the same index in array data.
casper.then(function () {
selected = data[id.indexOf(subject)];
});
casper.thenEvaluate(function (selected) {
document.querySelector('input[data-crdid="' + selected + '"]').click();
}, selected);
Here is the full code:
var casper = require('casper').create();
var subject = 'INT2204';
casper.start();
casper.thenOpen('/{{ URL }}');
casper.then(function () {
// Select all the subject IDs in the table
var id = this.getElementsInfo('table tr td:nth-child(3)')
.map(function (value, index, array) {
return array[index].text();
});
// Select all the data-crdid in the table
var data = this.getElementsInfo('table tr td input', 'data-crdid');
var selected = data[id.indexOf(subject)];
this.thenEvaluate(function (selected) {
document.querySelector('input[data-crdid="' + selected + '"]').click();
}, selected);
});
casper.run();

Javascript Hide Column by Default

After browsing online for tutorials on Javascript show/hide I could only find examples on where all the columns were by default visible. I'm looking for a way to have some columns hidden by default (and allow them to be toggled on via a checkbox) and to have some columns shown by default (and allow them to be toggled off via a checkbox).
Is this possible?
For reference my table structure is as follows:
<table>
<thead>
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mike</td>
<td>Dancer</td>
</tr>
</tbody>
</table>

Pure javascript:
HTML
<input type="checkbox" onclick="showhide(1, this)" checked="checked" /> Name<br />
<input type="checkbox" onclick="showhide(3, this)" checked="checked" /> Job<br />
JS
function showhide(column, elem){
if (elem.checked)
dp = "table-cell";
else
dp = "none";
tds = document.getElementsByTagName('tr');
for (i=0; i<tds.length; i++)
tds[i].childNodes[column].style.display = dp;
}
Pure JS fiddle example
Please consider using a javascript library as JQuery for such trivial things. You code could be as simple as:
​
HTML
<input type="checkbox" data-col="1" checked="checked" /> Name<br />
<input type="checkbox" data-col="2" checked="checked" /> Job<br />
jQuery JS:
$(function(){
$(':checkbox').on('change', function(){
$('th, td', 'tr').filter(':nth-child(' + $(this).data('col') + ')').toggle();
});
});
jQuery Fiddle example

Here's the toggle function (using jQuery):
function toggleColumns(column, state) {
var cells = $("table").find("th, td").filter(":nth-child(" + column + ")");
if (state)
cells.hide();
else
cells.show();
}
If you need that column hidden by default, you can call this function during onLoad.
Example http://jsfiddle.net/nynEd/

in your css you should have something like
.hidden{
display:none;
}
.shown{
display:block;
}
then in your html you should have something like
<table>
<thead>
<tr>
<th id="th1" class="shown">Name</th>
<th id="th2" class="shown">Job</th>
</tr>
</thead>
<tbody>
<tr>
<td id="td1" class="shown">Mike</td>
<td id="td2" class="shown">Dancer</td>
</tr>
</tbody>
</table>
you then have to implement a togle method that will change the visibility of the column
//id should be passhed as 1, 2, 3 so on...
function togleTable(id){
if(document.getElementById("th"+id).className == "shown"){
document.getElementById("th"+id).className = "hidden";
}
if(document.getElementById("td"+id).className == "shown"){
document.getElementById("td"+id).className = "hidden";
}
if(document.getElementById("th"+id).className == "hidden"){
document.getElementById("th"+id).className = "shown";
}
if(document.getElementById("td"+id).className == "hidden"){
document.getElementById("td"+id).className = "shown";
}
}
and then in the compobox onChange() event you should call the togleTable function passing as id the number of the row you want to show/hide
this is a good place to start i think.
Have fun
UPDATED
if you want to have more than one class for your rows dont forget you can also use this:
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

There are many way out for this my option is using basic jquery functions like,
<input type="checkbox" id="opt1" checked/>col 1
<input type="checkbox" id="opt2"/>col 2
<table border="1" cellpadding="5">
<thead>
<tr>
<th>Name</th>
<th>Job</th>
<th id="col1">col 1</th>
<th id="col2">col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mike</td>
<td>Dancer</td>
<td class="data1">data 1</td>
<td class="data2">data 2</td>
</tr>
</tbody>
</table>​
This is your HTML code,
$(document).ready(function() {
if($("#opt1").is(":checked")){
$("#col1").show();
$(".data1").show();
}else{
$("#col1").hide();
$(".data1").hide();
}
if($("#opt2").is(":checked")){
$("#col2").show();
$(".data2").show();
}else{
$("#col2").hide();
$(".data2").hide();
}
$("#opt1").live('click', function() {
if($("#opt1").is(":checked")){
$("#col1").show();
$(".data1").show();
}else{
$("#col1").hide();
$(".data1").hide();
}
});
$("#opt2").live('click', function() {
if($("#opt2").is(":checked")){
$("#col2").show();
$(".data2").show();
}else{
$("#col2").hide();
$(".data2").hide();
}
});
});​
This is a java-script code.
Please find working example

The columns which you want to hide should have attribute style="display:none" initially