When the page is loaded (the first dropdown (div StatusID) is dynamically populated from the mysql db) or the user selects Unemployed - EI from the first dropdown box, the div status_sub_6 shows the second select statement.
My .hide .show function activates fine on change but the function hides the second dropdown list on the loading of the page even if the dynamically populated values of the first select (StatusID) meet the compare criteria.
I'm sure that I need an onload function which overrides the following .js code but would really appreciate a bit of help in composing the additional code.
JavaScript:
$(document).ready(function(){
$('#status_sub_6').hide();
$('#StatusID').change(function () {
if ($('#StatusID option:selected').text() == "Unemployed - EI"){
$('#status_sub_6').show();
}
else {
$('#status_sub_6').hide();
}
});
});
You can do this by triggering a change event right after load.
$(document).ready(function(){
...
// your current code
...
$('#StatusID').trigger('change'); // trigger a change
});
try:
$(function() {
$('#status_sub_6').hide();
$(document).on('change', '#StatusID', function () {
if ($('#StatusID option:selected').text() == "Unemployed - EI"){
$('#status_sub_6').show();
}
else {
$('#status_sub_6').hide();
}
});
$('#StatusID').change();
});
You could also do this:
$(document).ready(function(){
if ($('#StatusID option:selected').text() == "Unemployed - EI"){
$('#status_sub_6').hide();
}
$('#StatusID').change(function () {
if ($('#StatusID option:selected').text() == "Unemployed - EI"){
$('#status_sub_6').show();
}
else {
$('#status_sub_6').hide();
}
});
});
or a bit more elegant solutions:
$(document).ready(function () {
toggleSub();
$('#StatusID').change(function () {
toggleSub();
});
});
function toggleSub() {
if ($('#StatusID option:selected').text() == "Unemployed - EI") {
$('#status_sub_6').hide();
}
else {
$('#status_sub_6').show();
}
}
Related
I have 3 Jquery function. That is first function which allows to choose only one checkbox
$('input[type="checkbox"]').on('change', function () {
$('input[type="checkbox"]').not(this).prop('checked', false);
});
That is second function which allows to choose a checkbox by clicking a row.
$(document).ready(function () {
$('.boekTable tr').click(function (event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
That is third function which higlights the selected row.
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
} else {
$(this).closest('tr').removeClass("highlight_row");
}
});
});
Problem: I select a row then third function highlights it and when i select another row, it keeps on highlighting till i click the highlighted row. How can i fix that? Should i use another function instead of closest? Thanx.
It's a straight-forward change to make it perform the way you want...
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
// this will remove all highlights before adding a new one
$(this).closest('table').find('tr').removeClass("highlight_row");
$(this).closest('tr').addClass("highlight_row");
} else {
$(this).closest('tr').removeClass("highlight_row");
}
});
});
Update third to something like that:
$("input[type='checkbox']").change(function (e) {
$(this).closest('table').find('tr').removeClass('highlight_row');
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
}
});
remove the highlight_row from the rest
$("input[type='checkbox']").change(function (e) {
$('tr').removeClass("highlight_row");
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
}
});
});
You need to remove class for other trs. You can use siblings function.
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
$(this).closest('tr').siblings().removeClass("highlight_row");
} else {
$(this).closest('tr').removeClass("highlight_row");
}
});
});
my code is not working and I have no idea why.
Here is a demo
$(".color").click(function() {
$(".color-picker").fadeIn(function() {
var colorClick = $(".color-box").click();
var timeOut = window.setTimeout(1000);
if (colorClick || timeOut) {
$(".color-picker").hide();
}
});
});
EDIT: To clear the confusion - I want to hide the box with the colors when the user clicks on one of them $(".color-box") or on the dropdown $(".color-picker"), or if he doesn't the box should hide anyway in a couple of seconds. Sorry, I thought it was clear from my code.
EDIT 2: Using #AlvinMagalona's code I tried to add the timeout functionality with no success demo
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").fadeIn(600);
})
.setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},3000);
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
OR I think this way is much better, but still doesn't function (demo):
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").fadeIn(600);
function timeOut() {
setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},3000);
}
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
The other part of the code works fine, but I'm not embedding the setTimeout function properly. Can somebody help me with that? Thanks!
EDIT 3:
I made it work: (demo)
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").toggle(200);
var timeOut = setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},6000);
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
This one has everything I needed - when you open the drop down and click on color the box hides, when you click on the dropdown again the box hides and if you don't do any of that the box hides after couple of seconds. I hope this code will be helpful for others as well. Thanks for your help, everybody!
Try with -
$(document).ready(function() {
$(".color p").click(function() {
$(".color-picker").fadeIn();
});
$(".color-box").on('click', function() {
$('.color-picker').fadeOut();
})
});
It will simply open the div containing the color boxes and on clicking on that boxes will hide it with transition effect.
Are you trying to hide the box after you select a color? If you do, try this code.
$(document).ready(function() {
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").fadeIn(600);
setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},3000);
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
});
So to answer my own question if you want to have the simplest drop-down menu where you pick something and then the drop-down box hides itself. Here is a demo, here is the code:
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").toggle(200);
var timeOut = setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},6000);
console.log("timeOut");
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
Special thanks to #AlvinMagalona, I've rewritten the code he proposed to make it work for my situation.
$(document).ready(function(){
$("#start_quiz").click(function(){
$("#start_quiz").fadeOut(0);
$("#quiz_game").fadeIn('slow');
$("#answer_button").click(function(){
if($("#test").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#correct_answer').fadeIn('slow');
});
};
});
});
});
I have managed to get this jQuery code to work so that if the correct answer is in my form, it will fade out and display some text. I was wondering how I could design this so if any of the other four radio buttons were pressed, it could instead display other text (currently nothing happens). Thanks in advance for any help.
$(document).ready(function () {
$("#start_quiz").click(function () {
$("#start_quiz").fadeOut(0);
$("#quiz_game").fadeIn('slow');
$("#answer_button").click(function () {
if ($("#test").is(":checked")) {
$(".questions").fadeOut(200, function () {
$('#correct_answer').fadeIn('slow');
});
} else {
/* YOU WOULD PUT CODE HERE FOR INCORRECT ANSWER */
}
});
});
});
http://jsfiddle.net/24DeT/
if($("#test").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#correct_answer').fadeIn('slow');
});
}
else if($("#testotherone").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#otherone_answer').fadeIn('slow');
});
}
else if($("#testothertow").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#othertow_answer').fadeIn('slow');
});
}
Here is script i wrote to achive searchable check box list but for some reason it is not acting please help!
It should search Regardless of Case and empty lines should be removed
$(function() {
$('#filter').on('keyup', function() {
alert('h');
var query = this.value;
$('.checkboxLabel').each(function(i, elem) {
if (elem.value.indexOf(query) != -1) {
$(this).closest('label').show();
}else{
$(this).closest('label').hide();
}
});
});
Here is the fiddle http://jsfiddle.net/xHxWt/
UPDATE : Thanks Everyone : Down is the fully working fiddle posted it if anyone needs the same
http://jsfiddle.net/xHxWt/9/
You missed the jQuery plugin (which you already found out).
Also, a label doesn't have a value, you need to use .text() instead.
Try:
$(function () {
$('#filter').on('keyup', function () {
var query = this.value;
$('.checkboxLabel').each(function (i, elem) {
if ($(this).text().indexOf(query) != -1) {
$(this).show();
$(this).prev(':checkbox').show();
} else {
$(this).hide();
$(this).prev(':checkbox').hide();
}
});
});
});
Fiddle
Update:
Hide / show checkbox as well.
You can try this code to hide label as well as checkbox
$(function() {
$('#filter').on('keyup', function() {
var query = this.value;
$('.checkboxLabel').each(function(i, elem) {
if ($(this).text().indexOf(query) != -1) {
$(this).closest('label').show();
$(this).prev().show();
} else {
$(this).closest('label').hide();
$(this).prev().hide();
}
});
});
});
There is also plugin for multiple selection or single.you can try this one also.
http://harvesthq.github.io/chosen/
MY PROBLEM
jQuery(document).ready(function () {
if ($('input.pokazkontakt').prop(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
}
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Demo
2nd part of JS is working (toogle), but i want to check first if checkbox is checked and hide the div or show. Where is a problem?
Try this:
jQuery(document).ready(function () {
$('input.pokazkontakt').each(function(){
if ($(this).is(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
}
});
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Use your logic reversely when you set display:none and display:block.
Use .is to check for checked state.
Use .each to iterate all your checkboxes
DEMO
You can use .is()
if($('input.pokazkontakt').is(':checked'))
instead of if($('input.pokazkontakt').prop(':checked'))
Demo