Selecting an Asp.net control using jquery

Question

I have a slight issue where I can't seem to select a User Control ID using jquery. The User Control is a message panel which appears when an action happens. So when the page loads this message panel isn't part of the page. It is only when the user interacts with the page i.e. add an image that the message panel shows with a message.

Page controls

<asp:Panel ID="pan_cntrls" runat="server">
   <asp:Button ID="btnAddNewImg" runat="server" Text="Add new image" OnClick="btnAddNewImg_Click"
       Visible="true" />
   <uc9:MessagePanel ID="messagepanel1" runat="server"></uc9:MessagePanel>
</asp:Panel>

Javascript

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#PageContent_IMG1_messagepanel1_divMessageBox").click(function () {
            alert("handler called");
        });
   });

What firebug shows

<div class="errorBox confirmation" id="PageContent_IMG1_messagepanel1_divMessageBox" style="height: 50px;">

I can select other IDs using jquery but not this one. I should also point out that I am using a modalpopupextender on the page. So when I submit data the page is doing postback. I tried using delegate because the ID is added to the DOM after page load but its not working.

Any ideas?

Thanks

Is it as simple as the ## at the beginning of the jquery selector? - should it just be a single #? — Jon Egerton
– Jon Egerton, Commented Apr 2, 2012 at 10:20
Something else is wrong. You code is fine, check jsfiddle.net/nsgmx — Marco Johannesen
– Marco Johannesen, Commented Apr 2, 2012 at 10:28
Do you have asp.net ajax modalpopupextender ? How you postback the data? Show the relevant markup/code. — Software Engineer
– Software Engineer, Commented Apr 2, 2012 at 10:36

Jon Egerton · Accepted Answer · 2012-04-02 10:34:20Z

2

Basically, the problem is that you're adding the handler at $(document).ready. The divs don't exist yet, so this call does nothing.

You need to attach the click handler after the div hits the page. There are a couple of ways you can achieve this:

1

Use add_endRequest, so execute the document.ready code after async queries:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
    $("#PageContent_IMG1_messagepanel1_divMessageBox").click(function () {
        alert("handler called");
    });
});

or 2

Explicitly make an addHandler function and cause it using an injection from asp.net:

In JS:

function addHandler (ctrlID) {
    $("#" + ctrlID).click(function () {
        alert("handler called");
    });
};

In ASP.Net:

Use RegisterStartupScript to call the addHandler, passing the ClientID of the control that needs the handler adding. See here for info on RegisterStartupScript.

The first of these options is less efficient than the second (as it will execute after all postbacks), but easier to implement.

answered Apr 2, 2012 at 10:34

Jon Egerton

41.8k11 gold badges100 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jon Egerton Over a year ago

I've not done it here, but you should use the <%=divMessageBox.ClientID%> instead of hardcoding the full clientID, as it will possible change as you work on other elements in the page.

nick gowdy Over a year ago

Thanks this worked! I knew that the jquery couldn't see the div but wasn't sure about how to fix this.

Marc · Accepted Answer · 2012-04-02 10:27:24Z

0

Can you try this

    <script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#<%=PageContent_IMG1_messagepanel1_divMessageBox.ClientID%>").click(function () {
            alert("handler called");
        });
   });

this way, you gonna be sure that it's the id on the client side

When ASP.NET renders server side controls it gives them unique client ids which are different from their server ids and if you are not sure, you can check the source of your ASP.NET page

answered Apr 2, 2012 at 10:27

Marc

16.6k20 gold badges80 silver badges121 bronze badges

2 Comments

nick gowdy Over a year ago

Compilation Error Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. Compiler Error Message: CS0103: The name 'PageContent_IMG1_messagepanel1_divMessageBox' does not exist in the current context

nick gowdy Over a year ago

Its not part of the page when page first loads.

Software Engineer · Accepted Answer · 2012-04-02 10:30:52Z

0

To get user-control's ID at client-side, you have to set its ClientID property.

answered Apr 2, 2012 at 10:30

Software Engineer

3,9861 gold badge28 silver badges35 bronze badges

Collectives™ on Stack Overflow

Selecting an Asp.net control using jquery

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related