Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How do I Get ClientID using Javascript in .NET User Control?

Posted on 2009-04-01
6
Medium Priority
?
7,183 Views
Last Modified: 2012-05-06
For my web application I have an image control within a user control.  When the user clicks this image I want to change some of the properties, such as the width and height.  How do I get the correct rendered Clientid for this image?  I want to use it with getElementById().  FYI, There could be multiple instances of the user control on the main page.  

I was trying to use the user function GetClientId(strid) (see my code).  GetClientId() returns  "Button1" instead of "imgSignatureCapture".  "Button1" is a button on the main page, not on the user control.  

Any help is greatly appreciated!
<img id="imgSignatureCapture" src="pencil-icon.jpg" 
        style="width: 40px; height: 40px" onclick="test();" />
 
function GetClientId(strid)
{
     var count=document.forms [ 0 ] . length ;
     var i = 0 ;
     var eleName;
     for (i = 0 ;  i < count ;  i++ )
     {
       eleName = document.forms [ 0 ] . elements [ i ] .id;
       pos=eleName.indexOf ( strid ) ;
       if(pos >= 0)  break;           
     }
    return eleName;
 }
 
function test()
{
    alert("GetClientId('imgSignatureCapture') = " + GetClientId('imgSignatureCapture'));  
 
    document.getElementById(GetClientId('imgSignatureCapture')).style.height = "75px" 
    document.getElementById(GetClientId('imgSignatureCapture')).style.width = "75px"
}

Open in new window

0
Comment
Question by:thespiceman
6 Comments
 
LVL 4

Expert Comment

by:y0usuf
ID: 24045705
I think you don't need to look for the clientid of the image. Because the image is html control(you don't have runat="server") you should be able to do document.getelementbyid in your usercontrol and get the image control in javascript.

 If it is a server side control you can use some thing like.
try using document.getElementById("<%=imgSignatureCapture.ClientID %>") in your usercontrol.


Or  aslo you can do is do the page 'View Source' and get the html id of the control and use it in javascript. (This is a bad way but it works)

0
 
LVL 12

Accepted Solution

by:
funwithdotnet earned 2000 total points
ID: 24045856
Your function only loops through the main layer of for elements, not elements contained within. It will return the last element in the form if no match is found.

I would probably do something like this:
<img id="imgSignatureCapture" src="pencil-icon.jpg" 
        style="width: 40px; height: 40px" onclick="test(this);" />
 
function test(obj)
{
    alert("obj id= " + obj.id);  
    obj.style.height = "75px" 
    obj.style.width = "75px"
}

Open in new window

0
 

Author Comment

by:thespiceman
ID: 24045943
document.getElementById("<%=imgSignatureCapture.ClientID %>").style.height = "75px"  
causes an object not found error.
0
 

Author Comment

by:thespiceman
ID: 24046059
funwithdotnet,

Your solution does allow me to access the image file...great!  But I'm not sure if this is the total solution I need.  Here's why...

I simplified my problem with just an image control.  What I really need is to change properties on both the image and an ActiveX control.  Here's the HTML for the ActiveX:
<OBJECT classid="clsid:69A40DA3-4D42-11D0-86B0-0000C025864A"  
            id="SigPlus" name="SigPlus" CODEBASE="http://www.topazsystems.com/Software/sigplus.cab"   
            style="HEIGHT: 1px; LEFT: 0px; TOP: 0px; WIDTH: 1px; visibility:hidden; vertical-align:middle" 
            VIEWASTEXT>
            <PARAM NAME="_Version" VALUE="131095">
            <PARAM NAME="_ExtentX" VALUE="4842">
            <PARAM NAME="_ExtentY" VALUE="1323">
            <PARAM NAME="_StockProps" VALUE="0">
            
        </OBJECT>

Open in new window

0
 
LVL 6

Expert Comment

by:havj123
ID: 24046838
use this to find client id

<script type="text/javascript">
  var txtUsernameID = '<%= txtUsername.ClientID %>';
  var txtPasswordID = '<%= txtPassword.ClientID %>';
</script>
0

Featured Post

NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Hello there! As a developer I have modified and refactored the unit tests which was written by fellow developers in the past. On the course, I have gone through various misconceptions and technical challenges when it comes to implementation. I would…
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)
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…
Suggested Courses

971 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