How to handle Double click event of asp.net button using JQuery


Subject: Here we can Learn how to Handle Double click event of Asp.Net controls using Jquery, here i will explain with asp.net button control

If you are New to Jquery Start from here.

first take new asp.net empty website and add jquery library to website and add one asp.net webform and write following code

JQuery Script:

<script type="text/javascript">
        $(function () {
            $("input[id$=Button1]").bind({
                click: function (e) {
                    e.preventDefault();
                },
                dblclick: function () {
                    alert("DoubleClick Happed to Button");
                }
            });
        });
    </script>

CompleteCode:

<%@ Page Title="Handling DoubleClick of Asp.Net Button" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="HandlingDoubleClick.aspx.cs" Inherits="HandlingDoubleClick" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("input[id$=Button1]").bind({
                click: function (e) {
                    e.preventDefault();
                },
                dblclick: function () {
                    alert("DoubleClick Happed to Button");
                    //write ur code here
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:Button ID="Button1" runat="server" Text="Double click on me" />
</asp:Content>

Explanation:

Here i am explaining Example with Master pages, the reason is, when the asp.net webform renders as html in browser it will assign dynamic ids for asp.net controls while merging master page and content page. Here why asp.net assigning dynamic ids, because to avoid naming collision

so here we have to use

$("input[id$=Button1]")

this statement to get asp.net control with dynamic id

and Bind method will bind events to control, here we are binding click and double click events

Click Event:

click: function (e) {
                    e.preventDefault();
                },

in this click event we are preventing default behavior of asp.net button control, i.e preventing post back

Double click Event:

dblclick: function () {
                    alert("DoubleClick Happed to Button");
                    //write ur code here
                }

in this double click event write your code…

 

Happy Coding….

If u have any drought feel free to contact from AboutMe page

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s