We Keep Coding

How can I get notified when the timezone-picker value is changed?

I'm using timezone-picker to pick my timezones, and so far it's working great.
However, the one problem is that I can't convince it to tell me when the value is changed by using one of the quickLink buttons.
You can try this by going to the demo and sticking this code in your console:
jQuery("#map select").on("change", function(){
console.log(jQuery('#map').data('timezonePicker').getValue()[0]);
});
If you do that, you'll see that changing the value via dropdown works just fine, but if you use the buttons to the right of the dropdown, it won't fire the handler. I'm guessing that's because the code isn't calling .trigger when it sets the value, and yeah I could probably modify the Javascript myself but that seems like the wrong thing to do... is there any other way to get notified when this value changes?

You could hook to the map:clicked events (as defined diggin' in to the source code).
Check this code in the demo page:
jQuery("#map").on("map:clicked", function(){
console.log(jQuery('#map').data('timezonePicker').getValue()[0]);
});
The only difference is that you need to hook it to the initialization element (#map). There is no trigger on the main select element. The defined binded event is map:clicked. It will execute each time you change the selected option, click on the map or select one of the quick links.
Hope it helps.

HTML Checkbox Click() Return FALSE or TRUE instead of READONLY or DISABLED using jQuery

Since I don't have enough points to leave a comment, I must ask a question. The situation I'm referencing can be seen here LINK. And I promise that I've Googled for hours before posting a question.
I'm trying to be able to "toggle" HTML checkboxes to be readonly. Here is where I am so far.
"DISABLED" is NOT an option. It won't post with the form.
"READONLY" is NOT really readonly. It may gray-out, but it can still be clicked.
The only thing that seems to work is what the LINK refers to and that is applying READONLY to the checkboxes and then some jQuery like:
$(':checkbox[readonly=readonly]').click(function(){return false;}); or $(':checkbox[readonly=readonly]').click(function(){return true;});
I've also messed around with swapping classes in case there was something limiting about the readonly attribute.
THE PROBLEM is that whatever the first setting becomes (TRUE or FALSE) is what it stays like until the page is refreshed. I can't re-enable the checkboxes simply by running the other statement to return the opposite (FALSE or TRUE).
QUESTIONS
Is there a way to be able to toggle the RETURN (TRUE or FALSE) for the .click event?
Is there another alternative for toggling the ability to check the checkboxes?
Thanks a bunch.

jsFiddle DEMO
If you want to toggle between return false; & return true; you could use .change() event & come up with a specific condition to toggle.
$(':checkbox[readonly=readonly]').change(function () {
if($(this).is(':checked'))
console.log("return false");
else
console.log("return true");
});

OK finally figured it out. I'll try to keep my points organized.
Include jquery-ui.js, not sure why, but it needs it.
Use a .change() event to add and remove two classes that designate READ/WRITE
Use $('.ReadClass').bind('click',false); to prevent checking
Use $('.ReadClass').unbind('click', false); AND switch the classes AND add $('.WriteClass').bind('click',true); to en-enabled checking
Here is a link to my jsFiddle demo.
The demo loops through all specified form element to toggle the ability for the user to enter data.
Hope this helps somebody else.

onchange wont fire after programmatically changing html select dropdown

I have a select inside HTML
<select id="league" name="league">
which I'm listening for changes inside my javascript.
var league = dojo.byId("league");
dojo.connect(league, "onchange", function (evt) { //do stuff }
Which works fine.
However I have a link that I can click which updates the select:
League
The link works as it updates the selected value of the select with the following function.
function updateSelection(NewLeague){
dojo.byId('league').value = NewLeague; // works
dojo.byId('league').onChange; //this isnt working
//dojo.byId('league').onChange(); //this throws: TypeError: dojo.byId("league").onChange is not a function
}
My problem, as I've read through other stack posts is that programmatically updating the value wont trigger onChange, thus I need to call onchange in the code (shown above). As per the comments inline, the onChange isn't being triggered or throws an error. My first thought that it has something to do with the dojo.Connect which listens for onChange, but I havent found any information that says I cant do this, nor any explanation how to get around it.
Any ideas?

Select onchange doesn't fire for programattic changes, you need to fire it yourself with league.onchange();
As noted by #Greg, the call should be lowercase.
Additionally, I don't know if dojo has a trigger method, but in jQuery this would be done as jQuery('#league').trigger('change').
Depending on your version of dojo you may also want to check: http://dojotoolkit.org/reference-guide/1.8/dojo/connect.html

Have you tried just calling the select by it's id using normal js?
document.getElementById('league').onchange.call();

As others have said, you need to trigger the event yourself, just setting the value does not do that. See the code on How to trigger event in JavaScript? to see how in a cross-browser way.

The state of checkbox looks updated, but it is not updated actually

I have strange issue. I am developing something for Magento. I added link "Select all categories" and add a jQuery event to check all checkboxes when I click on it. It works great, but somehow the html is not updated and Magento can't see that all inputs are selected. But when I manually click on a checkbox, it updates html (I am looking at the console) and Magento save button works just fine.
How to resolve this issue? I am not sure what else should I do to perform updating html. It look like it works (checkboxes are selected), but please take a look at the console and html. Html must be updated.
I created jsfiddle: here

try this:
.attr('checked', 'checked');

Just check all checkboxes, like this .
Your is(':checked') IF statement seems wrong as it should be enclosed on an .each() so it applies to all checkboxes, try the more simple approach on the fiddle I linked.

Did you try prop('checked', true); instead of prop('checked', 'checked'); ?
That's what I see in all the examples.

I figured it out. It was Magento issue. Magento doesn't use that form, it uses hidden input and collects selected checkboxes. Will upvote all answers anyway. Thanks

You can use something like :
// custom jQuery added
jQuery(function() {
var to_check = false;
jQuery(".select-all-categories").click(function(){
if (!to_check)
to_check = true;
else
to_check = false;
jQuery("#banner-categories input[type=checkbox]").each(function(){
if (!to_check)
jQuery(this).removeAttr("checked");
else
jQuery(this).attr("checked","checked");
});
return false;
});
});
Code can be optimized

How can I change the inline attribute checked="checked" in javascript?

I'm working on a move up/move down function on one of my lists and the things I need to move contain checkboxes. However, I set the checked attribute in PHP and when I switch the innerHTML of the elements, the checked status always reverts to what the checked attribute is set. I tried making an onchange function to change the attribute as I click it with
if(el.checked == true)
el.setAttribute("checked", "checked");
else
el.setAttribute("checked", "");
but that doesn't work (and i don't know why I even expected it to work, to be honest)
Any idea how I could do it? Switching the elements alltogether in the dom tree would be problematic as would be not setting the checked attribute in PHP.
edit: aparently there's no way to do what I asked but my problem is fixed by not being a lazy bastard and moving things around in the DOM like i'm suppsoed to.

When the checked attribute is present in HTML (no matter what value it has), then the IDL (DOM) attribute checked is initialized to true, as opposite to its default value false. Your code seems to expect otherwise. I don’t understand what you are trying to do, since you should be able to move a checkbox element withouh such operations. If you move the element node, there is no need to play with the attributes.

Set the checked property:
checkboxObject.checked=true|false
You can try this way
if(true) document.getElementById("check1").checked = true;
else document.getElementById("check1").checked = false;
Check on w3School.com
Hope this resolves your issue.