jQuery on a ASCX user control

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?
pippen.NET Software DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Hi zolla,
Can you please explain where is function "helpBus"?
I think "helpBus" is image control id.
Kiran SonawaneProject LeadCommented:
Show your jquery code..
Albert Van HalenAnalyst developerCommented:
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.
Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

pippen.NET Software DeveloperAuthor Commented:
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>
pippen.NET Software DeveloperAuthor Commented:

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)
Albert Van HalenAnalyst developerCommented:
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.
pippen.NET Software DeveloperAuthor Commented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Albert Van HalenAnalyst developerCommented:
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 ;-)
pippen.NET Software DeveloperAuthor Commented:
My co-worker found the solution.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.