CODEWITHSUNDEEP
javascriptjqueryasp.net
Charlie
Charlie

Reputation: 113

jQuery event not firing from my asp.net control

I'm fairly new to jQuery and I was trying to achieve some of this functionality in client-side rather than my usual server side code. I just figured that I would add some click events, to get some practice, etc...but I'm seeing this issue and not sure where to start troubleshooting as it is working on my stand alone html page.

This is a web app page which inherits from a Masterpage (Site.Master). I was modifying the .js file a bit as I have been running around a bit by placing the Alert() just to see something...but that wasn't firing.

Why are my events not firing?

HTML:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" 
CodeBehind="ProductMaintenance.aspx.vb" Inherits="CStock.ProductMaintenance" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>     

<asp:UpdatePanel ID="UpdatePanel2" runat="server" >
    <ContentTemplate>

    <asp:Panel ID="Panel1" runat="server" GroupingText="" cssClass="pnl1">
    </asp:Panel>

    <div class="mainGroup">
        <div class="headerGroup">
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <select name="type" id="type">
                <option value="Categories">Categories </option>
                <option value="Products">Products </option>                   
            </select>              
        </div>
    </div>

    <div>
        <asp:Button ID="submitform" runat="server"  Text="Button" />
        <asp:Button ID="HideButton" runat="server" Text="HideButton" />            
        <hr />
    </div>



    </ContentTemplate>    
</asp:UpdatePanel>

<div class="sqlData">
...
...
...

</div>

<script type="text/javascript" src="scripts/jquery.js"></script> 
<script type="text/javascript" src="scripts/site.js"></script>

Javascript (site.js)

 $('#submitform').on('click', function (event) {    
       Alert("TESTING");
       $( ".HideButton" ).hide();
       $( "#HideButton" ).hide();
})


$('input[name=submitform]')
.click(
     function ()
     {
        $(this).hide();
        $( ".HideButton" ).hide();
        $("#HideButton").hide();
        Alert("TESTING");
     }
);

Updated Javascript:

$('#submitform').on('click', function (event) {    
    Alert("TESTING");
   // $( ".HideButton" ).hide();
   // $( "#HideButton" ).hide();
})


$('input[id*=submitform]')
.click(
     function ()
     {
        Alert("TESTING2");
     }
);

    $('input[name=submitform]')
.click(
     function () {
         Alert("TESTING2");
     }
);

Separately, which method to add the events is best practice?

Upvotes: 0

Views: 1916

Answers (2)

Joel
Joel

Reputation: 2257

Your events aren't firing because .NET translates your IDs when they're server controls (has the runat="server" attribute). For instance, you gave the button the ID "submitform", but when it's generated on the page it's probably something like "ctl00_container_submitform". Take a look at the generated page source and you'll see what I mean. You can still accomplish what you want with jquery. Just change your selector to $("[id*=submitform]") which will look for any control with the attribute "id" that ends with "submitform".

EDIT: Since your button is in an update panel, you'll want to update to the following:

$(document).on('click', '[id*=submitform]', function () {});

Check out the documentation for "on" here http://api.jquery.com/on/

When the content in the update panel is replaced, the binding for that button is being lost. if you bind to the document (which is static), the binding will always be in effect. The optional selector parameter indicates that the function should be fired if the document is clicked, and if the element in the document matches the selector.

Upvotes: 2

gorrilla10101
gorrilla10101

Reputation: 394

add the attribute ClientIDMode="static to the buttons

  <asp:Button ID="submitform" runat="server"  Text="Button" ClientIDMode="Static"/>
  <asp:Button ID="HideButton" runat="server" Text="HideButton" ClientIDMode="Static" />

then you can reference them by just $("#submitForm") and $("#HideButton")

in order to guarantee unique IDs webforms adds things to the id field when it is added. Changing ClientIDMode to static tells it that you will make sure that it will always be unique and it will give you the proper ID

Upvotes: 2

Related Questions