In this script below, I set an element to visible or hidden as you'll can see. However, once .closeAdd is shown it will not hide if the script comes to the second part in the if statement. I've noticed that jQuery sets it to display:block when it uses show(). Any idea how I can set this right?
if(type === 'user' && action === 'add') {
if($('.closeAdd').is(':hidden')) {
$('.closeAdd').show();
}
} else { //If it's visible and it comes to this part, it will not hide...
if($('.closeAdd').is(':visible')) {
$('.closeAdd').hide();
}
}
Since display is being updated you can check it in your function as it follows:
if(type === 'user' && action === 'add') {
if($('.closeAdd').css("display") == 'none') {
$('.closeAdd').show();
}
} else {
if($('.closeAdd').css("display") == 'block') {
$('.closeAdd').hide();
}
}
Related
I have the following code and the callback doesn't seem to work properly. My understanding is that if the username is undefined or blank then the #username-error div should show and the error class should be added to the get added to the username input. Only once all of that is done should the alert get fired. However, when I look in my browser, the error div does not show, and the alert gets triggered. So clearly the class 'error' is getting added, and therefore it's reasonable to suggest that the #username-error div is having the .show() function called upon it but it sure does't look like it. Any help you can give me getting the alert to fire only once the #username-error div has appeared would be greatly appreciated.
<script type="text/javascript">
$(document).ready(function() {
$("input[name='username']").bind("blur", function() {
validateUsername(myFunction);
});
$("input[type='submit']").bind("click", function() {
validateUsername(myFunction);
});
$("#username-error").hide();
$("#username-success").hide();
});
function myFunction() {
if ($(".error").length > 0) {
alert("errors on page");
return false;
}
}
function validateUsername(callback) {
var $username = $("input[name='username']");
if (typeof $username.val() === "undefined" || $username.val() === "") {
$("#username-error").show();
$("#username-success").hide();
$username.addClass("error");
} else {
$("#username-error").hide();
$("#username-success").show();
$username.removeClass("error");
}
if (callback) {
callback();
}
}
</script>
You need to add a return the button click
$("input[type='submit']").bind("click", function() {
return validateUsername(myFunction);
});
and you should return true
function myFunction() {
if ($(".error").length > 0) {
alert("errors on page");
return false;
}
return true;
}
and add return in the validate method
function validateUsername(callback) {
var $username = $("input[name='username']");
if (typeof $username.val() === "undefined" || $username.val() === "") {
$("#username-error").show();
$("#username-success").hide();
$username.addClass("error");
} else {
$("#username-error").hide();
$("#username-success").show();
$username.removeClass("error");
}
if (callback) {
return callback();
}
}
but the use of the callback in this really does not make much sense.
I'm trying to hide/show sections of a page using the following script:
$(function () {
$('.open').on('click', function () {
var contentType = $(this).attr('id');
if (contentType == "all") {
$('.content-div').show();
} else if (contentType == "train" || "manual") {
$('.content-div.' + contentType).show();
$('.content-div:visible:not(.' + contentType + ')').hide();
} else if (contentType == "close") {
$('.content-div').hide();
} else {
$('.content-div.' + contentType).toggle();
}
});
});
A jsfiddle example is here with html
The issue is with the final line in the else part - this works correctly (show/hide the relevant div(s) with the associated class) when outside the if-else statement but doesn't work in the else section - the div appears the first time a numbered button is clicked, but doesn't disappear on reclicking.
What am I doing wrong? Many thanks.
Replace:
} else if (contentType == "train" || "manual") {
with:
} else if (contentType == "train" || contentType == "manual") {
"manual" is always evaluated as true therefore this whole else-if branch is evaluated as true. See MDN for more details.
I want to show div whose id is deliveryto1 when if condition is true it doesn't show deliverto1 div. This div(#deliverto1) is always showing in else part.
$('#delivery').change(function () {
if ($(this).val() == 1) {
$('#deliverto1').show();
$('#deliverto').hide();
} else {
$('#areas').show()
$('#deliverto').show();
}
});
You forgot to hide div in else part. Use .hide() in else part as shown below
$('#delivery').change(function () {
if ($(this).val() == 1) {
$('#deliverto1').show();
$('#deliverto').hide();
} else {
$('#areas').show()
$('#deliverto').show();
$('#deliverto1').hide();
}
});
I am trying to show a field, which is hidden, but shows up when 2 previous fields are filled.
$('#planner-locatie-ehv').change(function() {
if ($("#planner-locatie-ehv").val() == "Requirement1" && $("#planner-stad").val() == "Requirement2") {
$("#hideentertainment").show();
}
else {
$("#hideentertainment").hide();
}
});
But the field which is called #hideentertainment won't show up, although the previous fields has Requirement1 and Requirement2, when i use the OR statement ||, it does work, when 1 value is filled in it shows up. How can i make this possible?
You need to listen on both elements, not just the first one.
$('#planner-locatie-ehv, #planner-stad').change(function() {
var isValid = $("#planner-locatie-ehv").val() == "Requirement1" && $("#planner-stad").val() == "Requirement2";
$("#hideentertainment").toggle(isValid);
});
#dandavis is correct. It's only watching the first one for change. You can add the other to your selector to fix it.
$('#planner-locatie-ehv, #planner-stad').change(function() {
if ($("#planner-locatie-ehv").val() == "Requirement1" && $("#planner-stad").val() == "Requirement2") {
$("#hideentertainment").show();
}
else {
$("#hideentertainment").hide();
}
});
Here is my jQuery Code snippet.
$("#firstBankDetail").hide();
$("#secondBankDetail").hide();
$("#thirdBankDetail").hide();
$("#fourthBankDetail").hide();
$("#noOfBankDetails").change(function(){
var value = $(this).val();
if(value == 0) {
$("#firstBankDetail").hide();
$("#secondBankDetail").hide();
$("#thirdBankDetail").hide();
$("#fourthBankDetail").hide();
}
else if(value == 1) {
$("#firstBankDetail").show();
$("#secondBankDetail").hide();
$("#thirdBankDetail").hide();
$("#fourthBankDetail").hide();
}
else if(value == 2) {
$("#firstBankDetail").show();
$("#secondBankDetail").show();
$("#thirdBankDetail").hide();
$("#fourthBankDetail").hide();
}
else if(value == 3){
$("#firstBankDetail").show();
$("#secondBankDetail").show();
$("#thirdBankDetail").show();
$("#fourthBankDetail").hide();
}
else if(value == 4){
$("#firstBankDetail").show();
$("#secondBankDetail").show();
$("#thirdBankDetail").show();
$("#fourthBankDetail").show();
}
});
So when body is loaded all the div's are hidden . #noOfBankDetails is a dropdown <select/> element. Based on its values the divs are hidden or shown. I have completed the javascript validations for all the div's.
Now i face an issue that validation fails for those div's those are hidden too.
Say if only #firstBankDetail is visible even then validation will fail for child elements of #secondBankDetail , #thirdBankDetail and #fourthBankDetail.
Pseudo code of what i want to achieve is
IF `#firstBankDetail` Visible
Apply validations of `#firstBankDetail` only
IF `#firstBankDetail` and `#secondBankDetail` visible
Apply validations of `#firstBankDetail` and `#secondBankDetail` only
How can i achieve it using javascript ?
Use jQuery's :visible selector:
$('#firstBankDetail:visible')
If your validation method was simply validate(), you'd use:
$('#firstBankDetail:visible').validate();
To apply the validation on all of your visible elements at once you'd look to the parent of the #firstBankDetail, #secondBankDetail, etc. So for instance if your HTML looked like this:
<div id="parent">
<input id="firstBankDetail"/>
<input id="secondBankDetail"/>
</div>
To call the validate() method on all visible elements within the parent, you could simply use this:
$('#parent').children(':visible').validate();
Try it like,
$("#firstBankDetail,#secondBankDetail,#thirdBankDetail,#fourthBankDetail").hide();
$("#noOfBankDetails").change(function(){
var value = $(this).val();
if(value == 0) {
$("#firstBankDetail,#secondBankDetail,#thirdBankDetail,#fourthBankDetail").hide();
}
else if(value == 1) {
$("#firstBankDetail").show();
$("#secondBankDetail,#thirdBankDetail,#fourthBankDetail").hide();
}
else if(value == 2) {
$("#firstBankDetail,#secondBankDetail").show();
$("#thirdBankDetail,#fourthBankDetail").hide();
}
else if(value == 3){
$("#firstBankDetail,#secondBankDetail,#thirdBankDetail").show();
$("#fourthBankDetail").hide();
}
else if(value == 4){
$("#firstBankDetail,#secondBankDetail,#thirdBankDetail,#fourthBankDetail").show();
}
});
Apply a class bankDetail to your fields #firstBankDetail,#secondBankDetail,#thirdBankDetail,#fourthBankDetail
//add this code in your script
$(".bankDetail:visible").validate();