The select event is sent to an element when the user makes a text selection inside it. This event is limited to <input type="text"> fields and <textarea> boxes.

Example 1: Show Alert when textbox value is selected using JQuery Select Event (Live Demo)
I have a html textarea control, whose id is "txtInput" on selecting content of textarea, I will display alert.

<textarea id="txtInput" rows="5" cols="20">Welcome to the world of JQuery</textarea>

Change event will fire, when value of element is getting changed. Example: If we try to change textbox value it should try to validate it.

Example 1: Show Alert when textbox value is changed using JQuery Change Event (Live Demo)
I have a html textbox control, whose id is "txtInput" on changing value of textbox content, I will display alert.

In this article we will learn how JQuery keydown, Keypress and Keyup events work.

Keydown Event bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.

Keypress Event bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.

Keyup Event bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.

This events are very similar and you will find very minor difference between them. To understand difference between Keydown, Keypress and Keyup event is sequence in which they triggers.

First Keydown Event occurs (Triggers as soon as key is press)

Second Keypress Event occurs (Triggers when key character is typed)

Third Keyup Event occurs (Triggers when key is up, after it is been pressed)

Example 1 - Keydown Event: We will show alert in all situation whenever user press any key in textbox. (Live Demo)

I have a html input control, whose id is "txtInput" on writing any character inside textbox it should display alert.<b>Type anything in below textbox to trigger, keydown event</b><br /><input id="txtInput" type="text" />

Example 2 - Keypress Event: We will show alert in all situation whenever user press any key in textbox. (Live Demo)

In above example you might have notice problem with event.keyCode, it triggers as soon as we press the key. That is we cannot used this event when we want to check combination of key (Example: shift + 2 .i.e. "@" symbol is pressed or not) For such situation were we want to identify which character is pressed, it is good to use event.which event. Let understand that with example

I have a html input control, whose id is "txtInput" on writing any character inside textbox it should display alert.<b>Type anything in below textbox to trigger, keydown event</b><br /><input id="txtInput" type="text" />

Example 3 - Keyup Event: We will show alert in all situation whenever user press any key in textbox. (Live Demo)

I have a html input control, whose id is "txtInput", when user releases key on keyboard this event will trigger and it should display alert.<b>Type anything in below textbox to trigger, keydown event</b><br /><input id="txtInput" type="text" />

Monday, September 26, 2011

Example 1: Show Alert on double click of paragraph, using JQuery Event (Live Demo)
I have a simple html para, whose id is "MyPara" on double click of this paragraph it should display alert.<p id="MyPara" style="background-color:Yellow;color:Red;font-size:2.2em;">Double Click, Paragraph to display alert</p>

Sunday, September 25, 2011

Example 1: Show Alert on html button click using JQuery Event (Live Demo)
I have a simple html button control, whose id is "btnClickMe" on click of this button we will display alert.<button id="btnClickMe">Click Me to Display Alert</button>

});
Whenever we are putting our JQuery code inside this code block means, we are instruction browser to execute JQuery code only when page is loaded and it is ready to execute JQuery code.

Question: Can i put JQuery code directly without even putting it in document.ready function.
Answer: Yes you can do, but in that case you need to be sure that your control is loaded before your JQuery code tries to access it, otherwise you may receive error.

Step 2: Create a Alert function which can be called on button click event.
Note: This is a simple alert function, which is a common javascript alert function.

Example 2: Show Alert on asp.net button click using JQuery Event
I have a asp.net button control, whose id is "btnClickMe" on click of this button we will display alert.<asp:Button ID="btnClickMe" runat="server" Text="Click Me" />

What is JQuery Selectors?
JQuery selectors are used to select elements. In order to apply any effect or style change, it is necessary to select element, JQuery Selectors are used to select element in order to apply those changes.

Lets understand through different examples.

I have a form with text formatted with following html tags

H2 Tag

HR Rule Tag

P Paragraph Tag

UL/LI Tag

B bold Tag

My HTML looks something as below image.

And it appears in browser as under

Ok, now we will start with basic examples of how selectors works in JQuery.

Now let see, how element selector works with asp.net controls in JQuery.

*Please Note: Asp.net web form which is used for example is not following all best practices, since this tutorial series will be focusing only on Jquery. It doesn't contains code in .cs file for input real data in DB.

We know that internally when asp.net web page renders,

All label controls as span tag

All Textbox control as input tag

All dropdown control as select tag

All dropdown items as option element

And so on... ok, now lets begin the game!

Example 1: Lets highlight all label controls, with yellow background.
Please add below script at the end of the page.

You might have also notice that multiline textbox is rendered as textarea and that is reason it doesn't have blue border.

Output on browser screen.

We have found that here it is an issue since, we want to give blue border to all textbox, irrespective of whether it is textmode is multiline (i.e. Textarea) or normal single line textbox control (i.e. Input type="text").

I can add one more line for Textarea to achieve this, but it will not be good way to do things from maintainability point of view. Example: let say if requirement gets change and i want my blue border to appear as red. There are chances that i update one line and not other, in that case few textbox have blue border and other have red.

In this post we will understand more about Multiple Selector in JQuery.

Continue with our earlier example of JQuery Selector. In my previous post, We have found that their is an issue since, we want to give blue border to all textbox, irrespective of whether it is Textarea (i.e. textbox with textmode is multiline) or normal singleline textbox control (i.e. Input type="text").

As i said, I can add one more line for Textarea to achieve this, but it will not be good way to do things from maintainability point of view. Example: let say if requirement gets change and i want my blue border to appear as red. There are chances that i update one line and not other, in that case few textbox have blue border and other have red.

Example 2: To be more specific in above example that only paragraph tag which has class name as para1, should only assign background color as yellow, you should explicitly mention "p.para1" rather than ".para1"

Saturday, September 17, 2011

JQuery is light weight, means its smaller in size and don't increase page size when load, hence page will load faster compare to page which are using asp.net ajax controls.

JQuery script file is cache-able, most of the modern browser do cache of script, css and image files, which means JQuery script file is downloaded only ones when page is loaded for the first time, all subsequent calls to page using JQuery doesn't need to download it again and again.

JQuery has active community, it's very important that you consider community contribution to product. Asp.net Ajax is mostly microsoft contributed and you won't find much free utilities, while JQuery is javascript based open source utility and it has huge technical audience and huge community contribution. You will find lots of free plug and play utilities for JQuery, which is biggest advantage if you are in to rapid development environment.

JQuery can run on any html page, while asp.net ajax controls runs on asp.net web pages.

JQuery is not only used for Ajax, JQuery can be used for giving effects to your website like css changing or pop-up flashing and much more effects, which is not easily available with ajax controls.

I have try to list down few advantages above, but you will find much more ones you actually start using JQuery.

Most Recent Post

Community Updates

Disclaimers:We have tried hard to provide accurate information, as a user, you agree that you bear sole responsibility for your own decisions to use any programs, documents, source code, tips, articles or any other information provided on this Blog.