Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 7199
  • Last Modified:

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

0
thespiceman
Asked:
thespiceman
1 Solution
 
y0usufCommented:
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
 
funwithdotnetCommented:
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
 
thespicemanAuthor Commented:
document.getElementById("<%=imgSignatureCapture.ClientID %>").style.height = "75px"  
causes an object not found error.
0
 
thespicemanAuthor Commented:
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
 
havj123Commented:
use this to find client id

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

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now