I'm using this: $('form').dirtyForms(); from https://github.com/snikch/jquery.dirtyforms to check if my form is dirty. However, on my page I have some dropdown's that are simply used for filtering (they should not make my form "dirty"). Right now when I select any of these drop down's it causes my form to become dirty. Using jquery.dirtyforms (I read their docs but do not see how), how do I exclude selectors (dropdowns, textboxes, etc.) maybe via a class name so that they do not mark the form as dirty.
I tried various things like assigning these dropdowns / filters a class called ignoreDirty then in my jquery I did this:
$('form').dirtyForms().ignoreClass('ignoreDirty');
This produces an error, so I must be doing something wrong.
Note I've also tried setting it via property:
$('form').dirtyForms({ ignoreClass : "ignoreDirty" });
But this still makes my form dirty for any control whose class name is still ignoreDirty
Please note these filters cause postbacks but lets say I go to my form and have not made a single change. I start clicking on these filters and the minute they post back this happens:
What can one say, the plugin code makes almost no sense to me :D However to make it quickly work for ignoring select boxes, you could replace its onSelectionChange with following
Original function
var onSelectionChange = function() {
$(this).dirtyForms('setDirty');
}
New version
var onSelectionChange = function () {
//this is the new line. self explanatory
if ($(this).hasClass($.DirtyForms.ignoreClass)) return;
$(this).dirtyForms('setDirty');
}
After this you should rely on the original developer for a proper fix. I just posted this as an answer because of space in comments
There seems to be 2 different issues here.
First of all, you are attempting to set the ignoreClass to ignoredirty. ignoredirty is the default value, so there is no reason to set it. However, if you do need to set it to something else, you can do so using the syntax:
$.DirtyForms.ignoreClass = 'my-ignore-class';
Secondly, in version 1.0.0 the ignoreClass only worked on Hyperlinks. This behavior has been amended to work with input and selection elements in version 1.1.0.
In version 1.2.0, you can now also set the ignoreClass to parent container elements to ignore input or clicks from any element within.
Related
comboBox.trigger(´chosen:updated´) what does this do in Jquery?
Anyone can give an example?
I dont see any effect or utility.
I really search over 20 links over google and I cannot find the documentation.
---- correcions ----
´chosen:update´ to ´chosen:updated´
comboBox.trigger(´chosen:update´)
comboBox
You will have a variable that points to a jquery collection containing a select, likely setup using
let comboBox = $("#mySelect");
.trigger
Raises the named event
'chosen:update'
the name of the event to raise.
In this case, the event is namespaced, this just allows it to be specifically looked for in the chosen namespace. It could also be .trigger("updated") and chosen2 will likely pick it up - this stop other code such as .on("update".. from triggering.
It also appears to be a typo as the event (depending on the version of chosen2) should be updated.
All together, you call this code when you change the value of the underlying select, eg:
var comboBox = $("#mySelect");
comboBox.val("newValue");
comboBox.trigger(´chosen:update´)
when your select has been converted to a select2 combo box. Without which, the select2 UI would not be updated to match the new value.
NB: The event to trigger appears to change with each version of select2, it could be one of:
comboBox.trigger('chosen:updated');
comboBox.trigger('change');
I need to clear all fields when they are hidden by a hideExpression, right now i have some code that adds a watcher to fields, and clearing them if they are hidden.
Problem is that this doesnt work for hideExpression's used on fields with fieldGroup's, since its apearently not allowed to add watcher to that type.
My example might explaine the issue better:
http://jsbin.com/fodijeziyu/1/edit?js,output
If you fill in the values, and click the hide checkbox, they should clear the model/view on the fields that gets hidden.
Generally on angular I would think different ways of doing things so that I won't be using watchers. It decreases performance a lot (and yes that sometimes might mean to use jQuery for it).
Now for angular-formly a way of doing what you want would be to use a function for hideExpression and achieve what you want.
Here is a working example.
Also read this link on the official angular-formly documentation.
There's an example on the website for this: http://angular-formly.com/#/example/very-advanced/remove-property-on-hide
You could use the watch with the true flag, in conjunction with your hideExpression:
$scope.$watch('someMiscForm', function() {
console.log('The model has changed!');
}, true);
Then alter/reset the fields you are interested in.
I have a form which I am using Parsley.js to validate. Everything works like a charm. Except, there is a part of the form where users are allowed to add new fields:
addFieldsToContainer = function($fields, $container) {
$fields.clone(true).removeClass('empty-form').appendTo($container);
if (typeof(Parsley) !== 'undefined'){
$('form.form-horizontal').parsley().destroy();
addValidatorsListeners();
}
};
My validations are a little complicated, because there are sections, and in each section, the inputs must all add up to a total number, which is the value of another input. I've got the inputs triggered to blur, and if any of the inputs are entered and the total for the section is wrong, all the inputs for the section are given the parsley-error class, and vice versa. Now, on the new input that is being added to the DOM, the parsley ui is not working on it, i.e. the parsley-success/error classes are not being added to it. But the rest of the section still works fine, and even includes whatever number is in the input in the total calculation. I'm also seeing these two errors in the dev console:
Uncaught TypeError: Cannot set property 'validatedOnce' of undefined parsley.min.js:8
Uncaught TypeError: Cannot read property '$errorsWrapper' of undefined
My code here.
How can I correctly bind these new inputs to the parsley validator?
Edit:
So I just realized that the when the user clicks the add input button, all of the inputs that have parsley:success/error classes have them all removed (because of model_form.parsley().destroy() I assume?) except for the new input that has been added. This input class never changes with the rest of the section, as I've pointed out. Also, the total enrollment input doesn't change, I'm guessing because of the { excluded: '[data-parsley-sum-total="all"]' } line. So it looks like the input that is being cloned from the page isn't having it's binding destroyed or it's validators correctly added, so some sort of event handling problem?
Maybe related?
If you clone Parsley's elements with their data, yeah, Parsley will be confused as hell.
I'd simply recommend not doing that. More precisely, clone without the data and events, or else clone before binding with parlsey.
If you really have to go this way, you might be able to get away with cloning afterwards if you $yourClone.removeData('Parsley'). I haven't tested it and can't guarantee that even if it works now it would in the future.
I have cells changing background color on checkbox check and I worked out how to keep the checkboxes checked on refresh (though looking back I don't think that works anymore), but I don't know how to keep the color change on refresh. I don't actually know Javascript at all and this is all from other questions but I want it to work. If I've done something completely wrong please correct me and don't assume I did it on purpose because I have absolutely no idea what I'm doing.
$(document).ready(function() {
$(".colourswitcher").click(function() {
if($(this).is(":checked")) {
$(this).closest("td").css("background","#ff3333");
}else {
$(this).closest("td").css("background","#202020");
}
});
});
$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});
$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});
Since you're new to javascript, I'm going to ask the dumb question: Have you included jQuery?
This code that you've pulled makes use of jQuery, a very useful library (not built-in to javascript) that has become so commonplace that people often don't even state its name when asking or answering a question involving it. But anytime you see that $ notation, you're probably dealing with jQuery.
You need to include the library file in your html file so it knows what those special symbols and syntax are:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
If you're testing this stuff in Google Chrome, press F12 and view the developer console. You will see "undefined" errors in red when you are missing things like this.
Here's another answer assuming you have a better working knowledge than my first answer:
The first bit of your code runs when the html document has loaded and attaches an event listener to change the nearest cell background color accordingly when the checkbox is clicked. Note two things here though. 1) that behavior will be attached to all html elements with the class "colourswitcher", not just inputs. 2) that behavior assumes that what was clicked has a property "checked", which only a checkbox does.
The middle bit I presume is supposed to run once, when the page is first loaded, to get the saved state of the checkbox from localStorage. This bit could be moved into the document ready bit.
The third bit of your code attaches an event listener to every input element (not just checkboxes) such that every time one is clicked, a checked true/false state will be saved in localStorage.
localStorage is a convenient way to save information between browser refreshes. You can save anything you want, ie. localStorage.CandyCanes = 7 and that variable will be stored in the user's browser and can be recalled later. Note that your above code will only work as intended if there's a single checkbox, because you're using one slot, or one variable, in localStorage to save: localStorage.input.
That's all I'm going to elaborate on this for now. If this is more than you expected, then it's time to hunker down and learn, or get a professional involved.
I'm using jQuery Mobile enhanced GWT and have a checkbox. But when I set the GWT checkbox using a normal check.setValue(false); it sets the value, but does not change the jQM enhanced display.
I have tried various combinations of refresh and prop/attr but they all seem to either do nothing at all or fail with a message saying it's not initialised.
The code is various variants of $('input[name="gwt-debug-cwCheckBoxMonday"]').prop("checked", true).checkboxradio('refresh');
I gout it to work using $("input[type='checkbox']").checkboxradio("refresh"); but I want to only do it for a specific one, not every one.
I made a fiddle at http://jsfiddle.net/liftarn/38uch/ to illustrate the problem.
The HTML is from http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCheckBox
It is a bit tricky. First you have to get the input element. One way to do it is (where w is your CheckBox):
NodeList<Element> nl = w.getElement().getElementsByTagName("input");
Element e = nl.getItem(0);
Now you have the input element and can get the id using getId()
Then you just make a native function taking the id and the boolean value and do
$wnd.$("#" + id).prop("checked", false).checkboxradio("refresh");