Link to home
Start Free TrialLog in
Avatar of thespiceman
thespiceman

asked on

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

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

Avatar of y0usuf
y0usuf

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)

ASKER CERTIFIED SOLUTION
Avatar of funwithdotnet
funwithdotnet

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of thespiceman

ASKER

document.getElementById("<%=imgSignatureCapture.ClientID %>").style.height = "75px"  
causes an object not found error.
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

use this to find client id

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