jQuery on a ASCX user control

Posted on 2012-09-05
Last Modified: 2012-09-12
I have some jQuery code that works perfectly when I put it in the ASPX file, but when I  move it to the user control (ASCX file) within the ASPX page, it doesn't work.

With debugging on, I discovered that it doesn't even call the jQuery function "helpBus" from this line:

<asp:Image runat="server" ID="helpBus" ImageUrl="~/images/help.gif" />

Is there an inherent conflict between jQuery and ASCX?
Question by:pippen
    LVL 22

    Expert Comment

    Hi zolla,
    Can you please explain where is function "helpBus"?
    I think "helpBus" is image control id.
    LVL 17

    Expert Comment

    Show your jquery code..
    LVL 19

    Expert Comment

    by:Albert Van Halen
    When using IDS in your client code, make sure that you the controls clientID property, instead of its server ID.

    You probably have something like this in your code:

    Open in new window

    The id of the control which is rendered will have its own unique client id by prepending the aspx page hierarchy to it.
    Assuming you have inline scripting insted of an external js-file, you have to use the (generated) client id.
    $("#<%= helpBus.ClientID %>")

    Open in new window

    You can also set the CssClass property of the server control.
    In that case you don't need the ClientID and you can use an external js-file.

    Author Comment

    Albert - I think you are onto something...that I need to refer to the user control on the main page, but what you gave isn't quite working, and I'm not sure I understand what change you are suggesting.

    (See full code below)

    (ucDis is the name of the user control)

    In the code behind of the main .aspx page I have:
    Protected WithEvents ucDist As DisUC //with DisUC being the user control class

    I have references to ucDis from the .aspx, such as with these examples:
    <visionappuc:discounts id="ucDis" runat="Server" entityType="V" >
    Call Sub example: (works): ucDis.FillbusUseHelpContent('insert text here. blah blah blah')

    When I put the jQuery on the main page (and keep the display of the button on the control) and change the jQuery to
     $('#<%= ucDis.helpBus %>').bind('click', function () {
    I get this error --- is not accessible in this context because it is 'Protected'.

    When I change the jQuery function to  
    $('#<%= helpBus.ucDis %>').bind('click', function () {
    I get --- Name 'helpBus' is not declared.

    Or I get -- 'ucDis' is not a member of 'System.Web.UI.WebControls.Image'

    depending on whether I have it on the main page or the control.

    The jQuery can reside on the main page, but the button HAS to be inside the user control because of the size of the control, other elements in it, and placement of the button on the page.

    Here is all of my code. It WORKS from the main .aspx page. When I move the button (or everything) to the user control (where it needs to be), the jQuery function does not get called (debugger never enters it.)

             jQuery in the <head> of the .aspx page (.ascx doesn't have a <head> or even an <html> section,  so I just put it near the top.)

    $(function () {
       $('#helpBus').bind('click', function () {
           var stringMessage = "blah blah blah" //contents of pop up
           $("#dialog").dialog({ title: 'put title here' });

                              // Dialog                  
                            //open:function(){  //tried this - didn't make any difference
                                    autoOpen: false,
                                    show: 'blind',
                                    hide: 'blind',
                                    width: 400,
                                    height: 300,
                                    buttons: {
                                          "Ok": function() {


    In body of page, where clickable button appears:

    <asp:Image runat="server" ID="helpBus" ImageUrl="~/images/helptri.gif" />

    At the bottom of the page. This is required to make the popup work
    --- An empty div
    <div id="dialog"></div>

    Author Comment


    In the code behind of the main .aspx page I have:
    Protected WithEvents ucDis As DisUC //with DisUC being the user control class

    (It's ucDic not ucDist)
    LVL 19

    Expert Comment

    by:Albert Van Halen
    The solution is easy : make the image (which is in your user control) public.
    Or just create a property in the code behind file which return the image control.
    public WebControl ImageControl { get { return helpBus; } }

    Open in new window

    So now you have a public property which is accessible.
    Your markup should look like this
    $('#<%= ucDis.ImageControl.ClientID %>')

    Open in new window

    Again, using CssClass would simplify the problem.
    <asp:Image runat="server" ID="helpBus" ImageUrl="~/images/helptri.gif" CssClass="helpBusImage" />

    Open in new window

    The jQuery selector would then be

    Open in new window

    So that's without the 'ugly' asp tags in the markup plus you can have your client logic in an external js-file rather than within your ascx.

    Accepted Solution

    My co-worker was able to get it working. All he did was change the <asp:Image> into a <img>. Everything elseis the same. It doesn't make sense why that would matter, but it works now.

    Thanks for your suggestions. I tried them before trying what my co-worker had done, to see if they would work too, and to get a deeper understanding of what was going on, but could not get them to work. I'm using VB, so that's part of the difference. Thanks for your help.
    LVL 19

    Expert Comment

    by:Albert Van Halen
    The answer is simple; the img element isn't a server control; hence the id is only available client side; you cannot work with the image server side...

    You will eventually run into similar problems when using more user controls with or without masterpages.
    Keep in mind that server IDs are different than client IDs.
    See my previous comment for a correct working solution ;-)

    Author Closing Comment

    My co-worker found the solution.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    Introduction HyperText Transfer Protocol ( or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
    PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now