Solved

trouble referencing a button from Javascript

Posted on 2013-02-01
8
267 Views
Last Modified: 2013-02-01
Here's ASP for a button.  

<Tabor:ThemeButton runat="server" id="btnNext" button-causesvalidation="False" button-commandname="Redirect" button-onclientclick="nextClick();" button-text="Next >>" button-tooltip="Goto Next Tab"></Tabor:ThemeButton>

I'm trying to reference it in javascript using the code shown below but my btnNext var is always NULL.  What am I doing wrong?

var btnNext = document.getElementById("<%= btnNext.ClientID %>");
alert(btnNext);
0
Comment
Question by:HLRosenberger
  • 4
  • 4
8 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38843973
Are you trying to reference the button before it exists on the page? If your script is in the head of the page and not inside a function, it will run before the button is rendered on the page and thus will be null when the alert is triggered.
0
 
LVL 1

Author Comment

by:HLRosenberger
ID: 38844011
It is in a function.   What I actually have is a "Next" button, like with a Wizard.  When I get to the last area of the Wizard, I want to disable the Next button.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38844094
On the rendered page, does <%= btnNext.ClientID %> resolve to the button id or does it leave a blank?
0
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
LVL 1

Author Comment

by:HLRosenberger
ID: 38844102
What do you mean?  is the button actually rendered and I can see it?  Yes.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 38844131
In the "view source" of the rendered page, look at how this javascript line appears:

var btnNext = document.getElementById("<%= btnNext.ClientID %>");

Does <%= btnNext.ClientID %> resolve to the button id or does it leave a blank
0
 
LVL 1

Author Comment

by:HLRosenberger
ID: 38844240
Ah, that's the ticket!   In view source it's ID =  "ctl00_PageContent_btnNext__Button"

So, this code works;

var btn = document.getElementById("ctl00_PageContent_btnNext__Button");

Thanks!
0
 
LVL 1

Author Closing Comment

by:HLRosenberger
ID: 38844242
thanks
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38844280
Thanks for the points.

Be careful with that approach. You are circumventing asp.net's authority to create unique ids as it deems necessary. It will work and may continue working for the life of the application. But it may stop working after an asp.net version upgrade if Microsoft decides to change the way it auto-generates unique ids. What confuses me is if this line:

var btnNext = document.getElementById("<%= btnNext.ClientID %>");

is being rendered as:

var btn = document.getElementById("ctl00_PageContent_btnNext__Button");

then why is it not working the way you had it?
0

Featured Post

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

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…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This videos aims to give the viewer a basic demonstration of how a user can query current session information by using the SYS_CONTEXT function
Viewers will learn how to use the UPDATE and DELETE statements to change or remove existing data from their tables. Make a table: Update a specific column given a specific row using the UPDATE statement: Remove a set of values using the DELETE s…

809 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