How do you refer to an HTML server-ran control in client-side javascript?

How do you refer to an HTML server-ran control in client-side javascript?

Post by Computer Use » Wed, 29 Jan 2003 21:46:29



How do you refer to an HTML server-ran control in client-side javascript?

Let's say I create a few HTML controls and change their runat attribute to
"server". ASP.NET changes the names of these controls before they get sent
to the user's browswer. This makes it hard to create a client-side script
that refers to these controls.

Yes, I know about "RegisterClientScriptBlock" to create the client code on
the server to be created on the client side. My problem is referring to
these HTML server controls in client side code.

I have tried the following server side code in my code-behind file (VB.NET):

strDemo &= "<script language=""JavaScript"">"
strDemo &= "    function btnJoinNewsLetter_onclick() {   "
strDemo &= "        var objTXT = document.getElementById(" &
txtEmailAdd.ClientID & ");"
strDemo &= "        alert(objTXT.value);"
strDemo &= "    }"
strDemo &= "</script>"
Page.RegisterClientScriptBlock("ClientSideCode", strDemo)

Here's my code in my page file (.aspx):
<input type="text"      size="8"      name="txtEmailAdd"

HEIGHT:22px"      runat="server"      id="txtEmailAdd">
<input type="button"      name="btnJoinNewsLetter"     value="Submit"
style=" MARGIN-TOP:5px;     MARGIN-BOTTOM:3px;     WIDTH:95px;
HEIGHT:22px"      runat="server"      id="btnJoinNewsLetter"
onclick="btnJoinNewsLetter_onclick();">

I'd be happy if I could just get some little peice of sample code like this
to work where I have an JavaScript alert popping up a value of an HTML
control that has its runat attribute set to server.

Thanks!

 
 
 

How do you refer to an HTML server-ran control in client-side javascript?

Post by Marin » Wed, 29 Jan 2003 23:35:53


What you were already doing should be fine. Just make sure the final
javascript is valid (I think you may be missing quotes around your argument
to getElementById).


> How do you refer to an HTML server-ran control in client-side javascript?

> Let's say I create a few HTML controls and change their runat attribute to
> "server". ASP.NET changes the names of these controls before they get sent
> to the user's browswer. This makes it hard to create a client-side script
> that refers to these controls.

> Yes, I know about "RegisterClientScriptBlock" to create the client code on
> the server to be created on the client side. My problem is referring to
> these HTML server controls in client side code.

> I have tried the following server side code in my code-behind file
(VB.NET):

> strDemo &= "<script language=""JavaScript"">"
> strDemo &= "    function btnJoinNewsLetter_onclick() {   "
> strDemo &= "        var objTXT = document.getElementById(" &
> txtEmailAdd.ClientID & ");"
> strDemo &= "        alert(objTXT.value);"
> strDemo &= "    }"
> strDemo &= "</script>"
> Page.RegisterClientScriptBlock("ClientSideCode", strDemo)

> Here's my code in my page file (.aspx):
> <input type="text"      size="8"      name="txtEmailAdd"

> HEIGHT:22px"      runat="server"      id="txtEmailAdd">
> <input type="button"      name="btnJoinNewsLetter"     value="Submit"
> style=" MARGIN-TOP:5px;     MARGIN-BOTTOM:3px;     WIDTH:95px;
> HEIGHT:22px"      runat="server"      id="btnJoinNewsLetter"
> onclick="btnJoinNewsLetter_onclick();">

> I'd be happy if I could just get some little peice of sample code like
this
> to work where I have an JavaScript alert popping up a value of an HTML
> control that has its runat attribute set to server.

> Thanks!


 
 
 

How do you refer to an HTML server-ran control in client-side javascript?

Post by Randy Haye » Wed, 29 Jan 2003 23:37:51


Your best practice for controls and client script is to
1) create a custom control that inherits from your desired base control
2) override the OnPreRender method.  in the OnPreRender override:
    - You will have the ID of the control that .net will emit
    - You can then use your register client script and dynamically change
the id based on the controls real id
3) override the Render method.  In the render method:
    - Determine browser caps (if needed)
    - emit control attributes needed to use your script (i.e. the OnClick
attribute)

Doing this not only give you the control that you want, but also provide a
re-usable control.  It also does the job the way the asp.net web server
controls do it.

If you want some excellent guidelines on how to do this the "right way" read
the book "Developing Microsoft ASP.NET Server Controls and Components" (chap
13)  By far the best book on the subject.

I know this may not be a direct answer to your question, but I highly
recommend the above practice for controls and client side script.  It has
saved me large amounts of grief!


> How do you refer to an HTML server-ran control in client-side javascript?

> Let's say I create a few HTML controls and change their runat attribute to
> "server". ASP.NET changes the names of these controls before they get sent
> to the user's browswer. This makes it hard to create a client-side script
> that refers to these controls.

> Yes, I know about "RegisterClientScriptBlock" to create the client code on
> the server to be created on the client side. My problem is referring to
> these HTML server controls in client side code.

> I have tried the following server side code in my code-behind file
(VB.NET):

> strDemo &= "<script language=""JavaScript"">"
> strDemo &= "    function btnJoinNewsLetter_onclick() {   "
> strDemo &= "        var objTXT = document.getElementById(" &
> txtEmailAdd.ClientID & ");"
> strDemo &= "        alert(objTXT.value);"
> strDemo &= "    }"
> strDemo &= "</script>"
> Page.RegisterClientScriptBlock("ClientSideCode", strDemo)

> Here's my code in my page file (.aspx):
> <input type="text"      size="8"      name="txtEmailAdd"

> HEIGHT:22px"      runat="server"      id="txtEmailAdd">
> <input type="button"      name="btnJoinNewsLetter"     value="Submit"
> style=" MARGIN-TOP:5px;     MARGIN-BOTTOM:3px;     WIDTH:95px;
> HEIGHT:22px"      runat="server"      id="btnJoinNewsLetter"
> onclick="btnJoinNewsLetter_onclick();">

> I'd be happy if I could just get some little peice of sample code like
this
> to work where I have an JavaScript alert popping up a value of an HTML
> control that has its runat attribute set to server.

> Thanks!

 
 
 

1. How do I call a server-side click event after client-side Javascript runs?

I have a Web form that I want to runs some checks on using JavaScript and if
the script passes, then I want to call the Click event of the button.

I have tried using the following code:
nextButton.Attributes.Add("onclick", "submitPage();");
nextButton.Click += new EventHandler(nextButton_Click);

This calls the JavaScript function (submitPage), but it calls the Click
event even if the script fails.  Is there a way to call the Server-side
click event from javascript?  Or, is there a way to disable the Click-Event?
I guess an alternative would be to just submit the form using javascript and
handle the post-back in the page load, but I was hoping that there is a more
elegant way to handle this.

2. Cannot add Web Reference

3. How do you refer to HTML server controls in client side code?

4. HP 970

5. how can you write client side javascript for an html control (that has runat=server)?

6. Date format

7. Client Side vs Server Side code in HTML Server Controls

8. ANNOUNCEMENT: iReasoning SNMP Manager/Agent Toolkit (ver 2.2, Java)

9. if a webform control or server control can handle both client-side and server-side events

10. How do I run client-side javascript with a .NET web control???

11. How could I call server-side function from client-side Javascript?

12. Getting server control values in client-side JavaScript?

13. Run client-side JavaScript when a asp:Button is clicked