Develop Reference

How to detect when a textarea value is changed by a script?

I would like to check a textarea when the value inside it is changed by program.
The code is quite complex so I would rather use an event listener instead of looking for the exact line of code.
Here is how I check:
$(".edit.btn.btn-default").on("click", function(){
alert($("#attribute_fabric_en").val());
$("#attribute_fabric_en").on("input propertychange",function(){
alert("test");
});
});
The result: alert($("#attribute_fabric_en").val()); prints an empty string, but the textarea later on will be assigned a value by script; but the listener is not triggered.
At least Chrome tested is not work to capture the event

There is an event for that, in jQuery you can use $('.textareaId').on('change', console.log($('#textareaId').html()), It is that simple !
EDIT:
Maybe you don't want to use jQuery, click event is for textarea, contentediatble divs, etc and input event is for form elements such as
textArea.addEventListener('change', function(e){ ... }, false);\n
inputElement.addEventListener('input', function(e) { ... }, false);

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

trigger Jquery function after an auto focus

is it possible to trigger a function after an autofocus? I tried but when my textarea get the autofocus i need to click away then to click again on my textarea to trigger the function
my code is :
$('#test').focus();
$('#test').focus(function() {
alert('ok');
});

Try swapping the code around. You're event wasn't attached to the test element the first time you call focus()
$('#test').focus(function() {
alert('ok');
});
$('#test').focus();

This is because you are setting the trigger after you set the focus.
Rearrange your code and this will work fine.

The .focus() method has two different meanings based on the parameters it is passed.
In your first statement.
$('#test').focus();
This is setting the focus to the element with ID test.
Your second statement though
$('#test').focus(function() {
alert('ok');
});
What is happening here is jQuery is attaching an event handler to the focus event of the element. I suggest adding your event handlers when the DOM is loaded, then calling the .focus() event when required (which will trigger the alert).
$(function(){
$('#test').focus(function() {
alert('ok');
});
});

Jquery. click event doesn't work after change event?

Having this sample code:
<input type="text" id="changeid">
click
<script>
$('#clickb').on("click", function(event){
alert(1);
return false;
});
$('#changeid').on("change", function(event){
alert(2);
return false;
});
</script>
When putting something into the text field and click the link immediately, only onchange event fires, but not link click event.
Why is that?
It seems that the change event is blocking the click event?

It is blocked by alert. Change alert to console.log you will find two events all fired.
The demo.
$('#clickb').on("click", function(event){
console.log(1);
return false;
});
$('#changeid').on("change", function(event){
console.log(2);
return false;
});​

When you edit the input and then click on the link the following happens on the inside
You start clicking on the 'link'. No events are generated yet (not even mousedown), because first the browser will do some cleanup work:
The input loses focus and will raise a blur event
The input raises a change event, since it raised a blur and the value changed
Your change event callback opens an alert(2)
The documents loses focus since a new window appeared
The link will never experience the click.
The solution is not to use alert (as xdazz proposed).

use this
$("#changeid").live('change', function () ...

onchange event fires only after the element is blurred. So when u type some text and click on the link first the element is blurred on the text field. The best way to handle the change event on having onkeyup event to track the changes made on the text field.

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.