Jquery for Beginners: Events Handling Part 2 (Continue)

In previous post Jquery for Beginner: Event Handling Part 2 i have give complete list of events which are available in jquery. In previous post i have discuss the event which are related with the mouse, but in this article i will discuss events which are related to the keyboard. The keyboard events are

Event Name
Event Name
keydown()
keydown(fn)
keypress()
keypress(fn)
keyup()
keyup(fn)

Above are the list of events which are related to the keyboard. Let us start with keydown event which is fired when any of the keyboard key is down. The syntax for calling the event is as below.

$(document).ready(function()
{
$('#txtValue').keydown(function(passedEvent)
{
alert(passedEvent.keyCode);
});
});

Above code is simple example of how you can bind the keydown event handler with any of the input control you have on your web page. In the above code i just output the keyCode which is the property of the event, which is passed as argument to the keydown function. The event name is optional, if you don't want to pass the parameter you can remove the parameter. But if you need to know which key is press or some additional information when the key is down then it is helpful to pass the event.

Property
Description
altKey
Value will be true if alt key is press else false.
ctrlKey
Value will be true if ctrl key is press else false.
shiftKey
Value will be true if ctrl key is press else false.
keyCode
This Property hold the value of the key in numeric format.
which
This property hold the value of the key in numeric format, in case of key board event.
metaKey
Set to true if the Meta key was pressed when the event was triggered, false if not.The Meta key is the Ctrl key
on PCs and the Command key on Macs

In the above table , these are the some of the properties which are available when event is passed to the function which is bind with the event. Importantly, the keypress property isn’t reliable cross-browser for non-alphabetic characters. For instance, the left arrow key has a code of 37, which works reliably on keyup and keydown events. Safari returns nonstandard results for these keys on a keypress event. We can get a reliable, case-sensitive character code in the which property of keypress events. During keyup and keydown events, we can only get a case insensitive key code (so a and A both return 65), but we can determine case by checking shiftKey. The Event instance contains not only properties that give us information regarding the event that’s handled, but also possesses a handful of methods that lets us control the propagation of the event.

The which property which is used to hold the value of the key in numeric format. And if the event is cause by the mouse then it will hold the value of the mouse key which is

1. 1 for left mouse key
2. 2 for middle mouse key
3. 3 for right mouse key.
   

Key press:

The keypress event is fired after the keydown event. This is similar to the keydown event, except in the case of key repeats. The keypress and keydown event are similar but there is difference in between these two, the keydown event is fired if you press modifier keys such as shift key.But the keypress event is not fired if you press the shift key or ctrl key(control key).
One important thing to remember is that keydown and keyup event handler will give you the code which key is press which include the shift, ctrl key as well, But the keypress event key code indicate which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 97 by all events. This can be the primary motivator for deciding which event type to use.

key up:

The keyup event is fired after the keypress event.The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.


You can download source code from by Clicking here
back to content

Jquery , Ajax Update Panel Problem and Solution

In this article i will share my experience of using the Jquery with the Ajax UpdatePanel and the problem i have faced when using the both at the same time. I will try to explain the problem and then i will give you the solution of the problem in simple manner so that you understand it clearly.

The Problem

In the example which i will use contain one dropDownList , a label to show the selected value of the dropDownList and a button which bind the jquery click event. All the three controls are inside the Ajax UpdatePanel. This is the simple example to show you what is the problem when using Jquery and Ajax UpdatePanel at the same time. So when i run the web application and page is loaded in my browser first thing i do is to click on the button, and it display the message 'From ready Function' is displayed, but when the selectedIndex changed event of the dropDownList is fired and the page is partial postback, and now if i click the button again no message is displayed. Due to the partial postback, UpdatePanel completely replaces the contents of the UpdatePanel on an update. This means that those events you subscribed to are no longer subscribed because there are new elements in that update panel.

$().ready(function()
{
BindEvents('From ready Function');
});


function BindEvents(strPassedValue)
{
$('#cmdClickMe').click(function()
{
alert(strPassedValue);
});
}

So the jquery click event which was bind when page was first requested is not any more attached with the button. So we need to bind the click event again with the button.

Solution

The solution to the above problem is very simple one what you have to do is to place the below function just after the ContentTemplate tag inside the UpdatePanel. Here what i did is the call the BindEvents function which is also called when the ready() function of the jquery is executed. So when the partial postback end we capture the endRequest event and then call the function which will bind the event again. now if you repeat the cycle which i have mention in the problem section then you can see

1. when page is loaded first time if we click the button then it will display message 'From ready Function'.
2. Now if you click the dropDownList then it will display the selected value from the dropDownList in the label and the partial postback occurred.
3. Now if you click the button again then you can see the message 'From add_endRequest called!' which mean the event is bind from the add_endRequstion function.
   

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function()
{
BindEvents('From add_endRequest called!');
});

This is the simple application to let you know what is the problem and how can you solve that problem. Hope this will solve your problem.

You can download source code from by Clicking here