Solved

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

Posted on 2009-04-01
6
7,125 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 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now