Solved

trouble referencing a button from Javascript

Posted on 2013-02-01
8
272 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: 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!

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

The Delta outage: 650 cancelled flights, more than 1200 delayed flights, thousands of frustrated customers, tens of millions of dollars in damages – plus untold reputational damage to one of the world’s most trusted airlines. All due to a catastroph…
In the first part of this tutorial we will cover the prerequisites for installing SQL Server vNext on Linux.
Using examples as well as descriptions, and references to Books Online, show the different Recovery Models available in SQL Server and explain, as well as show how full, differential and transaction log backups are performed
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…

724 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