Develop Reference

Textarea Auto scroll down

I know this can be done with the .change() event and put $('#console').scrollTop($('#console')[0].scrollHeight); in it.But problem is that textarea is readonly and I am using javascript to enter the text in textarea.
For ex:-
$('#console').text($('#console').text()+'\n>_ Optained Trigger');
In this case the textarea is not scrolltobottom because change event it not responding.
Any alternative for it or any other event that capture javascript text change in textarea?

You can chain jQuery operations that affect your element without the need of events:
$('#console').text($('#console').text()+'\n>_ Optained Trigger').scrollTop($('#console')[0].scrollHeight);
edit: Ok, I read your comments, and to solve that you could trigger the change event manually
//first define the event behaviour
$('#console').on('change', function(e){
var console = $(this);
console.scrollTop($('#console')[0].scrollHeight);
}
//then every time you modify the text, trigger the event
$('#console').text($('#console').text()+'\n>_ Optained Trigger').trigger('change')

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 UI - dynamically bind the keypress event on the clicked div

jsFiddle demo link
Hi Guys,
I want to bind the keypress event handler when i click the div layer as given in the above demo. The feature is to use the delete key to remove the selected layer.
But when i hit the delete key, the keypress handler doesn't fire. Please suggest.

Remove '()':
$this.on("keypress", keyAction);
You are adding undefined as handler: $this.on("keypress", keyAction()) is equal to $this.on("keypress", undefined) in your case, as keyAction function does not return anything.
Also your div must be focusable, in order to receive keyboard events. For that reason you need to add tabindex on it:
<div class="dragClass" tabindex="0">
Then in selectAction focus your div to receive keypress event:
$this.focus();
This is the DEMO
For more information about adding keyboard events on static elements such as div, look at here:

Use this code it execute for delete key
$("#ParentDIV").keyDown(function (e) {
if (e.keyCode == 46) {
// Do it
}
});

In order for an element to receive keypress events, it needs focus. One way is to add a tabindex. If you click on your element then click a keyboard button in the below fiddle, you'll get your event. I stripped down the fiddle a bit and removed the draggable which is interfering with focus.
http://jsfiddle.net/e2yfC/27/

Editing an input inside a drag and droppable UL/LI

I know this is a fairly specific question, but I'm going for it...
I am using Orangoo's tools to make sortable list. The form works fine. See his example:
http://orangoo.com/AJS/examples/sortable_list.html
However, if I want to add inputs or other form elements, I cannot click on the input. The mouse will be there for a second and then disappear because the ondrag event handling stuff is taking over.
I don't want to remove the drag event from the LI because I do want to reorder the input elements. Instead, I want a way to keep the focus or ignore the ondrag handling if I click on an input. I can't figure out how to override the ondrag event though. If anyone is able to help, I would greatly appreciate it!

You need to stop the event from being fired for the drag and drop when the user clicks on an input. Just handle the mousedown event and use event.stopPropagation().
Example:
document.getElementById("input1").onmousedown = (function(e) {
e.stopPropagation();
});

Thanks for answering! I ended up giving in and just turning off the event handler.
<input id="inputId" name="inputName" value="some value" onmousedown="AJS.dnd.removeDragAble(this.parentNode);" onblur="AJS.AEV(this.parentNode, 'mousedown', this.parentNode._start_fn);" />

OnChange event does not work properly

My OnChange event does not work properly - I want to trigger a function when user changes a textbox's value. But in my tests I have seen that the function triggers when textbox's value changes and textbox loses focus. Something wrong with my browser? Or is it about the ability of JavaScript? If the last one is true how can I can do that? Thanks in advance.

onchange event will trigger when an input field loses focus or when an option is selected from a dropdown menu, that's normal behavior.
If you want an event that will be triggered as the user types in an input field, you can use onkeypress, onkeydown or onkeyup events.

You could do with jquery:
$("textbox_id").keyup(function(){
//do something here
});

write the jquery code on keyup event and blur event also, because if user paste some copied data into textbox by using mouse only in that case only blur event called by jquery.