how to get ID of embedded control in javascript?

  • Thread starter Thread starter Dan
  • Start date Start date
D

Dan

Hi,

There is a detailsview which contains a textbox in editmode.
How to get the id of the textbox in javascript?
I tried this:
<asp:DetailsView ID="DetailsView1" runat="server" >
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</asp:DetailsView>

<script type="text/javascript">
var txt=document.getElementById('TextBox1')
....

Thanks
Dan
 
I have never used the DetailsView control, but I have used templated
controls and I have more than enough experience with ASP.NET to know that
the generated id is almost never the one given to the server control ID
attribute. You will need to use the FindControl() method and the ClientID
property.
 
Thanks for replying,
but with my code, i get the error:
'TextBox1' is not declared'

Textbox1 is embedded in detailsview1.
 
When written inline into script that is generally linked to a separate file
the statement implies the <%=TextBox1.ClientID%> expression is parsed when
the page is compiled. Is this some kind of gift I have been ignorant of?
 
This is my aspx code:

<asp:DetailsView ID="DetailsView1" runat="server" >
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</asp:DetailsView>

and javascript:

<script type="text/javascript">
var txt=document.getElementById('<%=TextBox1.ClientID%>')

With this, i get the error: 'TextBox1' is not declared' and i don't see a
difference between 'TextBox1' and 'TextBox1'.
It is surely my problem, but i post this for help. Thanks
 
This is my aspx code:

<asp:DetailsView ID="DetailsView1" runat="server" >
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</asp:DetailsView>

and javascript:

<script type="text/javascript">
var txt=document.getElementById('<%=TextBox1.ClientID%>')

With this, i get the error: 'TextBox1' is not declared' and i don't see a
difference between 'TextBox1' and 'TextBox1'.
It is surely my problem, but i post this for help. Thanks
 
in the page source, i see: 'DetailsView1_TextBox1'

var txt=document.getElementById('DetailsView1_TextBox1')

this line works. All i wanted to know is whether there was a better way
(using ClientID) to get the id. I find this method (searching in source) a
little bit too basic ..
 
Do you mean you give up?
Is this so a weird problem?
Anyway, thanks for your time ...
I'll do it by searching in the code.
 
You saw my code. The textbox is in the editItemtemplate.
I get that error when the page is loaded. I can't give you more info than
that.
 
unsolved problem ...
if any has an idea ...

Dan said:
You saw my code. The textbox is in the editItemtemplate.
I get that error when the page is loaded. I can't give you more info than
that.
Click to expand...
 
unsolved problem ...
if any has an idea ...
Click to expand...

Alright ... I may be able to help a little bit with this.

This is what I would do: (Note: code is off the top of my head and in
VB.net)

PAGE:
<asp:DetailsView ID="DetailsView1" runat="server" >
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"
OnPreRender="TextBox1_PreRender"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</asp:DetailsView>

CODEBEHIND/BASE CLASS
Protected Sub TextBox1_PreRender(sender as object, e as eventargs)
' First two parameters uniquely identify the JS to be rendered.
The third is the JS itself and the fourth wraps the JS in script tags
Page.ClientScript.RegisterStartUpScript(gettype(<insert page
type>),"any string","var txt=document.getElementById('" &
DirectCast(sender,WebControl).ClientID & "'); //insert other
javascript",true)
End Sub


This way the JS code will only be rendered when the Textbox is being
rendered. Also what you might want to do is write a JS function in a
separate JS file that takes the id as a parameter and then does the
work on it. It will simplify the JS that you are rendering.

i.e.
"var txt=document.getElementById('" &
DirectCast(sender,WebControl).ClientID & "'); //insert other
javascript" = "myFunction('" & DirectCast(sender,WebControl).ClientID
& "');"

Hope this helps!

Norm
 
Yes, thank you.

"Norm" <[email protected]> schreef in bericht
unsolved problem ...
if any has an idea ...
Click to expand...

Alright ... I may be able to help a little bit with this.

This is what I would do: (Note: code is off the top of my head and in
VB.net)

PAGE:
<asp:DetailsView ID="DetailsView1" runat="server" >
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"
OnPreRender="TextBox1_PreRender"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</asp:DetailsView>

CODEBEHIND/BASE CLASS
Protected Sub TextBox1_PreRender(sender as object, e as eventargs)
' First two parameters uniquely identify the JS to be rendered.
The third is the JS itself and the fourth wraps the JS in script tags
Page.ClientScript.RegisterStartUpScript(gettype(<insert page
type>),"any string","var txt=document.getElementById('" &
DirectCast(sender,WebControl).ClientID & "'); //insert other
javascript",true)
End Sub


This way the JS code will only be rendered when the Textbox is being
rendered. Also what you might want to do is write a JS function in a
separate JS file that takes the id as a parameter and then does the
work on it. It will simplify the JS that you are rendering.

i.e.
"var txt=document.getElementById('" &
DirectCast(sender,WebControl).ClientID & "'); //insert other
javascript" = "myFunction('" & DirectCast(sender,WebControl).ClientID
& "');"

Hope this helps!

Norm
 
Now I realise that this is a bit of an long time to wait to give a reply, but none the less, for anyone reading up on this what I did that worked for me is when adding the control (eg. CheckBox) you can give it a OnClick (or what ever you may need) event that looks like this.

OnClick='myFunction(this.id);'

Passing this to this to what ever function you need to perform in JavaScript does pick it up. I've tested this from GridViews, Repeaters and DataLists.

I hope this helps.



Dan wrote:

Re: how to get ID of embedded control in javascript?
15-Oct-08

unsolved problem ..
if any has an idea ..

"Dan" <[email protected]> schreef in bericht

Previous Posts In This Thread:

how to get ID of embedded control in javascript?
Hi

There is a detailsview which contains a textbox in editmode
How to get the id of the textbox in javascript
I tried this
<asp:DetailsView ID="DetailsView1" runat="server"
<asp:TemplateField
<EditItemTemplate
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox
</EditItemTemplate
</asp:TemplateField
</asp:DetailsView

<script type="text/javascript"
var txt=document.getElementById('TextBox1'
...

Thank
Dan

I have never used the DetailsView control, but I have used templated controls
I have never used the DetailsView control, but I have used templated
controls and I have more than enough experience with ASP.NET to know that
the generated id is almost never the one given to the server control ID
attribute. You will need to use the FindControl() method and the ClientID
property
--
Nathan Sokalsk
(e-mail address removed)
http://www.nathansokalski.com


Re: how to get ID of embedded control in javascript?
var txt=document.getElementById('<%=TextBox1.ClientID%>'

-
Mark Ra
ASP.NET MV
http://www.markrae.net

Re: how to get ID of embedded control in javascript?
Thanks for replying
but with my code, i get the error
'TextBox1' is not declared

Textbox1 is embedded in detailsview1


"Mark Rae [MVP]" <[email protected]> schreef in bericht

When written inline into script that is generally linked to a separate file
When written inline into script that is generally linked to a separate file
the statement implies the <%=TextBox1.ClientID%> expression is parsed when
the page is compiled. Is this some kind of gift I have been ignorant of


Re: how to get ID of embedded control in javascript?
Well there is your problem..

JavaScript, like all languages derived from C, is case-sensitive - TextBox
is not the same as Textbox1..

-
Mark Ra
ASP.NET MV
http://www.markrae.net

Re: how to get ID of embedded control in javascript?
This is my aspx code

<asp:DetailsView ID="DetailsView1" runat="server"
<asp:TemplateField
<EditItemTemplate
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox
</EditItemTemplate
</asp:TemplateField
</asp:DetailsView

and javascript

<script type="text/javascript"
var txt=document.getElementById('<%=TextBox1.ClientID%>'

With this, i get the error: 'TextBox1' is not declared' and i don't see a
difference between 'TextBox1' and 'TextBox1'
It is surely my problem, but i post this for help. Thank


"Mark Rae [MVP]" <[email protected]> schreef in bericht

Re: how to get ID of embedded control in javascript?
This is my aspx code

<asp:DetailsView ID="DetailsView1" runat="server"
<asp:TemplateField
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</asp:DetailsView>

and javascript:

<script type="text/javascript">
var txt=document.getElementById('<%=TextBox1.ClientID%>')

With this, i get the error: 'TextBox1' is not declared' and i don't see a
difference between 'TextBox1' and 'TextBox1'.
It is surely my problem, but i post this for help. Thanks


"Mark Rae [MVP]" <[email protected]> schreef in bericht

Re: how to get ID of embedded control in javascript?


Look at your previous post - you wrote:

"Textbox1 is embedded in detailsview1"

Yet the DetailsView is not called "detailsview1", nor does it contain a
TextBox called "Textbox1"

If you do a View Source, what is the munged name of the DetailsView and what
is the name of the munged TextBox? Please be accurate...


--
Mark Rae
ASP.NET MVP
http://www.markrae.net

Re: how to get ID of embedded control in javascript?
in the page source, i see: 'DetailsView1_TextBox1'

var txt=document.getElementById('DetailsView1_TextBox1')

this line works. All i wanted to know is whether there was a better way
(using ClientID) to get the id. I find this method (searching in source) a
little bit too basic ..


"Mark Rae [MVP]" <[email protected]> schreef in bericht

Re: how to get ID of embedded control in javascript?
How about this:

document.getElementById('<%=DetailsView1.FindControl("TextBox1").ClientID%>');


--
Mark Rae
ASP.NET MVP
http://www.markrae.net

Re: how to get ID of embedded control in javascript?
This gives the error:
Object reference not set to an instance of an object


"Mark Rae [MVP]" <[email protected]> schreef in bericht

Re: how to get ID of embedded control in javascript?
Hmm - OK.

This discussion looks similar to your problem:
http://forums.asp.net/t/1075056.aspx


--
Mark Rae
ASP.NET MVP
http://www.markrae.net

Do you mean you give up?Is this so a weird problem?
Do you mean you give up?
Is this so a weird problem?
Anyway, thanks for your time ...
I will do it by searching in the code.

"Mark Rae [MVP]" <[email protected]> schreef in bericht

Re: how to get ID of embedded control in javascript?
Not at all.


No idea - it worked fine for me...

Was the DetailsView definitely in Edit mode when you were trying to
reference the TextBox...?


--
Mark Rae
ASP.NET MVP
http://www.markrae.net

You saw my code. The textbox is in the editItemtemplate.
You saw my code. The textbox is in the editItemtemplate.
I get that error when the page is loaded. I can't give you more info than
that.


"Mark Rae [MVP]" <[email protected]> schreef in bericht

Re: how to get ID of embedded control in javascript?
unsolved problem ...
if any has an idea ...

"Dan" <[email protected]> schreef in bericht

Re: how to get ID of embedded control in javascript?
Yes, thank you.

"Norm" <[email protected]> schreef in bericht

Alright ... I may be able to help a little bit with this.

This is what I would do: (Note: code is off the top of my head and in
VB.net)

PAGE:
<asp:DetailsView ID="DetailsView1" runat="server" >
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"
OnPreRender="TextBox1_PreRender"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</asp:DetailsView>

CODEBEHIND/BASE CLASS
Protected Sub TextBox1_PreRender(sender as object, e as eventargs)
' First two parameters uniquely identify the JS to be rendered.
The third is the JS itself and the fourth wraps the JS in script tags
Page.ClientScript.RegisterStartUpScript(gettype(<insert page
type>),"any string","var txt=document.getElementById('" &
DirectCast(sender,WebControl).ClientID & "'); //insert other
javascript",true)
End Sub


This way the JS code will only be rendered when the Textbox is being
rendered. Also what you might want to do is write a JS function in a
separate JS file that takes the id as a parameter and then does the
work on it. It will simplify the JS that you are rendering.

i.e.
"var txt=document.getElementById('" &
DirectCast(sender,WebControl).ClientID & "'); //insert other
javascript" = "myFunction('" & DirectCast(sender,WebControl).ClientID
& "');"

Hope this helps!

Norm

Re: how to get ID of embedded control in javascript?
P04.phx.gbl...
an
..ClientID%>');

Alright ... I may be able to help a little bit with this.

This is what I would do: (Note: code is off the top of my head and in
VB.net)

PAGE:
<asp:DetailsView ID=3D"DetailsView1" runat=3D"server" >
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID=3D"TextBox1" runat=3D"server"
OnPreRender=3D"TextBox1_PreRender"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</asp:DetailsView>

CODEBEHIND/BASE CLASS
Protected Sub TextBox1_PreRender(sender as object, e as eventargs)
' First two parameters uniquely identify the JS to be rendered.
The third is the JS itself and the fourth wraps the JS in script tags
Page.ClientScript.RegisterStartUpScript(gettype(<insert page
type>),"any string","var txt=3Ddocument.getElementById('" &
DirectCast(sender,WebControl).ClientID & "'); //insert other
javascript",true)
End Sub


This way the JS code will only be rendered when the Textbox is being
rendered. Also what you might want to do is write a JS function in a
separate JS file that takes the id as a parameter and then does the
work on it. It will simplify the JS that you are rendering.

i.e.
"var txt=3Ddocument.getElementById('" &
DirectCast(sender,WebControl).ClientID & "'); //insert other
javascript" =3D "myFunction('" & DirectCast(sender,WebControl).ClientID
& "');"

Hope this helps!

Norm


Submitted via EggHeadCafe - Software Developer Portal of Choice
BOOK REVIEW: Effective C#, Second Edition [Addison Wesley]
http://www.eggheadcafe.com/tutorial...7af-c38852b3b455/book-review-effective-c.aspx
 
Back
Top