I am trying to update a list by using a toggle switch, but I cannot find the solution. Any inputs from you guys? any hint will be very appreciated :).
Important: the .ui-li list id is #myListView which is populated from the server with data-value as +item.Gender+ "female" or "male". I want to create a code that if user uses toggle off for male, then the list will update by only showing "female" value in the li. and vice versa.
So far, I have this (no working) code:
$(document).on("pagecreate", "#page-settings", function (){
$("#flip-1").on("change", function (){
if ($(this).val() == "off"){
$("#myListView").val($(item.Gender =="female")).listview( "refresh" );
}
});
});
And my HTML looks like this:
<div data-role="content" id="settingsPanel">
<div data-role="fieldcontain" id="menSelector" >
<label for="flip-1">Men</label>
<select name="flip-1" id="flip-1" data-role="slider"data-mini="true" class="genderSelect">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
<div data-role="fieldcontain" id="womenSelector" >
<label for="flip-2">Women</label>
<select name="flip-2" id="flip-2" data-role="slider"data-mini="true" class="genderSelect">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
Assuming your li has a data attribute for gender, e.g.
<li data-gender="female"></li>
Then when you flip a switch, first show all listitems:
$('#myListView li').show();
Then hide either male or female:
$('#myListView li[data-gender="male"]').hide();
UPDATE:
So, given your flip switches, handle the change event and call a function called ShowList() on each change. In ShowList() check which flip switches are on, and if one is on and the other is off, hide the gender that is off:
$(document).on("pagecreate", "#page1", function(){
$("#flip-1").on("change", function(){
if ($(this).val() == "off"){
$("#flip-2").val("on").slider( "refresh" );
}
ShowList();
});
$("#flip-2").on("change", function(){
if ($(this).val() == "off"){
$("#flip-1").val("on").slider( "refresh" );
}
ShowList();
});
});
function ShowList(){
var m = $("#flip-1").val() == "on";
var f = $("#flip-2").val() == "on";
$('#myListView li').show();
if (m && !f) {
$('#myListView li[data-gender="female"]').hide();
} else if (!m && f) {
$('#myListView li[data-gender="male"]').hide();
}
}
DEMO
Related
Using print_media_templates i add some settings into wordpress gallery creator that allow me to chose gallery shortcode output (default gallery, masonry, slider) based on additional shortcode parameters.
My code so far :
<?php
add_action('print_media_templates', function(){ ?>
<script type="text/html" id="tmpl-custom-gallery-setting">
<label class="setting">
<span>Gallery Type</span>
<select name="type" data-setting="type" onchange="getval(this);">
<option value="default">Default</option>
<option value="masonry">Masonry</option>
<option value="slider">Slider</option>
</select>
</label>
<div id="slider-settings">
<label class="setting">
<span>Animation</span>
<select id="gallery-type" name="animation" data-settings="animation">
<option value=""></option>
<option value="fade">Fade</option>
<option value="slide">Slide</option>
</select>
</label>
</div>
</script>
<script>
jQuery(document).ready(function() {
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
template: function(view){
return wp.media.template('gallery-settings')(view)
+ wp.media.template('custom-gallery-setting')(view);
}
});
});
</script>
<?php
});
?>
It's only small part as example since there's much more options to each gallery type. Since there's lot of options i want to display only one corresponding to selected gallery type. In this example i want to display #slider-settings only when #gallery-type select value == "slider".
As for checking select value i found this code:
<script>
function getval(sel) {
if (sel.value == "slider") {
alert(sel.value);
}
}
</script>
with return selected type value (along with onchange="" on #gallery-type select) and display it if it's set to "slider".
But when i want to hide #slider-settings like :
function getval(sel) {
if (sel.value != "slider") {
$('#slider-settings').hide();
}
}
it's not hiding at all.
You have to handle native update function. Update function is fired for each label when a single change is made. (media-views.js line 7232)
var oldUpdate = wp.media.view.Settings.Gallery.prototype.update;
wp.media.view.Settings.Gallery.prototype.update = function(key) {
if( key === "type" ) {
var value = this.model.get( key );
if ( value === "slider" ) {
setTimeout(function(){
jQuery("#slider-settings").css({"display":"block"});
});
} else {
setTimeout(function(){
jQuery("#slider-settings").css({"display":"none"});
});
}
}
// Initialize native code.
oldUpdate.apply(this, arguments);
};
Somehow i managed to get it work by hiding #slider-settings using not jQuery but javascript :
<script>
function getval(sel) {
if (sel.value != "slider") {
document.getElementById('slider-settings').style.display = 'none';
} else {
document.getElementById('slider-settings').style.display = 'block';
}
}
</script>
But to get value it's has to change (since it's onselect=) so first time i display settings it's not hiding. And as i searched there's seems to be not anything like onload= i can use with .
Or is there a way to just reselect it on load ?
I have a select tag with two options 'new' and 'edit'
when someone selects the 'new' option all the input tags in that form should be marked required and when someone selects 'edit' only a few should be marked required.
<select name="todo" id="todo" required>
<option value="">---</option>
<option value="new">Add</option>
<option value="edit">Edit</option>
</select>
Now I tried some functions but they don't seem to work
<script>
var todo = $('#todo option:selected').text();
if (todo == "new") {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
</script>
and
<script>
function req() {
var selectBox = document.getElementById('todo');
var userInput = selectBox.options[selectBox.selectedIndex].value;
if (userInput == 'new') {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
}
</script>
where
<select name="todo" id="todo" onchange="return req();" required></select>
just to be sure if it works I put a alert() method in the if condition, but that alert is never fired.
PS. one of the input tags is
<input type="text" id="Name" name="Name">
Thank you for your time in advance...
EDIT
As pointed out by #Maximillian Laumeister in second snippet there was a typo error (which I have corrected here). (sorry for that)
This should be ebough to get you going.
onchange detects whenever a different selection is made. Then based on what option is selected you perform the different instructions.
jQuery(document).ready(function(){
jQuery('#todo').on('change', function(event){
alert(this.value);
if(this.value === 'edit'){
}
else if(this.value === 'new'){
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="todo" id="todo" required>
<option value="">---</option>
<option value="new">Add</option>
<option value="edit">Edit</option>
</select>
In your script here you have a typo that throws a console error:
function req() {
var selectBox = document.getElementById('todo');
var userInput = selectBox.options[selectbox.selectedIndex].value;
if (userInput == 'new') {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
}
Where it says
selectBox.options[selectbox.selectedIndex].value
selectBox needs a capitalization like this:
selectBox.options[selectBox.selectedIndex].value
It seems to be working for me with that one change.
Also, since you asked, your first script isn't working because it needs to be bound to run when the select changes, just like with the first one. In addition, you need to use jQuery's val instead of text to get the value of an option tag. Here is a working version of your second script:
$("#todo").change(function () {
var todo = $('#todo option:selected').val();
if (todo == "new") {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
});
Try this:
$("select").change(function(){
if($(this).val() === "new")
$("#Name").attr("required","required");
});
You used the option text which is "Add" but in your if statement you compared it to the string "new". That's the reason your code didnt work as expected.
I would like to show a message when someone makes a specific selection from an HTML dropdown list. I have this so far:
<select name="configoption[56]" onchange="recalctotals()">
<option value="235"">USA</option>
<option value="206">Europe</option>
</select>
<span class="message">You selected USA!</span>
And the script:
$(document).ready(function() {
$('#configoption[56]').change(function() {
var selectedValue = $('#configoption[56]').find(":selected").text();
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
The above does not appear to be working for me, any suggestions? I would also like to be able to show the message on multiple selected values.
Well your .change function is specifically binded to an element with id="configoption[56]" So just add id to your select element as below
<select name="configoption[56]" id="configoption[56]" onchange="recalctotals()">
//Options
</select>
UPDATE
As per #T.J.Crowder's suggestion on invalid selector I would like to modify a slight change on the id. You can use configoption56 as id and write your select.change as follows:
<select name="configoption[56]" id="configoption56" onchange="recalctotals()">
<!--Options-->
</select>
.change
$('#configoption56').change(function() {
//other codes
});
$('#configoption[56]') is looking for an element with the id, not name, configoption[56] (or it would be, but the selector is invalid, you'd have to escape those brackets).
To use the name:
$('select[name="configoption[56]"]')...
Separately, you can just use val, you don't have to use find to get the selected option. You can also use toggle for show/hide:
$(document).ready(function() {
$('select[name="configoption[56]"]').change(function() {
$('.message').toggle($(this).val() == '235');
});
});
Re your comment about toggling based on || and two values:
$(document).ready(function() {
$('select[name="configoption[56]"]').change(function() {
var value = $(this).val();
$('.message').toggle(value == '235' || value == '123');
});
});
I should be doing it like this: http://jsfiddle.net/nmn17cr6/
HTML:
<select name="configoption[56]" id="configoption" onchange="recalctotals()">
<option value="1">Dummy</option>
<option value="235">USA</option>
<option value="206">Europe</option>
</select>
<span class="message">You selected USA!</span>
CSS:
.message {
display:none;
}
jQuery:
$(document).ready(function() {
$('#configoption').change(function() {
var selectedValue = $(this).val();
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
Your approach needs a little modification. All you had to do these changes
$(document).ready(function() {
$("select[name=configoption[56]]").change(function() { // change jquery selector for name
var selectedValue = $('#configoption[56]').val(); // and val to get the value
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
And with the same jQuery code. below has to be
<select name="configoption[56]" >
// onchange="recalctotals()"> was not required
I have HTML:
<select class="form" id="select" name="select">
<option>number1</option>
<option>number2</option>
</select>
<select name="organisation" class="form" id="cent" required>
<option value="1">UK</option>
<option value="2">SPAIN</option>
</select>
And another <select>:
<select class="form" id="ssip" name="organisation">
<option value="47" >US</option>
<option value="48">UKRAINE</option>
</select>
JQuery to show on 1 - first select on 2 - second
$(document).ready(function() {
$("#select").each(function () {
if (this.value == "1") {
$('#cent').show();
$('#ssip').hide();
}
if (this.value == "2") {
$('#cent').hide();
$('#ssip').show();
}
});
});
The problem is that when i choose option number1 appears first select with values 1 and 2 but when i select UK with value 1 and click submit it's sending value 47 , of second select's first option..
Try disabling the opposite select when toggling the selects. A control on a form will still be submitted if its display is set to none, however if the control is disabled it will not be submitted with the form.
$(document).ready(function() {
$("select").change(function () {
if (this.value == "number1") {
$('#cent').show().prop("disabled", false);
$('#ssip').hide().prop("disabled", true);
}
if (this.value == "number2") {
$('#cent').hide().prop("disabled", true);
$('#ssip').show().prop("disabled", false);
}
});
});
JS Fiddle: http://jsfiddle.net/bTJsH/
You are trying to loop one select box..
$("#select").each(function () {
There can be only one element with id "select". You should check like:
if ($("#select").value() == "1") { ..
And you don't even have values in your first select options..
i might suggest something like this
$('#select').on('change', function() {
var selected = this.selectedIndex;
$('.orgs').hide();
switch(selected) {
case 1:
$('#ssip').show();
break;
case 2:
$('#cent').show();
break;
}
});
here is an working example http://jsfiddle.net/pixelchemist/7ZGwy/
I want to hide a table row based on the value selected from a radio button.
Those radio buttons were created based on value selected from a dropdown list box.
Here is my code
HTML code for listbox
<select name="txtLT" id="LT" >
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Jquery
$(document).ready(function() {
$("#LT").change(function() {
var selVal = $(this).val();
$("#tblerow").html('');
if(selVal == 'c') {
$("#tblerow").append('<td><input type="radio" id="cmpof" name="cmpof" value="1" onclick="show()" />1 <input type="radio" id="cmpof" name="cmpof" value="2" onclick="hide()"/>2</td>');
}
});
});
Now if radio button 2 is selected, then the table row with tr2 should disappear.
Please help me to find the solution.
EDIT
I tried the following JavaScript, but it does not hide the row.
function show() { document.getElementById('sbjrow').style.display = 'block'; }
function hide() { document.getElementById('sbjrow').style.display = 'none'; }
Could you please suggest what is wrong here?
You can just use the hide and show function of jQuery like so:
$(function () {
$('#LT').change(function () {
if ($(this).val() == 'c') {
$('.radios').show();
} else {
$('.radios').hide();
}
});
$('input[name=cmpof]').change(function () {
if ($('#LT').val() == 'c' && $(this).val() == 'bar') {
$('#table tr').eq(1).hide();
} else {
$('#table tr').eq(1).show();
}
});
});
If you don't want the table row to show up by default, just do it with css.
JsFiddle example: http://jsfiddle.net/AX5TJ/1/
Updated version that may be closer to what you want: http://jsfiddle.net/AX5TJ/2/
Also be carefull, you have a syntax error in your script : when you define $("#LT").change(function() {, you have to close with });