I use this script in a Website with jquery 1.7.
$('input:radio[name=article-info]:!checked').parent().parent().removeClass('highlight')
I move this script in a bootstrap template but the chrome console report me this error:
Uncaught Error: Syntax error, unrecognized expression: input:radio[name=article-info]:!checked
Bootstrap use a update version of jQuery .
What should I use syntax for this version?
The complete code:
// Select input radio button
$('input[type=radio][name=article-info]').change(function() {
$('input:radio[name=article-info]:not(:checked)').parent().parent().removeClass('highlight');
$(this).parent().parent().addClass('highlight');
// Price
$price = $('label[for="'+ $(this).attr('id') +'"] .tr-price').text();
$('#price-total').text($price);
// Url btn
$new_url = $(this).parent().siblings('.format').children().children('input').val();
$('#btn-personalizar').attr("href", $new_url);
});
//Select tr
$(".data-click-tr").click(function(){
$(".data-click-tr").removeClass('highlight')
$(this).addClass('highlight').find('input:radio[name=article-info]').attr('checked', true);
$get_input_id = $(this).find('input:radio[name=article-info]').val();
// Precio
$price = $('label[for="'+ $get_input_id +'"] .tr-price').text();
$('#price-total').text($price);
// Url btn personalizar
$new_url = $(this).find('.format').children().children('input').val();
$('#btn-personalizar').attr("href", $new_url);
});
The HTML:
<table id="select-size">
<thead class="size-and-price">
<tr class="header-table">
<th colspan="2">Tamaño</th>
<th class="">Precio</th>
</tr>
</thead>
<tbody>
<tr class="data-click-tr highlight" data-click-tr="1426">
<td class="input">
<input id="1426" type="radio" name="article-info" value="1426" checked="checked">
</td>
<td class="format">
<label for="">720X1080 mm (ver ficha)
<input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-75x100/1426">
</label>
</td>
<td class="price">
<label for="1426">
<span class="tr-price"> 39 €</span>
</label>
</td>
</tr>
<tr class="data-click-tr" data-click-tr="6685">
<td class="input">
<input id="6685" type="radio" name="article-info" value="6685">
</td>
<td class="format">
<label for="">950X1400 mm (ver ficha)
<input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-95x140/6685">
</label>
</td>
<td class="price">
<label for="6685">
<span class="tr-price"> 49 €</span>
</label>
</td>
</tr>
<tr class="data-click-tr" data-click-tr="710">
<td class="input">
<input id="710" type="radio" name="article-info" value="710">
</td>
<td class="format">
<label for="">1200X1900 mm (ver ficha)
<input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-120x190/710">
</label>
</td>
<td class="price">
<label for="710">
<span class="tr-price"> 69 €</span>
</label>
</td>
</tr>
<tr class="data-click-tr" data-click-tr="2259">
<td class="input">
<input id="2259" type="radio" name="article-info" value="2259">
</td>
<td class="format">
<label for="">2400X1600 mm (ver ficha)
<input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-160x240-queen/2259">
</label>
</td>
<td class="price">
<label for="2259">
<span class="tr-price"> 89 €</span>
</label>
</td>
</tr>
</tbody>
</table>
This is a Screenshot:
The ! operator cannot be used in the selectors.
You can use :not() selector to invert the selector.
$(':radio[name="article-info"]:not(:checked)')...
^^^^^^^^^^^^^^
The :not(:checked) part in the selector will select the radio buttons which are unchecked.
To add a negative control, you must use :not()
$('input:radio[name=article-info]:not(:checked)').parent().parent().removeClass('highlight')
Related
I would like to know how to show the students who doesn't have a class and hide the rest(where td Class-name is empty) using only jquery or js.
I look in documentation but I got lost. so if you can help plz.
Ex: my table in this picture
my table is generated by django but there is the html
<div class="button-select" id="add-student">Show Student with no Class</div>
<table class="table" id="student_table">
<tbody>
<tr class="clickable_student" style="">
<td>Student
<label for="id_students_34">
<input type="checkbox" name="students" value="34" class="displaynone">
</label>
</td>
<td class="Class-name">
Class23
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student2
<label for="id_students_38">
<input type="checkbox" name="students" value="38" class="displaynone">
</label>
</td>
<td class="Class-name">
Class17
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student3
<label for="id_students_39">
<input type="checkbox" name="students" value="39" class="displaynone">
</label>
</td>
<td class="Class-name">
Class19
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student4
<label for="id_students_40">
<input type="checkbox" name="students" value="40" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student5
<label for="id_students_41">
<input type="checkbox" name="students" value="41" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student6
<label for="id_students_42">
<input type="checkbox" name="students" value="42" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student7
<label for="id_students_43">
<input type="checkbox" name="students" value="43" class="displaynone">
</label>
</td>
<td class="Class-name">
Class18
</td>
</tr>
</tbody>
</table>
thanks in advance.
you have to loop on tr then get td inside it and then hide tr of that td which is null using jquery.
here is the jquery code for checking each tr loop through
$("tr").each(function() {
var nonEmpty = $(this).find("td.Class-name").filter(function() {
return $(this).text().trim() != ""; //check the trimmed TD content - will make it ignore all white space
});
and this code is used to hide empty td which don't have class.
if (nonEmpty.length != 0) $(this).hide();
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr").each(function() {
var nonEmpty = $(this).find("td.Class-name").filter(function() {
return $(this).text().trim() != ""; //check the trimmed TD content - will make it ignore all white space
});
if (nonEmpty.length != 0) $(this).hide();
});
});
</script>
</head>
<body>
<div class="button-select" id="add-student">Show Student with no Class</div>
<table class="table" id="student_table">
<tbody>
<tr class="clickable_student" style="">
<td>Student
<label for="id_students_34">
<input type="checkbox" name="students" value="34" class="displaynone">
</label>
</td>
<td class="Class-name">
Class23
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student2
<label for="id_students_38">
<input type="checkbox" name="students" value="38" class="displaynone">
</label>
</td>
<td class="Class-name">
Class17
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student3
<label for="id_students_39">
<input type="checkbox" name="students" value="39" class="displaynone">
</label>
</td>
<td class="Class-name">
Class19
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student4
<label for="id_students_40">
<input type="checkbox" name="students" value="40" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student5
<label for="id_students_41">
<input type="checkbox" name="students" value="41" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student6
<label for="id_students_42">
<input type="checkbox" name="students" value="42" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student7
<label for="id_students_43">
<input type="checkbox" name="students" value="43" class="displaynone">
</label>
</td>
<td class="Class-name">
Class18
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have written a code that is working on a local server but online it is not working, Following shows the Code.
$(".super").each(function() {
var sup = "First Checkbox,Third Checkbox,Fourth Checkbox";
var array = sup.split(",");
$.each(array, function(i) {
$("input[type=checkbox][value='" + array[i] + "']").prop('checked', true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<tr>
<td width="150">
<label>First Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="First Checkbox">
</td>
<td width="180">
<label>Second Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Second Checkbox">
</td>
<td width="150">
<label>Third Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Third Checkbox">
</td>
<td width="130">
<label>Fourth Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Fourth Checkbox">
</td>
</tr>
</table>
The above code shows multiple values are separated by commas and I need to get each value and enable the checkbox but It is working on local xampp but online on the server not working.
There's a few issues in your logic.
super is a reserved keyword in ECMA2015. You will need to rename that variable
The type and value attribute selectors need to be separated; ie. add the missing ]
You cannot have div elements as children of tr. Remove them.
You've repeated the same txtSup id attribute when they must be unique. Remove that attribute, you can change it to a class if needed.
$(".super").each(function() {
var sup = "First Checkbox,Third Checkbox,Fourth Checkbox";
var array = sup.split(",");
$.each(array, function(i) {
$("input[type=checkbox][value='" + array[i] + "']").prop('checked', true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<tr>
<td width="150">
<label>First Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="First Checkbox">
</td>
<td width="180">
<label>Second Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Second Checkbox">
</td>
<td width="150">
<label>Third Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Third Checkbox">
</td>
<td width="130">
<label>Fourth Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Fourth Checkbox">
</td>
</tr>
</table>
Given the first two issues I don't see how your code works at all, regardless of server.
The HTML code the JSON array is populated from:
<table>
<tr>
<td> <label> Did you like this presentation?</label> </td>
<td>
<select id="Q181" onchange="window.parent.addDataFromElement(this[this.selectedIndex])">
<option id="R201" value="R201">Yes</option>
<option id="R202" value="R202">No</option>
</select>
</td>
</tr>
<tr>
<td> <label>Could you please give us your opinion?</label> </td>
<td> <input type="text" id="Q183" onchange="window.parent.addData(this.id,this.value)"/> </td>
</tr>
<tr>
<td> <label id="Q184">Are you satisfied?</label> </td>
<td>
<input type="checkbox" id="R203" value="R203" onclick="window.parent.addDataFromElement(this)">Yes</input><br>
<input type="checkbox" id="R204" value="R204" onclick="window.parent.addDataFromElement(this)">No</input>
</td>
</tr>
<tr>
<td> <label>Give a rating from 1 to 5</label> </td>
<td> <input type="number" max="5" min="1" id="Q185" onchange="window.parent.addDataFromElement(this)"/> </td>
</tr>
</table>
The code that obtains data :
<span class='template' data-template='${context.presentations[0].sequences[6].data[0].value}'></span>
The error message is :
error during template : TypeError: context.presentations[0].sequences[6] is undefined
How do I access the sequences?
I have a Table in which I have checkboxes that onclick on checkboxes I want to know 2 things
ID of the checkbox
ID of the hidden field on same table row
So I do have a hidden field in each row and I want to know what that value is
My checkbox I can see from my Fiddle is GridView1__ctl3_chkOut but then I want jquery to find the value of the hidden field in same table row
I see that GridView1__ctl2_hndTxtId value is 3601 , but I will have many rows ...
Fiddle --> http://jsfiddle.net/bthorn/x9fc28nn/2/
jquery
$('.out').on('change', function () {
$(this).closest('tr').find('.out').not(this).prop('checked', false);
console.log(this.id);
//what is the hidden field value in same row?
});
$('.yesno').on('change', function () {
$(this).closest('tr').find('.yesno').not(this).prop('checked', false);
//what is the hidden field value in same row?
});
console.log shows me the ID
<table>
<tr>
<td style="width:5px;">
<input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
</td>
<td style="width:50px;"> <span id="GridView1__ctl2_lblVehicle0">413</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblName2">LONG</span>
</td>
<td style="width:100px;"> <span id="GridView1__ctl2_lblEquip2">BKT/TDR/M</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblScheduleb">0600-1430</span>
</td>
<td style="width:50px;"> <span id="GridView1__ctl2_lblScheduleOrig2">8</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOn"></span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOff"></span>
</td>
<td>
<input id="GridView1__ctl2_chkOut" type="checkbox" name="GridView1:_ctl2:chkOut" checked="checked" class="out">
</td>
<td>
<input id="GridView1__ctl2_chkYes2" type="checkbox" name="GridView1:_ctl2:chkYes2" checked="checked" class="yesno">
</td>
<td>
<input id="GridView1__ctl2_chkNo2" type="checkbox" name="GridView1:_ctl2:chkNo2" class="yesno">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl2:AddButton0" value="On" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_AddButton0" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl2:txtStormTimeOn" type="text" value="9-15-2015 12:00" id="GridView1__ctl2_txtStormTimeOn">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl2:OffButton" value="Off" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_OffButton" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl2:txtStormTimeOff" type="text" value="9-15-2015 12:28" id="GridView1__ctl2_txtStormTimeOff">
</td>
<td style="width:500px;"> <span id="GridView1__ctl2_lblComments"></span>
</td>
<td style="width:500px;">
<input name="GridView1:_ctl2:txtStormComments" type="text" value="testfasdfsdfasdfsadfasdfsadf" maxlength="200" id="GridView1__ctl2_txtStormComments" style="width:200px;">
</td>
</tr>
<tr>
<td style="width:5px;">
<input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
</td>
<td style="width:50px;"> <span id="GridView1__ctl3_lblVehicle0">215</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblName2">MORGAN</span>
</td>
<td style="width:100px;"> <span id="GridView1__ctl3_lblEquip2">BKT/TDR</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblScheduleb">0600-1430</span>
</td>
<td style="width:50px;"> <span id="GridView1__ctl3_lblScheduleOrig2">8</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblTimeOn"></span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblTimeOff"></span>
</td>
<td>
<input id="GridView1__ctl3_chkOut" type="checkbox" name="GridView1:_ctl3:chkOut" class="out">
</td>
<td>
<input id="GridView1__ctl3_chkYes2" type="checkbox" name="GridView1:_ctl3:chkYes2" class="yesno">
</td>
<td>
<input id="GridView1__ctl3_chkNo2" type="checkbox" name="GridView1:_ctl3:chkNo2" class="yesno">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl3:AddButton0" value="On" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl3_AddButton0" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl3:txtStormTimeOn" type="text" id="GridView1__ctl3_txtStormTimeOn">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl3:OffButton" value="Off" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl3_OffButton" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl3:txtStormTimeOff" type="text" id="GridView1__ctl3_txtStormTimeOff">
</td>
<td style="width:500px;"> <span id="GridView1__ctl3_lblComments"></span>
</td>
<td style="width:500px;">
<input name="GridView1:_ctl3:txtStormComments" type="text" maxlength="200" id="GridView1__ctl3_txtStormComments" style="width:200px;">
</td>
</tr>
</table>
You already got the ID of the checkbox. To get the value of the hidden input field of the row use the following code:
$('.yesno').on('change', function () {
$(this).closest('tr').find('input[type="hidden"]').val()
});
See this JSfiddle demo
You can find information about the selectors at : https://api.jquery.com/category/selectors/
Taking a part of your fiddle, it looks about:
$tr = $(this).closest('tr');
hidden = $tr.find('input[type="hidden"]');
console.log(hidden);
Use the find method as you are already using but with 'input[type=hidden]':
$('.out').on('change', function () {
var $tr = $(this).closest('tr');
$tr.find('.out').not(this).prop('checked', false);
console.log(this.id);
//what is the hidden field value in same row?
var hiddenVal = $tr.find('input[type=hidden]').val();
console.log(hiddenVal);
});
$('.yesno').on('change', function () {
var $tr = $(this).closest('tr');
$tr.find('.yesno').not(this).prop('checked', false);
//what is the hidden field value in same row?
var hiddenVal = $tr.find('input[type=hidden]').val();
console.log(hiddenVal);
});
Fiddle
You already have the id of the checkbox. You can get the id of the hidden input element using:
var hiddenID = $(this).closest('tr').find('input[type=hidden]').prop('id');
And you can get the value of the same field like so:
var hiddenVal = $(this).closest('tr').find('input[type=hidden]').val();
Following is my table structure:
<tr class="odd">
<td class=" sorting_1">
<input id="clone1042154701" class="fileCheckAll" type="checkbox" name="clone1042154701" checked="">
</td>
<td class="">
<input id="appName1042154701" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154701">
</td>
<tr>
<tr>
<tr class="even">
<td class=" sorting_1">
<input id="clone1042154702" class="fileCheckAll" type="checkbox" name="clone1042154702" checked="">
</td>
<td class="">
<input id="appName1042154702" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154702">
</td>
<tr>
<tr>
.
.
.
and many more rows
On onblur event I am calling a javascript validate function which sets class as "invalid" on error.
Now before form submission I am call a javascript method inside which checks class for error and returns false id error.
if ($("[id^=appName]").hasClass("invalid")) {
alert("Invalid Application name");
return false;
}
The problem that I am facing is that it is validation all the table rows irrespective of whether it is checked via checkbox or not. I need to validate only those row which are checked via checkbox.
Can some please suggest me how to proceed.
Updated answer: it took me while, but I might have got the desired result. So if you use the following:
if ($(".invalid[id^=appName]").closest("tr").find("input:checked").length > 0 ) {
alert("Invalid Application name");
return false;
}
it alerts only if there are at least one element with class invalid and the checkbox is selected on the same row.
Also, I'd have a look at the table as well, I noticed some missing ending tags for tr (</tr>) and for divs that were inside td. Sorry for pointing this out, but it might have some effect on HTML validation.
function validate() {
var invalidRowCount = $(".invalid[id^=appName]").closest("tr").find("input:checked").length;
console.log(invalidRowCount); //prints 2
if ($(".invalid[id^=appName]").closest("tr").find("input:checked").length > 0 ) {
alert("Invalid Application name");
return false;
}
}
td div { display: inline }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr class="odd">
<td class=" sorting_1">
<input id="clone1042154701" class="fileCheckAll" type="checkbox" name="clone1042154701" checked="">
</td>
<td class="">
<input id="appName1042154701" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154701">invalid</div>
</td>
</tr>
<tr class="even">
<td class=" sorting_1">
<input id="clone1042154702" class="fileCheckAll" type="checkbox" name="clone1042154702" checked="">
</td>
<td class="">
<input id="appName1042154702" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154702">invalid</div>
</td>
</tr>
<tr class="odd">
<td class=" sorting_1">
<input id="clone1042154701new" class="fileCheckAll" type="checkbox" name="clone1042154701new" checked="">
</td>
<td class="">
<input id="appName1042154701new" class="fileAppName" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154701new">valid</div>
</td>
</tr>
</table>
<br>
<button onclick="validate()">Click me</button>
You can use:
$('#someId').filter(':checked');
i.e. use the filter method for it.