Trigger change of a checkbox made by javascript - javascript

I'm building a jQuery plugin to style checkboxes. I hide the real one and after it insert button which when clicked toggles the hidden checkbox. But if I check the hidden checkbox via JavaScript, fake button doesn't change of course. I thought about making it to change using jQuery's .change() but it also doesn't trigger the change when made by JavaScript and not by actually clicking the checkbox.
I want plugin to be universal and to also work if someone has a button like "check all" or "uncheck all" which does the thing with JavaScript, I want my fake checkbox-buttons to change accordingly.
The question is what method should I use instead jQuery's change() in order to watch not only changes made by mouse clicks, but also by javascript for example $('checkbox').prop('checked', true);
edit2:
I realized there is no proper way to watch properties with JavaScript, except checking the property several times a second for each checkbox which is very unattractive.I decided not to include such inefficient feature to my plugin and instead leave it to user to also trigger the change if he wants to manipulate values via JavaScript.

You can't watch properties. You could set up a timer that looks for changes every few milliseconds, but that is not satisfying.
Instead, you should rely on all other code to trigger the change event, when they want plugins like yours to update (there may also be cases when they don't):
$(':checkbox').prop('checked', true).change();

You need to trigger the change event manually.
$('#checkbox').attr('checked', 'checked').change();
Have a look at this :
JsFiddle

Related

proper trigger to add some custom behavior on form validation?

I am trying to add some custom logic in my MVC5 project to change the behavior of unobtrusive javascript client side validation of text input. By change I mean I'd like to be able to apply bootstrap style including glyphicons dynamically.
I know it can be done by manipulating DOM - applying and removing appropriate classes (like 'has-success' etc.). Yet I don't know in what event I could handle this not to override default behavior applied in jquery.validate.*. The best situation would be if I could recognize a bad format in runtime (so let's say the user is to write number, but he's just pressed "s"), not just after button submit. I could do it quite easily by checking HTML5 attributes used for validating, but I don't know when I could do that.
I've tried on do it in document.ready(), but submitting a button doesn't make this event to trigger if there are errors(corresponding ActionResult is not called), and- that's the point I would even want it to trigger.
Any ideas what event would be appriopriate? I don't want any additional jQuery plugins etc., I'd like the behavior it is now I just need to make some changes and I need to know where I can do that.
You could use jQuery's .change() function.
$( ".target" ).change(function() {
_yourcodehere_
});
Itt fill fire whenever the selected input's value changes

SelectBoxIt - trigger an update to the original select element

I'm trying to use the SelectBoxIt jQuery plugin and it looks great and promising and everything though i have 1 issue with this plugin, it seems that there is no native way to update the original select element with the selected value.
at first look on the documentations it seems that indeed there is an option to do so:
Aggressive Change Mode
Note: Aggressive Change Mode will select a drop down option (and
trigger the change event on the original select box) when a user
navigates to an option using the up and down arrow keys via the
keyboard, or searches for an option using the keyboard.
the words:
trigger the change event on the original select box
confused me for a moment but as you can see this is not my use case, it is only referring for a navigation with the keyboard and updating the new drop-down created by the plugin.
am i missing something or there is no native way of doing what i ask for?
and if so, what would be consider a best practice for updating the original select element?
i already thought of some options using callbacks or change events but not sure what would be consider as best practice.

How to make all buttons(even dynamically created) in an application follow jquery button widget without calling .button() multiple times

I am new to stack overflow and this is my first question. Pardon me for any mistakes.
This question is more generic but i tried to search for an answer but could not find it.
Say i have a page and i am using jquery ui button() widget for all the button. What happens is i have a specific class defined for all the buttons on my page. So i can just specify $('.myButtonClass').button(); but whenever i render partial views which has button again i have to do the same thing in the partial views. Is there any way i can globally specify a transition for button or any element for that matter.
Here is a sample Fiddle which adds buttons on click. But the added buttons are not transitions as button widgets(I do not want to use clone).
http://jsfiddle.net/wjxn8/
$('.clsTest').button().click(function(){
$(this).after('<input type="button" value="Added" class="clsTest"/>');
});
Is this possible without:-
1) Adding the css classes for a button widget manually for all the buttons created.
2) Tracking DOM Changes using Javascript and perform transitions for all the button elements.
Thanks for your help!!!
Since you were looking for something else, why not trigger a custom event when you load partials or whatever:
$('.clsTest').button().click(function(){
$(this).after('<input type="button" value="Added" class="clsTest"/>').trigger('addButtonUI');
});
$(document).bind('addButtonUI',function(){
$('.clsTest').button();
});
http://jsfiddle.net/wJXN8/3/
If you trigger your event and have the document listening for it, then you can do whatever you would like. I could have put in there the ability to add more buttons as well, but this should get the point across.
What you are asking for, some event when a button is added.... you would need to come up with that yourself and trigger it when a button is added. There is this: How to detect new element creation in jQuery? which talks about a specific event that is triggered when new elements are added to the DOM. Haven't tested it, and it looks like it may not work on IE.
I'm not a huge fan of this, but you could poll for new buttons. Check out my fork of your fiddle (that sounds funny):
http://jsfiddle.net/lbstr/Hq97H/
Using your example, this would look like:
setInterval(function(){
$('.clsTest').not('.ui-button').button();
}, 1000);
As I said, I'm not a huge fan of this. I understand the desire for something like $.live here, but I still think its better to initialize your new content when you add it. If you are making an ajax call for new content, just initialize it when you add it to the DOM.
My silly polling code and $.live (which is now deprecated) might be convenient, but they perform terribly. Just my two cents. You know your code better than I do!

Events not always firing

I'm not really sure how to go with this, but here goes:
I have form elements that trigger a function (mainly for validation purposes). This triggers on click, on change etc. These are written with vanilla JavaScript.
If it's a straight-forward HTML element then everything works fine. E.g. a element fires on change.
However, if I use a jQuery script (e.g. a jQuery colour selector), then although that jQuery script populates an field, the validation script doesn't fire.
This I suppose is obvious as you don't click, blur, change it, it's just the jQuery script changing it.
Of course I could change the JavaScript in the colour selector jQuery script so it also fires the validation script, but there must be a better way where as well as on click, on change, on blur etc. I can also activate the function when it picks up that another script is changing it. I need this for various occasions and scripts.
Another example is a rating script (rate out of 5). It uses radio buttons as a non-jQuery fallback and the jQuery script just hides those radios (with CSS), displays the star images and then changes the radios when the user interacts with the star images. That way the server handles a form submit the same way regardless of the availability of jQuery. However, the validation script doesn't fire.
Any ideas?
Apparently the elements are being inserted on the dom after the javascript run.
try using $.live() instead of $.blur()
so even if this script elements are inserted after the page rendered, events will be bound to em.
http://api.jquery.com/live/

Launch event on value change

I made simple date picker using JavaScript and jQuery. After choosing date it is shown in input box. This input box is not launching change event, probably because it was changed using JavaScript. Is there any way to launch this event, or to make custom one?
Run this code after you assign new value:
$('input').change();
.change just points to the .on function inside jquery, so it's better to use the .on directly.
$('#inputID').on('change', function() {
});
$("input#yourInputId").change();
or
$("input#yourInputId").trigger("change");
Should do the trick. Replace the #yourInputId with an id that represents the ID="abc" part of your HTML for the textbox
Be aware of potential browser irregularities or lack of support for change events - behaviour may vary, particularly in older browsers.
There is a change and an input event. The first fires after an input changed and lost focus. The latter fires immediately when the input changes. However there are no events that fire after programatically changing an input.
If you have control over the code that changes your inputs you can of course trigger the events manually like described in the other answers.

Categories