CODEWITHSUNDEEP
jqueryasp.net
Ahmed S. Durrani
Ahmed S. Durrani

Reputation: 1585

How to call JQuery from ASP Button?

I have been trying to call JQuery code from Button1 but whenever I click the button nothing happens. I suspect there is something is missing here.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"/>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"/>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#Button1").click(function () {
            alert("Hello");
         });
    });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" />    
    </div>
    </form>
</body>
</html>

Please Help me as I am new to Jquery with ASP

Update! Rendered HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#B1").click(function () {
                alert("Hello");
            });
        });
    </script>
</head>
<body>

    <form name="form1" method="post" action="Default.aspx" id="form1" enctype="multipart/form-data">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTExNzQxODc4NzgPZBYCAgMPFgIeB2VuY3R5cGUFE211bHRpcGFydC9mb3JtLWRhdGEWAgITDzwrAA0AZBgBBQlHcmlkVmlldzEPZ2S859s2HXOd3dMN1a3AFBBA24YTWA==" />
</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwLCh8GMCAKl1bK4CQK1qbSRCwKM54rGBgK7q7GGCALWlM+bAgLe7+btDB1tn9tYIpN00SJIvx3i3VxCTOP7" />
</div>


    <input type="submit" name="B1" value="Button" id="B1" />

    </form>

</body>
</html>

Upvotes: 0

Views: 2400

Answers (3)

andres descalzo
andres descalzo

Reputation: 14967

you can try add class to button element, and find this in div context:

Javascript:

$(document).ready(function(){

   var $context = $('#containerForm').find('form'); 
   $context.find('.mybutton').bind('click', function (event) {
      alert("Hello");
   });
});

Html:

<body>
    <div id="containerForm">
       <form id="form1" runat="server">
       <div runat="server">
           <asp:Button ID="Button1" runat="server" Text="Button" class="mybutton" />    
       </div>
       </form>
    </div>
</body>

Edit:

or, find button element with this selector $context.find('input[name*="Button1"]'), using contexts is to have better performance.

Edit II:

Your code work well (see this). You should verify if the file "Scripts/jquery-1.4.1.min.js" is loading fine, you might be positioned in a path that is not on the same level of folder "Scripts", depending on the level or as this set up the project, could you put "Scripts/jquery-1.4.1.min.js", but you have to be careful if you have "/MyProyect/Scripts/jquery-1.4.1.min.js".

To verify this, you can use the "fiddler", and find http status code 400.

Upvotes: 0

MikeM
MikeM

Reputation: 27415

Likely the rendered ID on your <asp:Button /> isn't Button1 but something like ctl00_Button1

Try this instead

$(document).ready(function(){
    $("#<%=Button1.ClientID %>").click(function () {
        alert("Hello");
    });
});

also it appears you're loading jQuery twice, one of those is minified for bandwidth speed

Take out this first one

<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>

Leave this one

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1039438

You have included jquery twice- The standard and the minified version. You don't need to include the same js library twice. Also <script> tags cannot be self closing.

Here's the correct way:

<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#Button1").click(function () {
            alert("Hello");
        });
    });
    </script>
</head>

Also due to control the name mangling in ASP.NET it is recommended to use server side construct to ensure that the id is correct:

$("#<%= Button1.ClientID %>").click(function () {
    alert("Hello");
});

or use a class selector.

Upvotes: 2

Related Questions