Develop Reference

Difference between attr('disabled',true) vs unbind('click')

I need to disable a button between the duration when it is clicked and the response arrival. My goal is to stop the onclick function getting executed if someone clicks the button again before the response has arrived.
Which is the correct function to use in this case.
$('#mybutton').unbind('click');
$('#mybutton').attr('disabled', true);

Disable button should be a must for a better user experience (optionally button text can be changed along with a different style), removing only onclick event can't provide good user experience as user can still click on the button which doesn't have any impact. Not necessarily to be followed but it can be an approach: remove onclick (extra cautious) and then disable the button.

$('#mybutton').unbind('click');
unbind() function removes onClick event handler from the selected element.
$('#mybutton').attr('disabled', true);
This code sets a disabled attribute to the selected element. A disabled button cannot be clicked and is usually styled differently.
A preferred way to disallow user to click a button is to make it disabled. If some conditions change and you want to make it clickable, you can remove this attribute and don't need to attach onClick event again.
$(".myButton").prop("disabled", true);
$(".myCheckbox").click(function() {
$(".myButton").prop("disabled", false);
});

It is more appropriate to remove onclick. Disabling the field is not equivalent: browsers may add styling to it and/or not include it in the form submission, should it be submitted.
You may also find that the onclick event fires even when the button is disabled.

Blur event on select boxes and Firefox

I have the following situation:
One selectbox and a tooltip that appears when the user clicks on the box to select an option. To show the tooltip can be easily done with css (select:focus ~ .tooltip) or jquery using the focus() event.
When the user picks something the select box closes and the tooltip dissapears. This can be done with the change() event.
But there is one issue. If the user opens the selectbox and clicks somewhere else on the page, the list closes and in Firefox the blur event is not triggered right away, so the tooltip remains visible. If the user makes the second click outside of the select the blur event triggers and the tooltip dissapears.
Chrome and IE is ok, Firefox is not.
Do somebody know a workaround in Firefox?
thanks,
Istvan

After playing around with this for about half an hour, I'm afraid to say my input would be: no. And for the following reasons:
Firefox doesn't fire the blur event until the second click. This is evident from looking at the dropdown on the select, which remains blue.
Therefore a pure CSS solution would definitely never work
A JavaScript solution would also be next to impossible too, as the first click seems to go nowhere
I've checked this by trying to note body and document clicks, you'll see that neither fire the first time. In fact, neither does the select, so I have on which level that click registers
See my JSFiddle for my workings. Sorry! I guess it's just a FF issue.
$(document).click(function() {
console.log("document");
});
$("body").click(function() {
console.log("body");
});
$("select").click(function(e) {
e.stopPropagation();
console.log("select");
});
Edit: Sorry, posted an old JSFiddle.

link not clicked because removed after onblur

I have a textarea with this event bind :
on focus :
display a link that will popup a larger version of text area.
on blur :
remove the link.
but "click" event on the link never triggered because it's already removed when onblur trigerred.
$("#text-area-new-message").focus(function(){
$("#text-area-new-message").after('<a id="enlarge-text-area" href="#">enlarge text area</a>');
$("#enlarge-text-area").click(function(){
alert('test');
});
});
$("#text-area-new-message").blur(function(){
$("#enlarge-text-area").remove();
});
here is the jsfiddle
how is the better way to do that?

When the user leaves the textbox, you could delay the removal of the link by, say, a few seconds:
$("#enlarge-text-area").delay(3000).remove();
Or more. Whatever seems an appropriate amount of time for a user to click the link if that was their intention. This could get even more 'clever', by, for instance, fading out slowly and stopping the animation and subsequent removal only if it captures the mouse (by way of hovering on the link.)

one approach is to use jquery on function to attach event handlers to all 'future'
'#enlarge-text-area' elements :
$('#myParentDiv').on('click', '#enlarge-text-area', function(){});
other approach is to hide rather than remove the link.

How to trigger change event for Chosen (jQuery)

Before I click reset button I choose "Company" in Chosen (dropdown list). The event occurs normally after I click reset. I choose "Company" again but event change in dropdownlist doesn't occur.
Could anyone tell me how to trigger the change event for dropdownlist after clicking reset button and then the same element?
The code I have so far:
$("#mainMenu").change(function(e){
e.preventDefault();
loadFirstManu(true);
});
Code for the reset button:
$("#btn_reset").click(function() {
CKEDITOR.instances.ckeditor.setData('');
$('.mchosen').each(function() {
$(this).val('').trigger('liszt:updated');
$('#submenu').attr('disabled', 'disabled').html('');
$('#secondsubmenu').attr('disabled', 'disabled').html('');
$('#s-menu').removeClass('required').html('');
$('#secondsubmenu').removeClass('validate[required]');
$('#tabmenu').attr('disabled', 'disabled').html('');
$('#tab').removeClass('required').html('');
});
});

This is what i figured out:
$('#my-select').val(5).trigger("liszt:updated")
liszt:updated is no longer working in new version of chosen instead use below as Alexandru Cojan's answer suggesting
trigger("chosen:updated");

for newer version of chosen the event is "chosen:updated"
$(selector).trigger("chosen:updated")

If i need just to refresh value in chosen select - .trigger('chosen:updated') is enough. But if I have change handler and want it to be called - i need to do .trigger('chosen:updated').change()

I don't know if this is your case or not, but your code above should work,
$("#mainMenu").change(function(e){
e.preventDefault();
loadFirstManu(true);
});
but please notice that "change" event occurs on most browsers when you unfocus the select input
So when you click reset, just before executing the reset action the onchange is triggered.
Now try clicking outside the select input after changing the selection and see if it still works or not

Maybe you should try using .on, as your $('#mainMenu') may have changed somewhere (Can't say without an example). Try doing this:
$("body").on('change','#mainMenu',function(){
...
});
or any parent selector instead of "heavy" body

If I am not wrong to understand you then you want to trigger the event change after click on the reset button.
you can do this by simply adding one line to your code
//code
$("#btn_reset").click(function(){
// your code here
$("#mainMenu").trigger('change');
//you can write this as per your requirements ie. at start or end.
});

stop chrome to show dropdown list when click a select

I want to click a <select> but stop it to show his dropdown list
$('select').click(function(){
if ($(this).find('option').size() > 20) {
// some code to do my job
return false;
}
});
The code return false can stop dropdown list display in Firefox(actually, the dropdown list display first and hide after a short while), but not work in Chrome.
I also tried let the <select> to be disabled, trigger blur() on it, or trigger click() on other element, but the dropdown list is still there unless user click somewhere else.
Is this possible? ... and Thanks!
Long story is here (if you have interested in why I want to do that):
As you know, sometimes there will be a <select> with too many
<option> in it, and when you click it, there will be a long dropdown
list. Find what you need in a long dropdown list is a terrible job...
But unfortunately there is a lot in my site.
So I think the simplest way is to write some javascript to change
that, when option is more than 20, show a dialog with a filter and a
new <select> which only have filtered <option> to let find easy.
And my problem is the dropdown list is still display, make my users
confused... They don't know where to operate. "the dialog or the
origin select".

The problem is that the default action of a select element occurs on the mousedown event, rather than click (or mouseup), so you'll need to bind an event handler to mousedown instead:
$("select").mousedown(function(e) {
if ($(this).find('option').length > 20) {
e.preventDefault(); //return false will also work
}
});
Here's a working example. Note that I've used the preventDefault method of the event object, simply because I think that makes it clearer what's actually happening. However, return false will work too.

I wanted to disable all form controls (with the 'form_control' class) in a table (id 'details_table'), including selects, and point users to an 'edit' button that opens a modal. A small tweak to the previous answers seemed to work in both Firefox and Chrome on Linux. Not tested in other browsers yet.
$('#details_table').on('mousedown', '.form-control', function(e) {
alert("Please click on the Edit button to modify details.");
e.preventDefault();
this.blur();
});