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/
Related
Good evening everybody!
I'd like to hide a profile field if the user meta is blank.
For example, in the image, I'd like to hide the billing_ateco row because billing_ateco field is empty.
I have no idea where to start, if you have the solution or suggest me one similar thread (I didn't find anything in the similar questions section when I posted this) It would be a great help, thanks in advance!
If by user meta you mean user input, one approach would be to find all input elements, check if their value is empty and then hide their parent tr element.
// Find all <input> elements:
document.querySelectorAll("input").forEach( input =>{
// Check to see if the value is empty:
if ( input.value.trim() === "" ){
// Find the closest <tr> parent of the input and
// hide it:
input.closest("tr").style.display = "none";
}
});
<table>
<tr>
<td>
<label for="a">Label A</label>
</td>
<td>
<input id="a" />
</td>
</tr>
<tr>
<td>
<label for="b">Label B</label>
</td>
<td>
<input id="b" />
</td>
</tr>
<tr>
<td>
<label for="c">Label C</label>
</td>
<td>
<input id="c" value="Value" />
</td>
</tr>
</table>
I just want to show or hide some of my HTML form elements obviously using java depending on the previous selection.
I.e. if a user select Dyingtype drop-down "Bleached" obviously there is no need to show color selection radio buttons it only needs to show bleached white radio and when a user selects "Reactive" or "Vat" it only shows color selection radios and there is no need of bleached white radio button.
Please help I don't know java at all only know PHP.
My HTML code is below.
Thanks
<select name="dyingtype" class="formcss" id="10">
<option value="0">Select Dying Type</option>
<option value="1">Blaeached</option>
<option value="2">Reactive Dyed</option>
<option value="3">Vat Dyed</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="formcss"><label>Bleached/White</label></td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF">
<input
name="color"
type="radio"
class="formcss1"
id="11"
value="1"
checked="checked"
/>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="formcss"><label>Dark Colors</label></td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF">
<input name="color" type="radio" class="formcss1" id="12" value="2" />
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="formcss"><label>Average colors</label></td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF">
<input name="color" type="radio" class="formcss1" id="13" value="3" />
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="formcss"><label>Pastel Colors</label></td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF">
<input name="color" type="radio" class="formcss1" id="14" value="4" />
</td>
</tr>
<tr></tr>
Learning is great! It is clear you are an extreme beginner from calling JS Java, but this might help you get started in the right direction. Please note I'm not endorsing these methods, but I think it answers your question and will help you.
I suspect you will want to look into events: https://www.w3schools.com/jsref/event_onchange.asp
The idea is basically when a user selects a choice you need to hide / show elements that match.
Honestly, there are a lot of really great ways to do what you are asking, but since you are learning, executing a function from an event might be educational and I will try to keep it simple. What you will want to do is get all the elements you want to show, and change a style property. https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById to make them visible.
Your code might include something like this:
function hideBleachButtons () {
const bleachElement = document.getElementById(YOUR ELEMENT ID);
bleachElement.style.property = 'set a val'
}
Here are a few videos with related material:
https://www.youtube.com/watch?v=YrE62Dzg4oM,
https://www.youtube.com/watch?v=IBVvDMUaYpI
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
});
Here i'm trying to pass businessJet object in ng-change="info.onRampFeeApplicableChanged(businessJet)" for toggle button inside ng-repeat-start. But it always gives object of first index even if you change toggle button of other index values. Where as it works fine for the "ng-click="info.onToggleAircarftMoreDetails(businessJet)" inside the first td element.
Am i doing anything wrong? I couldn't figure out.
<div ng-repeat="aircraftType in info.fboRampFee">
<table>
<tbody>
<tr class="row" ng-repeat-start="businessJet in aircraftType.businessJets track by $index">
<td ng-click="info.onToggleAircarftMoreDetails(businessJet)"></td>
<td>
<span class="onoffswitch">
<input type="checkbox" name="businessJet-switch-{{$parent.$index}}"
class="onoffswitch-checkbox" id="businessJet-switch-{{$parent.$index}}"
ng-model="businessJet.IsApplicable"
ng-change="info.onRampFeeApplicableChanged(businessJet)">
<label class="onoffswitch-label" for="businessJet-switch-{{$parent.$index}}">
<span class="onoffswitch-inner"
data-swchon-text="YES"
data-swchoff-text="NO"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</td>
</tr>
<tr ng-repeat-end>
<td></td>
</tr>
</tbody
</table>
</div>
Just remove ng-repeat-start and put ng-repeat
and remove ng-repeat-end from tr tag. Might be it will work fine
It should be only id="businessJet-switch-{$index}}" instead of "id="businessJet-switch-{{$parent.$index}}" as i had to take the index of the child array. It worked.
$('.details').click(function(){
$(this).index()+1).toggleClass('.details, .overlay-wrapper');
});
Each table cell has some details/content in (hidden). Whenever a user selects the cell I need to pass through the index so only the details/div within the cell is shown.
Every single cell in the table has a div/details within the cell. So I need to only toggle on and off the div within the correct cell. At the moment it toggles every single details div on the page.
Thank you
JsFiddle is below with the html.
http://jsfiddle.net/t6yczwuo/
You have several problems with the code shown:
Unmatched bracket
Incorrect parameters for toggleClass (no . and no comma)
Without HTML this is all guesswork, but you seldom need the index to work with related cells. The following mockup use closest() to find the TD parent, then find() to find another related cell in the same TD:
$('.details').click(function(){
$(this).toggleClass("details overlay-wrapper").closest('td').find('.someother').toggle();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/gj2zz8po/
This example simply toggle the classes you specified on the details div, and hides/shows a related div within the same TD.
If you use this JSFiddle as the start of your example we can customise the code to match your situation.
Update for your new HTML:
$('.details-more').click(function (e) {
e.preventDefault();
$(this).closest('td').find('.overlay-wrapper .details').toggle();
});
http://jsfiddle.net/TrueBlueAussie/gj2zz8po/2/
Note: The e.preventDefault() should be used, even on bookmark links, to stop the page move to the top when clicked on a longer page.
You need .next() and not index().
.toggleClass() accepts just a single class name without a .. Also, toggling the class on which you are using any kind of selector is not recommended.
$('.details-more').click(function(e){
e.preventDefault();
$(this).next('.overlay-wrapper').find('div').toggleClass('details');
//Instead of find('div') you could use a specific class selector -
//find('.targetHidden') provided this class remains static throughout the html.
});
Updated Fiddle
HTML
<table style="width:100%">
<tr>
<td>Header</td>
<td>Header</td>
<td>Header</td>
</tr>
<tr>
<td>
Details
<div class="overlay-wrapper details">
<div class="">THIS IS THE SOME DETAILS OR CONTENT</div></div>
</td>
<td>
<div class="details"></div>
</td>
<td>
Details
<div class="overlay-wrapper details">
<div class="">THIS IS SOME MORE CONTENT</div></div>
</td>
</tr>
<tr>
<td>
<div class="details"></div>
</td>
<td>
Details
<div class="overlay-wrapper details">
<div class="">SOME TEST RANDOM STUFF</div></div>
</td>
<td>
<div class="details"></div>
</td>
</tr>
<tr>
<td>
<div class="details"></div>
</td>
<td>
<div class="details"></div>
</td>
<td>
Details
<div class="overlay-wrapper details">
<div class="">SOME MORE CONTENT</div></div>
</td>
</tr>
<tr>
<td>
<div class="details"></div>
</td>
<td>
<div class="details"></div>
</td>
<td>
<div class="details"></div>
</td>
</tr>
</table>
CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
.details {display:none;}
Javascript
$('.details-more').click(function(){
$(this).next('.overlay-wrapper').toggleClass('details');
});