i am trying bellow jquery code to perform some dynamic changes to my front view to make the odoo switch toggle to behave like radio button.so it could be selected one at a time like radio button
Note: console.log("test") is working but the code with css selector is not working
please guide me how i run my script to work it fine
$(document).ready(function(){
$(".wk_checked_question").click(function(){
alert("you click me!");
});
console.log("test");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
*test.html**
<tbody>
<tr>
<td class="question_id" style="width:70%">Q1. t-shirt coler
size</td>
<td class="question_id" style="width:50%">$ 120.00</td>
<td><label class="switch">
input class="wk_checked_question" data-id="2" type="checkbox">
<span class="check_box round"></span>
</label>
</td>
</tr>
<tr>
<td class="question_id" style="width:70%">Q2. t-shirt size</td>
<td class="question_id" style="width:50%"> Free</td>
<td>
<label class="switch">
<input class="wk_checked_question" data-id="1" type="checkbox">
<span class="check_box round"></span>
</label>
</td>
</tr>
</tbody>
Maybe this is what you are looking for:
$(document).ready(function(){
$("body").on("click",".wk_checked_question",function(ev){
$(".wk_checked_question").each((i,cb)=>cb.checked=(cb==this));
this.checked=true; // a "real" radio button cannot be unchecked ...
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:500px">
<tbody>
<tr>
<td class="question_id" style="width:70%">Q1. t-shirt color size</td>
<td class="question_id" style="width:50%">$ 120.00</td>
<td><label class="switch"><input class="wk_checked_question" data-id="2" type="checkbox">
<span class="check_box round"></span></label></td>
</tr>
<tr>
<td class="question_id" style="width:70%">Q2. t-shirt size</td>
<td class="question_id" style="width:50%"> Free</td>
<td>
<label class="switch">
<input class="wk_checked_question" data-id="1" type="checkbox">
<span class="check_box round"></span></label></td>
</tr>
</tbody>
</table>
After a click on a checkbox the .each() loop goes over all checkboxes with the same class and sets only the one being identical to the clicked ono (this). All others are unchecked.
I used "delegated event attachment" with jQuery.on() as suggested in #freedomn-m's comment. This has the advantage that it will work on target elements (.wk_checked_question) that don't even exist at the time of the event attachment.
Your HTML was also missing the <table> tags around your <tbody> which I added.
Edit
Coming back to this answer I realized that I could simplify the script even further and allow for an option to be unselected again by using this:
$("body").on("click",".wk_checked_question",function(ev){
let newstate=this.checked;
$(".wk_checked_question").prop("checked",false);
this.checked=newstate
});
Related
I am trying to move checked checkboxes from one checklist, which is actually in a table, to another checklist in another table so the two are in sync. However, this code gives me the syntax error "Unexpected end of input" in Chrome and won't work:
var checkedBoxes = document.querySelectorAll('.contentChecks');
var chkArray = [];
chkArray = $.map(checkedBoxes, function(el) {
if(el.checked) { return el.id.substring(1, el.id.length) }
});
for (var i = 0; i < chkArray.length; i++)
{
var checkbox = document.getElementById("B" + chkArray[i]);
checkbox.checked = true;
var row = $("#B" + chkArray[i]).closest('tr'); // row with changed checkbox
row.insertBefore(row.parent().find('tr:first-child')); // move to top
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
<thead>
<tr>
<th>Checkboxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="A127" class="contentChecks" checked />
<label for="A127" class="todo">
<i class="fa fa-check"></i>Sample Text 1
</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="A32" class="contentChecks" checked />
<label for="A32" class="todo">
<i class="fa fa-check"></i>Sample Text 2
</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="A1543" class="contentChecks" checked />
<label for="A1543" class="todo">
<i class="fa fa-check"></i>Sample Text 3
</label>
</td>
</tr>
</tbody>
</table>
<table id="table2">
<thead>
<tr>
<th>Checkboxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="B127" class="contentChecks2" />
<label for="B127" class="todo">
<i class="fa fa-check"></i>Sample Text 1
</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="B32" class="contentChecks2" />
<label for="B32" class="todo">
<i class="fa fa-check"></i>Sample Text 2
</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="B1543" class="contentChecks2" />
<label for="B1543" class="todo">
<i class="fa fa-check"></i>Sample Text 3
</label>
</td>
</tr>
</tbody>
</table>
I've tried debugging this a million ways to no avail, except I have concluded that something must be wrong with my for loop since commenting out the other code still gave the error. I've put this code in JavaScript validators and they all conclude the syntax is valid and the "end of the input" is just fine. Also it works just fine in my code snippet.
IMPORTANT: I am pulling this JavaScript code from an external file, so it is HTML along with this JS being returned from an AJAX call to the webpage the user is seeing, replacing the previous HTML.
I found the solution - it was a scope issue. Trying to pull HTML and JavaScript from an external file didn't work on the AJAX call, so I just put the same code under the complete section of the AJAX call of the same file/page and it worked :)
Is there a way to remove the td(please see commented td"to be removed") from this table without editing the HTML.
Also, not using only the classes as I have the same classes in another tables that I don't need to be removed, so targeting the span id as well. Thanks in advance!
<div id="pnlPersonalDetails2">
</div><table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody><tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr><tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<!-- To be removed
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>-->
</tr>
</tbody></table>
<div id="pnlPersonalDetails3">
</div><table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody><tr>
<!-- To be removed
<td colspan="2" class="pd_question">
<span id="lbl3"></span>
</td>-->
</tr><tr>
<td class="pd_label">LAST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_3" type="text" id="Name微statictext_3" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl04" style="visibility:hidden;">Required Field</span>
</td>
</tr>
This is how it looks now
enter image description here
This is how I want to look after removing the commented td's
enter image description here
I have attached the entire code here https://codepen.io/duicug/pen/VGreQZ
<td id="hideTD" class="error_label" style="visibility: hidden;">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
<script>
document.getElementById("hideTD").style.visibility = "hidden";
</script>
You can refer this website , good sample https://www.w3schools.com/jsref/prop_style_display.asp
Hope that can help you.
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
<td colspan="2" class="pd_question">
<span id="lbl3"></span>
</td>
<script>
document.getElementById("ctl03").parentElement.remove();
document.getElementById("lbl3").parentElement.remove();
</script>
You could use querySelector to find the class such:
var target = document.querySelector("#pnlPersonalDetails2 .error_label");
There are then multiple ways to remove it from the DOM.
You could leave it in memory so that you can easily show it again later:
target.style.display = "none"; //Undo by setting to "" or to previous value
Or you could make it invisible which leaves it in memory and change the layout of surrounding contents:
target.style.visibility = "hidden"; //Undo by setting to "" or to previous value
Or you could completely remove it from the DOM:
target.parent.removeChild(target);
try it with jquery:
$("#lbl2").toggle();
maybe this will help you?
var el = document.getElementById('lbl2');
el.parentElement.hidden = true;
or remove td
var el = document.getElementById('ctl03');
el.parentElement.remove();
I have two groups that have a radio button. What it does is, when a package above is chosen, the chosen package below should be the same from the above, vice-versa. Example is if I choose "Deluxe" in the first one, the other one should also be "Deluxe". The problem is, when I choose, "Deluxe" at the top, the other package is still on the previous selection. At first try, everything is working but when you try selecting again, the problem occurs. Also I want to highlight the selected package.
The other part of the code is here
Html
<table class="tblPackage">
<thead>
<tr style="text-align: center;">
<td width="30%"></td>
<td width="1%"></td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ECONOMY</div><span class="s11">$49</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">DELUXE</div><span class="s11">$79</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
</div>
</td>
</tr>
</thead>
<tbody>
<colgroup>
<col id="colA"/>
<col id="colB"/>
<col id="colC"/>
<col id="colD"/>
<col id="colE"/>
</colgroup>
<tr>
<td style="text-align: left;"><h5>Choose Package</h5></td>
<td></td>
<td>
<center>
<input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1" class="css-checkbox" onclick="ChangeColColor(this,'colC')"/>
<label for="tcbx1" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="79.00" id="tcbx2" class="css-checkbox" onclick="ChangeColColor(this,'colD')"/>
<label for="tcbx2" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="149.00" id="tcbx3" class="css-checkbox" onclick="ChangeColColor(this,'colE')"/>
<label for="tcbx3" class="css-label"></label>
</center>
</td>
</tr>
</tbody>
</table>
<table class="tblsubPackage" width="90%">
<tr>
<td width="31%"><h5>Choose Package</h5></td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ECONOMY </div><span class="s11">$49</span>
</div>
<center>
<input type="radio" name="radiog_lit" checked value="49.00" id="tscbx1" class="css-checkbox" />
<label for="tscbx1" class="css-label"></label>
</center>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">DELUXE</div><span class="s11">$79</span>
</div>
<center>
<input type="radio" name="radiog_lit" value="79.00" id="tscbx2" class="css-checkbox" />
<label for="tscbx2" class="css-label"></label>
</center>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
</div>
<center>
<input type="radio" name="radiog_lit" value="149.00" id="tscbx3" class="css-checkbox" />
<label for="tscbx3" class="css-label"></label>
</center>
</td>
</tr>
</table>
handle it with single click event.
$('.tcbx').click(function (event) {
var test = $(this).data('test');
$('#'+test).prop('checked', this.checked);
});
just make sure you have a data attribute in option which matches with the id attribute of sub package or viceversa
<input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1"
class="css-checkbox tcbx" data-test="tscbx1" />
//---^^^^ added a class here
and add a class.
I know there are lot of other ways to figure this out, one of which is comparing the index in both tables and doing the needful likewise. But for fast response and since you already have different id for all the checkboxes, i added this function.
This is just a sample you can actaully avoid having different id hope you will work on it
Note: you can change test to what ever variable you like.
here you go
http://jsfiddle.net/aohsny6y/20/
You can reduce your code by using jQuery's start with selector for radio button having ids starting with either tscbx or tcbx as shown below and get the index of the id to find corresponding radio button.
You need to use .prop() instead of .attr()
Also to set background color, you can put data-col attribute in radio button and use the same to find col and set its background color (though it is not working in JSFiddle).
<input type="radio" name="radiog_dark"
checked value="49.00" id="tcbx1"
class="css-checkbox" data-col="colC"/>
jQuery:-
$('input[type="radio"][id^="tscbx"]').click(function() {
var index = $(this).attr('id').replace('tscbx','');
$('#tcbx'+index).prop('checked', true);
});
$('input[type="radio"][id^=tcbx]').click(function() {
var index = $(this).attr('id').replace('tcbx','');
$('#tscbx'+index).prop('checked', true);
//remove all colgroup background
$('colgroup col').css('background-color','white');
//put selected bacground for selected radio
var colId= $(this).data('col');
var varColor = "rgba(0,140,203,.2)";
$('#'+colId).css('background-color',varColor);
});
JSFiddle Demo
For jQuery 1.9 or higher you need to user .prop("checked", true) instead of .atrr()
Fot the Highlighting create a CSS Class and Change it with .toogleClass
$('#tscbx3').attr('checked','true')
I have following code that will be generated by Wordpress:
<h3>
<span class="title">General Settings:</span>
</h3>
<table class="form-table">
<tbody>
<div class="section_box1"><tr class="section1" valign="top">
<th scope="row">Hide Menu Background:</th>
<td>
<input id="" checked="" name="" type="checkbox">
</td>
</tr><tr class="section1" valign="top">
<th scope="row">
Menu Background:
</th>
<td>
<input name="" type="file">
</td>
</tr></div>
<div class="section_box2"><tr class="section2" valign="top">
<th scope="row">Hide Sidebar:</th>
<td>
<input id="" checked="" name="" type="checkbox">
</td>
</tr><tr class="section2" valign="top">
<th scope="row">Hide Site Title:</th>
<td>
<input id="" checked="" name="" type="checkbox">
</td>
</tr></div>
</tbody>
</table>
For now there will be two sections (tr.section1 & tr.section2).
Now I will wrap these sections with two div's (.section_box1 & .section_box2).
So I am using following Jquery:
//Lets wrap those two sections inside divs ...
$('tr.section1').not($('tr').eq(1)).each(function(){
$(this).add($(this).nextUntil('.section2')).wrapAll('<div class="section_box1"></div>');
});
$('tr.section2').not($('tr').eq(3)).each(function(){
$(this).add($(this).nextUntil('.section3')).wrapAll('<div class="section_box2"></div>');
});
Now the problem with this code is: If I add another setting field (checkbox for example) in my sections my wrapper div's (section_box1 & section_box2) will duplicate (obviously I want to avoid that).
I have created This Fiddle to show you my problem.
So how can I properly wrap my sections without duplicating my wrapper div's and still be able to add more fields inside wrapper div's section_box1 & section_box2? I am trying to make this for couple of hours now but no luck:(
Thank you guys in advance!!
Your jQuery is ridiculously insanely needlessly complex. :)
If you really just want all the .section1 trs to be enclosed in one .section_box1 div (and the same for section 2), you can use the following to do the wrapping:
//Lets wrap those two sections inside divs ...
$('tr.section1').wrapAll('<div class="section_box1"></div>');
$('tr.section2').wrapAll('<div class="section_box2"></div>');
See the update fiddle here: http://jsfiddle.net/QZKJM/1/
I am using the following code to make a certain section of my form show or hide depending on the selection of the radio buttons. However, if I leave the page and come back to it (I leave the page to fill out other sections of the form that are then placed back on the main form) the state of the radio button selection isn't remembered even if the user already made a selection and filled out the fields. Have I done something wrong with my Jquery?
Code for Jquery radio button hide/show:
$(document).ready(function() {
$("[name=delvchoice]").change(function(){
$("#list").toggle($("[name=delvchoice]").index(this)===1);
});
});
HTML code of the page for the radio buttons:
<div>
<table>
<tr>
<td>Will the above items be delivered by your department to the Surplus Warehouse?</td>
<td><input type="radio" name="delvchoice" property="delvchoice" value="Yes"/>Yes</td>
<td><input type="radio" name="delvchoice" property="delvchoice" value="No"/>No</td>
</tr>
</table>
</div>
HTML code for the hide/show section:
<div id="list" style="display: none;">
<div>
<table>
<tr>
<td>Should you choose to have Physical Plant Support Services deliver the items for your department you must provide an
account number for the labor charge:</td>
</tr>
</table>
<table>
<tr>
<td>Account Number :</td>
<logic:notEmpty name="SurplusSaveForm" property="acctno1" scope="session">
<td>
<table border="0">
<tr>
<td><bean:write name="SurplusSaveForm" property="acctno1" scope="session"/>-
<bean:write name="SurplusSaveForm" property="acctno2" scope="session"/>-
<bean:write name="SurplusSaveForm" property="acctno3" scope="session"/>-
<bean:write name="SurplusSaveForm" property="acctno4" scope="session"/>
</td>
</tr>
</table>
</td>
</logic:notEmpty>
<logic:empty name="SurplusSaveForm" property="acctno1" scope="session">
<td><html:text size="2" property="acctno1" maxlength="2" onkeyup="nextbox(this,'acctno2');"/>-
<html:text size="2" property="acctno2" maxlength="2" onkeyup="nextbox(this,'acctno3');"/>-
<html:text size="5" property="acctno3" maxlength="5" onkeyup="nextbox(this,'acctno4');"/>-
<html:text size="3" property="acctno4" maxlength="3" onkeyup="nextbox(this,'acctno4');"/>
</td>
</logic:empty>
<td><b><html:submit property="btn_findAccount">Search for and choose</html:submit><br>your Account</b></td>
</tr>
</table>
</div>
css-tricks has a nice screencast on forms storage if you want to check it out.
http://css-tricks.com/video-screencasts/96-localstorage-for-forms/