JQuery Fade Hidden Field In And Out On Select Change - javascript

I currently have this jquery code that is supposed to show and hide a field based on the content on what is selected:
$('#State').on('change', function() {
var s = $('#State option:selected').text;
if(s !== "")
{
$('#showme').fadeIn();
}
if(s === "")
{
$('#showme').fadeOut();
}
});
Here is a working fiddle: https://jsfiddle.net/b0h6xd0t/
It will fade the field in, but it won't fade it back out for some reason. Any ideas?
Thanks!

In jQuery, text() is method. Methods, in order to work, require the use of the parentheses as shown below:
var s = $('#State option:selected').text(); // I added: ()
Note: In JavaScript, the empty string is considered false. So for neatness, you can turn your code into the following:
$('#State').on('change', function() {
var s = $('#State option:selected').text();
if(s) { // If it's true
$('#showme').fadeIn();
}
else { // If it's false
$('#showme').fadeOut();
}
});
Check out an updated version of your fiddle here.
As an alternative, as another answer has also correctly pointed, you can use:
$('#showme').fadeOut(500, function() {
$(this).text(s).fadeIn(500);
});
Putting s inside text() can also check its status, because according to the documentation s is:
The text to set as the content of each matched element. When Number or Boolean is supplied, it will be converted to a String representation.
In your case, as I pointed above, the empty string is considered false, so it fulfils the requirement.
Note: In this case, $('#showme') will fade out anyway, but if the value is true (not empty) it will fade back in. I'm not sure if you actually want that particular effect, so take a look at this fiddle as well.

Set the fade in as a function of the fade out, this allows the text to fade out, change, then fade back in. The if statements aren't really necessary. I also corrected the usage of text().
$('#State').on('change', function() {
var s = $('#State option:selected').text();
$('#showme').fadeOut(300, function() {
$(this).text(s).fadeIn(300);
});
});
Fiddle update

Try the following:
var s = $('#State option:selected').text();

Related

Using .after but only if the value does not exist

I am running this code to insert a HTML line after the id #wp_menu:
$(document).on('closing', '.remodal', function (e) {
$('.menu_name').each(function() {
$('#wp_menu').after('<div class="tag">' + $(this).val() + '</div>');
});
});
The problem is, every time I run this loop, I'll get duplicated values and this is not what I want. How can I check if the code was inserted before?
This is a simple example that may explain my problem: https://jsfiddle.net/vLqonqpk/
So when you click on "add" multiple times, it will add the same values over and over again.
You could do something like this:
arr = [];
$('button').click(function() {
$('ul input').each(function() {
if ($.inArray($(this).val(), arr) == -1) {
$('#wp_menu').after('<div class="tag">' + $(this).val() + '</div>');
arr.push($(this).val());
}
});
console.log(arr);
});
DEMO: https://jsfiddle.net/vLqonqpk/1/
So, create array of values, check if current val(s) from inputs are duplicated, and place just unique values. Of course, you can add additional checks for empty string, and give user some alerts/warnings (create else block for that purpose), if needed, etc, etc...
But this is basic idea which should work.
Simply isolate the jQuery selector and check its existence.
$(document).on('closing', '.remodal', function (e) {
$('.menu_name').each(function() {
var $wp_menu = $('#wp_menu');
var $tag = $wp_menu.next('.tag'); // .siblings() also works
// Now you check if it exists, and create it if not
if (!$tag.length)
$tag = $('<div class="tag">').insertAfter($wp_menu);
// Simply update the content, element will always exist
$tag.text($(this).val()); // .html() also works
});
});
I'm sure there's several ways to do it, this is just one of them.
I now realize your problem is not duplicating tags, but values. Basically you want a HashSet. Please accept sinisake's answer instead

Jquery change color condition

Hi everyone I have an issue with Jquery :
I have a multiple selection and the user can select one thing and it will copy the text into an input above. I would like that the text in the multiple selection that will be copied become red if the button is clicked so did you understand? I don't know how to do condition in Jquery, here is what I have done :
$(document).ready(function(){
if ($choose = true)
{
$("ok").click(function(){
$("droite").css({"background-color":"yellow"});
}
});
});
droite is an id and no it's not working but I would like to know how it works
choose is a function here it is :
var choose = function(bouton){
var lesoptions = $('#droite').find(":selected");
//lesoptions.remove();
$('#numLot').val(lesoptions[0].text);
};
Can I have your opinion ?
thanks
$("ok") is wrong. it should be $("#ok") or $(".ok") or whatever.
compare operator is == instead =
Try to use like below,
var $Choose;
//Assign value to $Choose as like true or false
$(document).ready(function(){
if ($choose)
{
//If you have id like ok use "#" or if class use "." instead
$("#ok").click(function(){
$("#droite").css({"background-color":"yellow"});
});
}
});
Hope this helps...
You have to use . selector before class names and # before id names.
Read about selectors: jQuery Selectors
Since choose is a function so, you will have to return something and check if it returns true/false. So make your function like this:
function choose(bouton){
var something = /*your return value*/; //Put your return value here
var lesoptions = $('#droite').find(":selected");
$('#numLot').val(lesoptions[0].text);
return something; //something is what you want to be returned by function
};
If $choose is not defined while you are putting it in if condition then you will not get proper working.
If #ok is added dynamically then use delegation using .on.
You should put code like this:
$(document).ready(function(){
var $choose = choose(bouton);
if ($choose)
{
$("#ok").on("click",function(){ //Again not mentioned what is ok, still like you told I assume it id
$("#droite").css("background-color","yellow");
});
}
});

jQuery - set data() variable from $(this).val()

I have an e-mail form on my website, with four fields. Three text inputs and a text area. Each field has a default value attribute which serves as its label. I would like these values to be automatically unset/reset on their element's focus and focusout events.
I have the following JavaScript/jQuery code, which creates this behaviour.
$('input,textarea').data('default', "bleh");
$('input,textarea').focus(function() {
if($(this).val() === $(this).data('default')) {
$(this).val('');
}
});
$('input,textarea').focusout(function() {
if ($(this).val() === '')
{
$(this).val($(this).data('default'));
}
});
My problem comes in the storing of the initial data('default') attribute. I had tried using .data('default', $(this).val())... but apparently that is illegal and $(this) is not recognized.
I have tried to find a clean jQuery way to iterate over each of the elements, but I can't seem to find one.
Is there an easy way, using jQuery, to achieve what I want?
Unless I'm mistaken, there's no reason to be setting data properties on the element, you can make use of the elements defaultValue property:
$('input, textarea').focus(function() {
if (this.value === this.defaultValue) {
this.value = '';
}
});
$('input, textarea').focusout(function() {
if (!$.trim(this.value).length) {
this.value = this.defaultValue;
}
});
Here's a fiddle
There is no this, because you're not in a callback. You'll have to iterate over each matched element, setting their default one at a time.
The "clean jQuery way" is simply with each:
$('input,textarea').each(function () {
$(this).data('default', $(this).val());
});
You need iterate through the input elements and then set the value to data using .each()
$('input,textarea').each(function(){
var $this = $(this);
$this.data('default', $this.val())
});

how to hide submenu after click

I'm creating a dropdown menu for mobile site
http://gthost.dyndns.org/kudu/en/
when I click on My Account and click on Who we are, submenu still show,,
I Want to hide it after I click on the link.
this is JavaScript code
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j(".account").click(function () {
var X = $j(this).attr('id');
if (X == 1) {
$j(".submenu").hide();
$j(this).attr('id', '0');
} else {
$j(".submenu").show();
$j(this).attr('id', '1');
}
});
//Mouseup textarea false
$j(".submenu").mouseup(function () {
return false
});
$j(".account").mouseup(function () {
return false
});
//Textarea without editing.
$j(document).mouseup(function () {
$j(".submenu").hide();
$j(".account").attr('id', '');
});
});
i would try using:
$('.submenu').css({display:"none"});
instead of .hide();
Two things strike me as odd here.
Why are your ID's integers - valid names start with [a-z_] etc.
Why are you changing the ID? An ID is meant to be a unique identifier and should persist as long as the element does. If you wish to store information about the state of an element within the element itself, then perhaps look into data attributes.
Without seeing your HTML structure everyone is going to be guessing but rather than whatever you are trying to do with the ID's it looks like you could logically use jQuery.toggle:
$j(".account").click(function(){
$j(".submenu").toggle();
});

Toggle State Incorrect in jQuery

I am using jQuery to show / hide lists, but it takes two clicks on a link instead of just one to show the list. Any help?
jQuery.showList = function(object) {
object.toggle(function(){
object.html("▾");
object.siblings("ul.utlist").show("fast");
}, function(){
object.html("▸");
object.siblings("ul.utlist").hide("fast");
});
}
$(document).ready(function() {
$("#page").click(function (e){
e.preventDefault();
var target = $(e.target);
var class = target.attr("class");
if(class == "list")
$.showList(target);
});
});
It's probably because toggle thinks the object is already visible, and executes the 'hide' clause.
edit:
Eh.. quite circular logic; how else would a user be able to click on it :-)
PS. You changed the logic from is-object-visible? to is-list-visible? in your own reply.
Not sure if this will fix everything but stop using reserved keywords.
Change variable class to something like c. And Change object variable to at least obj.
Doing the following worked well
jQuery.showList = function(obj) {
var list = obj.siblings("ul.utlist");
if(list.is(":visible")){
obj.html("▸");
list.hide("fast");
} else {
obj.html("▾");
list.show("fast");
}
}

Categories