Saturday, 18 May 2013

Event handler using JQuery



Click event handler of a button using JQuery-
when mouse pointer is over the button and mouse button is pressed and released then click event handler of the button will be fired. We can implement some logic/rules into this handler based on the business requirements.

creating click event handler on a button could be required in two types of scenario-
Scenario 1: when button is existing into the form or direct on the page.
Scenario 2: when button is existing inside another control like grid-view, repeater or any other control.

We will check with both the scenario one by one, Let's see the first scenario -

Scenario 1

when button is existing into the form or direct on the page
Let's follow the below steps :
Step 1 -Add a button to your aspx page under body section with an unique id
<body>
    <form id="form1" runat="server">
    <button type="button" id="formButtonClick">Click!</button>
    </form>
</body>


Step 2 - add the jquery-1.9.1.js file(click here to download) into head section of the aspx page.  
<head runat="server">
    <title></title>
   <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
</head>


Step 3 - Define the event handler and required function
<head runat="server">
    <title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>


<script type="text/javascript">
        $(document).ready(
        function () {
            //Call function to bind event handler
             BindEventHandler();
        });
        //Function definition for binding the event handler
        function BindEventHandler() {
            $("#formButtonClick").on("click", clickeventonformButton1);
        }
        //explain the event handler
        function clickeventonformButton1() {
            alert($(this).text());
        }
    </script>
</head>


Step 4- Right click on the page and 'View in Browser'



Click on the button -  as per our logic alert popup will come










Scenario 2 


when button is existing inside another control like grid-view  repeater or any other control
Let's follow the below steps:
Step 1 - Add a gridview to your aspx page under body section with an unique id and create a button inside it in a column


<body>
    <form id="form1" runat="server">
   
<asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="false">
    <Columns>
    <asp:TemplateField HeaderText="Action">
    <ItemTemplate>
    <button type="button" class="gridbutton"><%# Eval("Serial") %></button>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>

    </form>
</body>

Step 2 - Same as above


Step 3 - Define the event handler and required function

<head runat="server">
    <title></title>
   <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(
        function () {
            //Call function to bind event handler
             BindEventHandler();
                  });
        //Function definition for binding the event handler
        function BindEventHandler() {
             $("#Gridview1").on("click",".gridbutton", clickeventonformButton1);
        }
        //explain the event handler
        function clickeventonformButton1() {
            alert($(this).text());
        }
    </script>
</head>


Step 4 - Right click on the page and View in Browser


Click on the button -  as per our logic alert popup will come


No comments:

Post a Comment