Develop Reference

Using jquery event on close button in search box

The question is whether I can call a function on event of clicking close button in search box.
What I'm using is <input type='search'>
While typing, close button appears clicking on which I want to call a particular function. Is it possible? I tried to Google it but couldn't get much out of it. Can anyone help?

You can use jQuery .on('search', function() { ... }) to handle this event. Here is a fiddle example: http://jsfiddle.net/7EynL/
See this question for additional details.

Use 'search' event
$('input[type="search"]').on('search', function(event) {
});

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.
});

jQuery keypress event not firing

I have a form that when the user hits edit, it changes the field from text to a textbox with a class of cat_name_edit.
The following code does not trigger when pressing any key in the textbox. Could it have something to do with the fact that I've already changed the text into a textbox?
$(".cat_name_edit").keypress(function() {
alert("hi");
});
I've also tried .click() and .keydown() with no luck. Any ideas?

Ok, apparently I had to use .live()

I think the elements are not present on page load so the events are not attached. Try using jQuery live.
$(".cat_name_edit").live('keypress', (function() {
alert("hi");
});

I put this into a fiddle keypress() works fine:
$(".cat_name_edit").keypress(function(e) {
$(this).replaceWith("<textarea class=\"cat_name_edit\"></textarea>");
$("textarea.cat_name_edit").focus();
});
keyup() would have worked too.
I've also gone to the liberty of making the function that replaces the input with a textarea.

or you could also use EventDelegation. Attach your click event to the parent which contains these textboxes, and in the function check if the target that was clicked has the class cat_name_edit and then perform your operation.

How do I force a blur event to occur in JavaScript?

Here's what I want to do. I want to trigger an event every time a select element changes. I have a multiline select and when I make changes (click on elements), it does not change until the select box loses focus. So I'm trying to force a blur every time the select box is clicked. That way if it changes, it will trigger the changed event. If it doesn't change, nothing will happen.
How do I do this? Am I even approaching this the right way? Jquery answers are okay as well.

In addition to Ender the full code could be something like this.
$('#mySelectBox').change(function() {
$('#thingToBlur').blur();
})
Reference: http://api.jquery.com/blur/

This will find the element with the focus and trigger the blur event.
function blur(){
document.querySelectorAll('input,textarea').forEach(function(element){
if(element === document.activeElement) {
return element.blur();
}
});
}

Using jQuery do:
$('#mySelectBox').change(function() {
//do things here
});
According to the documentation at http://api.jquery.com/change/, the event is triggered immediately when the user makes a selection.
Check out this demo to verify that this works: http://jsfiddle.net/AHM8j/

You could attach an onclick handler to the select and the individual options. basically onclick="this.blur();". I've always found that click events on <select> elements to be a pain, as nothing happens at the point you expect it to.

Okay, Here's what was going on. I was including the -vsdoc version of JQuery instead of the actual JQuery library. This also fixes some issues I was having with some plugins such as blockUI.

Any alternative to jQuery change() to detect when user selects new file via dialog box in IE8?

I am unable to detect when input type="file" changes its value after user selects file and the dialog box closes.
$('.myInput').change(function(){
alert($(this).val());
})
Above jQuery code works perfectly in all browsers apart from IE. For some reason IE detects the change only after input field loses focus.
Is there a way to detect the change immediately after dialog box closes? Or maybe to force input field to lose focus after dialog box closes so IE can detect it?
I'm puzzled. Thanks for any help.

This was a known bug that was resolved as part of the jQuery 1.4.2 release, 1.4.2 got a major event model re-write and this was fixed as part of that, just upgrade to resolve the problem :)

Edit - Nick is right, it's fixed in 1.4.2. http://jsfiddle.net/7wR2L/
You can detect click and keep track of it's last value. Something like..
$('.myInput').click(function() {
var $file = $(this);
if( $file.val() != $file.data('lastVal') ) {
// different
}
$file.data('lastVal', $file.val() );
});

Dan Heberden's comment about updating to 1.4.2 works.
However if another element is used to trigger the file file selection, the file input element no longer registers a "change" event.
The new question I created for this has a fork your fiddle to illustrate this case. See jQuery: "change" event on file input element does not fire if the file selection is triggered by an element other than the file input for details.