Develop Reference

JQuery toggle doesn't work on change when I try to set css

I have a toggle button that works only once. This is the portion of script:
$('#toggle').change(function(){
var mode= $(this).prop('unchecked');
if(mode = true) {
$('.container').css('display','block');
$('.container').hide().delay(500).fadeIn(1000);
$('#map').css('filter','grayscale(100%)');
} else {
$('.container').css('display','none');
$('.container').delay(500).fadeOut(1000);
$('#map').css('filter','grayscale(0%)');
}
});
The first part of If condition is fired, not the Else part. I don't understand why. Some help?

There are two errors in you code.
1) There is no such property as :unchecked, you should use :checked property
2) You have written if(mode = true) not if(mode == true), so you didn't check equality, you assign new value
There is right code:
$('#toggle').change(function(){
var mode= $(this).prop('checked');
console.log(mode);
if(mode == true) {
$('.container').css('display','block');
$('.container').hide().delay(500).fadeIn(1000);
$('#map').css('filter','grayscale(100%)');
} else {
$('.container').css('display','none');
$('.container').delay(500).fadeOut(1000);
$('#map').css('filter','grayscale(0%)');
}
});

A couple issues here. #AidOnline01 mentioned the first two.
Property unchecked doesn't exist, use checked instead.
if (mode = true) statement assigns mode a value instead of evaluating equality. Use if (mode == true)
Fade out function doesn't wait for animation to complete before assigning. Use a callback to call $('.container').css('display','none');
I've made a JSFiddle to demonstrate:
https://jsfiddle.net/g3y27o5L/4/

Disallow unchecking of all checkboxes in angularJS

I'm using AngularJS directive for list of checkboxes checklist-model but I need to keep at least one check box checked at all times.
I've changed the checklist-model.js by adding an if:
watch if(current.length > 1)
before removing a check:
scope.$watch(attrs.ngModel, function(newValue, oldValue) {
if (newValue === oldValue) {
return;
}
var current = getter(scope.$parent);
if (angular.isFunction(setter)) {
if (newValue === true) {
setter(scope.$parent, add(current, value, comparator));
} else {
if(current.length > 1)
{
setter(scope.$parent, remove(current, value, comparator));
}
}
}
if (checklistChange) {
checklistChange(scope);
}
});
The problem is that the UI has already changed to unchecked while the model did not change.
Anyone has an elegant suggestion (preferably without JQuery) on how to change the checkbox back to "checked" state, or even better to catch it before it changed to checked?
JSfiddle here, try to uncheck all and see that when the check boxes are all unchecked (what I'm trying to prevent) the model stays not empty (which is good but not enough)

This probably comes from asynchronous nature of angular and the library you are using. What I could find so far is some dirty workaround like this (jsfiddle): create an event where you track the clicks on input and do the following:
$scope.onclick = function(evt) {
if ($scope.user.roles.length === 1 && prevLength === 1) {
evt.preventDefault();
}
prevLength = $scope.user.roles.length;
};
then add it it to your element
ng-click="onclick($event)"
I don't say it's perfect but it works

A colleague of mine suggested to disable the checkbox once it's the only one selected, that way you both prevent the changing of the module (therefore the directive does not even need to change) and the UX is better as the user understands he can't uncheck it:
<input type="checkbox" checklist-model="user.roles" checklist-value="role.id" ng-disabled="shouldDisable(role.id)"> {{role.text}}
$scope.shouldDisable = function(roleId) {
var isDisabled = false;
if($scope.user.roles.length === 1) {
isDisabled = $scope.user.roles.indexOf(roleId) !== -1;
}
return isDisabled;
}
See answer in this JSfiddle

At this moment, the component does not support this, but there's a discussion to implement minlength/maxlength https://github.com/vitalets/checklist-model/issues/15 and then this would be simply implemented by using checklist-minlength=1.
I also edited your proposal to implement checklistBeforeChange. I will try to handle this too in the next batch. Implemented in v0.8.0.

A nicer version to #ozba answer using the array.some function:
public atLeastOneRowEnabled(row): boolean {
//at least one row is visible except the current line
return !this.rows.some(rowIterator => rowIterator.logical_name !== row.logical_name && rowIterator.isVisible);
}

If else condition not working in jQuery

I am using if else condition in jQuery to handle check boxes.
My condition is that at least one check box is selected and after that alert if condition is running and not the other one. Here is my code
$(document).ready(function() {
$('#outer_menu').click(function() {
var $fields = $(this).find('input[name="mychoice"]:checked');
if (!$fields.length) {
alert('You must check at least one box!');
if(".a:checked "){
$(".language").find(".translate-language").toggleClass("translate-language translate-language_show");
} else if (".a_orignal:checked") {
$(".language").find(".orignal-language_hide").toggleClass("orignal-language_hide orignal-language");
} else {
alert('chose one');
}
return false;
}
});
});
our else if condition is not working when if condition false

I think what you are trying to do is to check whether the element with class a or a_original is checked, for that you need
if ($(".a").is(":checked ") {
$(".language").find(".translate-language").toggleClass("translate-language translate-language_show");
} else if (".a_orignal").is(":checked") {
$(".language").find(".orignal-language_hide").toggleClass("orignal-language_hide orignal-language");
} else {
alert('chose one');
}
use .is() to check whether the element satisfies the given selector
you need to fetch the jQuery object for the target element

Look at this line of code:
if(".a:checked ")
I believe it should be:
if ($(".a:checked "))
That might not be the end of your issues though, unless a is a class rather than you intending to select links.
Same problem here:
else if (".a_orignal:checked")

Change to:
if($(".a").is(":checked")){
and:
else if ($(".a_orignal").is(":checked")){

The .prop() method gets the property value for the first element in the matched set.
Write:
if(".a").prop("checked"){
$(".language").find(".translate-language").toggleClass("translate-language translate-language_show");
}
else if (".a_orignal").prop("checked"){
$(".language").find(".orignal-language_hide").toggleClass("orignal-language_hide orignal-language");
}

If select input equals value do this, if it is changed remove those changes

I have a select box called "requestHistoryRequestType". I'm trying to write some jQuery so that when the value of that select box is changed I call a function that adds a class and attribute to a field and appends a span to the field that I pass in as a parameter.
The problem is if a user chooses EXPAPP or EXPDEN but then changes their selection to NA it should remove the added stuff from the previous fields and add the same stuff to a different field. Kinda hard to explain, but ask questions away! I'm kinda new to writing complex jQuery like this.
The function that does the adding classes and such:
function requiredField(requiredField) {
$(requiredField).parent().addClass('has-error');
$(requiredField).attr('data-rule-required', true);
$("label[for='" + requiredField.replace('#', '') + "']").append("<span style='color:#b94a48;' class='has-error has-tooltip' data-placement='right' title='Required Field'>*</span>");
}
The actual on change listener:
//Validations for EXPAPP, EXPDEN, and NA
$("#requestHistoryRequestType").on("change", function() {
if ($("#requestHistoryRequestType").val() === "EXPAPP" || $("#requestHistoryRequestType").val() === "EXPDEN"){
requiredField("#requestHistoryVerbalDateTime");
requiredField("#requestHistoryWrittenDateTime");
} else if ($("#requestHistoryRequestType").val() === "NA") {
requiredField("#requestHistoryComments");
}
});
Thanks Stack!

Create a function that would remove the added stuff from all fields and call it before requiredField() calls:
function removeRequiredFields()
{
var $fields = $("#requestHistoryVerbalDateTime, #requestHistoryWrittenDateTime, #requestHistoryComments");
$fields.parent().removeClass('has-error');
$fields.attr('data-rule-required', false);
$fields.each(function() {
$("label[for='"+$(this).attr('id')+"']").find("[title='Required Field']").remove();
});
}
Or you can pass $fields from the event handler to removeRequiredFields() instead of hardcoding it there, for added flexibility.

I would just have a separate function for when you select a "NA" rather then trying to build that functionality into the same function.
I'll rewrite your event handler to make it a bit cleaner as well (IMO).
//Validations for EXPAPP, EXPDEN, and NA
$("#requestHistoryRequestType").on("change", function() {
var selectedVal = $(this).val();
if (selectedVal === "EXPAPP" || selectedVal === "EXPDEN"){
requiredField("#requestHistoryVerbalDateTime");
requiredField("#requestHistoryWrittenDateTime");
} else if (selectedVal === "NA") {
requiredField("#requestHistoryComments");
}
});
This way you are not hitting the DOM a potential 3 time to test your conditions every time an event is triggered. A minor change but probably a useful one as you get into more complex and larger jQuery selectors.
Edit: If you feel you MUST do it in one function then you can call the function with both elements you want to append
function requiredField(requiredField1, requiredField2) {
if (requiredField2 != null){
$(requiredField1,requiredField1).parent().addClass('has-error');
$(requiredField1,requiredField1).attr('data-rule-required', true);
var requiredLabel = "<span style='color:#b94a48;' class='has-error has-tooltip' data-placement='right' title='Required Field'>*</span>"
$("label[for='" + requiredField1.replace('#', '') + "']").append(requiredLabel);
$("label[for='" + requiredField2.replace('#', '') + "']").append(requiredLabel);
}
else {
//remove multiple element classes and add it to the single one representing the "NA"
}
}
This is based on you only ever having one case where you would be passing a single "requiredField" on a case of a "NA"

Javascript loop with dynamic jquery val() not being picked up

I'm trying to pick out the value of an input box using jquery.
No probs there
$('#id_of_my_input_box_1').val();
But I need several so decided to put them into a loop:
============
var config_total_instances = '==some value='
for (var x = 1; x <= config_total_instances; x++) {
if (isset($('#id_of_my_input_box_'+x).val())) {
alert($('#id_of_my_input_box_'+x).val());
}
}
============
If I submit the form and I've got say 10 input boxes, the code above doesn't alert a value if the relevant input box has value.
I'm using a function below to check for values.
============
function isset(my_variable) {
if (my_variable == null || my_variable == '' || my_variable == undefined)
return false;
else
return true;
}
============
Am I missing something vital..? :-(
Addition: I shoudl add that I'm askign why I don't get the value of
$('#id_of_my_input_box_'+x).val()
echoed out in my alert box

Extending #Faber75's answer. You can set a class name for all your text element and then use something like this
$("input:text.clsname").each(function(){
if (isset(this.value)) {
alert(this.value);
}
});
In your current code if you are assigning a string to config_total_instances then it will not work.

don't consider my message an answer, more of a tip.
For a simplier code you could consider adding a class to the textboxes you need to check.
For example adding to all the inputs you need to check the class="sample" you could the use the jquery selector $(".sample") , returning you all the items and then you could simply do
$(".sample").length to count the items and $(".sample")[0].val() (or similar) to get/test values.
Cheers

Have you tried this? (note that there are three =)
if (my_variable === null || my_variable == '' || my_variable === undefined)
As an alternative to this try
if (typeof(my_variable) == 'null' || my_variable == '' || typeof(my_variable) == 'undefined')

Maybe I'm misunderstanding, but can't you just get all the <input>'s in a <form> that aren't :empty if that's the end goal of what you're trying to accomplish?
$('form#some_id input:not(:empty)').each(function () {
// do something with $(this).val() now that you have
// all the non-empty <input> boxes?
});
Or if you're just trying to tell if the user left some <input> blank, something like:
$('form#some_id').submit(function (e) {
if ($(this).find('input[type="radio"]:not(:checked), input[type="text"][value=""], select:not(:selected), textarea:empty').length > 0) {
e.preventDefault(); // stops the form from posting, do whatever else you want
}
});
http://api.jquery.com/category/selectors/form-selectors/