jQuery on a ASCX user control

Posted on 2012-09-05
Medium Priority
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

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

Expert Comment

ID: 38370943
Show your jquery code..
LVL 19

Expert Comment

by:Albert Van Halen
ID: 38371346
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.
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 38372936
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

ID: 38372943

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
ID: 38374020
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

pippen earned 0 total points
ID: 38376005
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
ID: 38377357
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

ID: 38390101
My co-worker found the solution.

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses
Course of the Month15 days, 16 hours left to enroll

850 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