Solved

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

Posted on 2009-04-01
6
7,154 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
[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
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 500 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

Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

627 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