By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,704 Members | 1,122 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,704 IT Pros & Developers. It's quick & easy.

Client-Side JavaScript Problem in runat=server "<SELECT>"

P: n/a
I have some client-side JavaScript that I want to run whenever a pulldown
<SELECT> is changes on th client. I'm trying to do this as follows...

<select id="MyPulldown" onchange="handleProblemChange();" runat="server">

If I do this, I get client-side javascript errors because the id
"MyPulldown" doesn't exist. It's been mangled into this crazy-named thing
that I can't use.

How do I fix this so that the ID that I give it ends up being the same on
both the server and client side?

Alex
Apr 26 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
I should add that this code is in a page that's part of a MasterPage. Is that
the reason that the client-side ID is all mangled? How can I fix this?

"Alex Maghen" wrote:
I have some client-side JavaScript that I want to run whenever a pulldown
<SELECT> is changes on th client. I'm trying to do this as follows...

<select id="MyPulldown" onchange="handleProblemChange();" runat="server">

If I do this, I get client-side javascript errors because the id
"MyPulldown" doesn't exist. It's been mangled into this crazy-named thing
that I can't use.

How do I fix this so that the ID that I give it ends up being the same on
both the server and client side?

Alex

Apr 26 '06 #2

P: n/a
http://msdn2.microsoft.com/en-US/lib...2a(VS.80).aspx

You can use the UniqueId property of a server side control to get the
generated name ... you can then write out the required javascript using this
name from the code behind.

Cheers.

Greg Young
"Alex Maghen" <Al********@newsgroup.nospam> wrote in message
news:52**********************************@microsof t.com...
I should add that this code is in a page that's part of a MasterPage. Is
that
the reason that the client-side ID is all mangled? How can I fix this?

"Alex Maghen" wrote:
I have some client-side JavaScript that I want to run whenever a pulldown
<SELECT> is changes on th client. I'm trying to do this as follows...

<select id="MyPulldown" onchange="handleProblemChange();"
runat="server">

If I do this, I get client-side javascript errors because the id
"MyPulldown" doesn't exist. It's been mangled into this crazy-named thing
that I can't use.

How do I fix this so that the ID that I give it ends up being the same on
both the server and client side?

Alex

Apr 26 '06 #3

P: n/a
when a control is nested in another control, the parents names is added.
this keeps the names unique. think about placing a named control in a
reapter. you can use the UniqueId to get the actual rendered id.

simpler is to pass the control to function, so you do not need the name:

<select id="MyPulldown" onchange="handleProblemChange(this);"
runat="server">

<script.>
function handleProblemChange(e)
{
alert(e.id + ' ' + e.options[e.selectedIndex].value); // display
control id and value
}
</script>
-- brice (sqlwork.com)

"Alex Maghen" <Al********@newsgroup.nospam> wrote in message
news:A1**********************************@microsof t.com...
I have some client-side JavaScript that I want to run whenever a pulldown
<SELECT> is changes on th client. I'm trying to do this as follows...

<select id="MyPulldown" onchange="handleProblemChange();"
runat="server">

If I do this, I get client-side javascript errors because the id
"MyPulldown" doesn't exist. It's been mangled into this crazy-named thing
that I can't use.

How do I fix this so that the ID that I give it ends up being the same on
both the server and client side?

Alex

Apr 26 '06 #4

P: n/a
Hi Alex,

For client-side html element's event handler, you can pass the additional
reference to the element itself to the handler function. For example,
suppose we have the following html select list,

<select id="lst" runat="server" onchange="lst_onchange(this);">
......
</select>

and the script handler function is like below:

function lst_onchange(lst)
{
// use lst to reference the select element directly
}

Thus, we even do not need to care about the actual client-side ID of the
rendered select html element.

BTW, for control whose clientside ID will be mangled, we can use its
"ClientID" server-side property to get its client-side(managled).

For example, for the above instance, we use a non-parameter handler
function, and register it dynamically in codebehind so that we can output
the correct client-side of the select list:

=======aspx============
<select id="lst" runat="server" onchange="handlechange();" >
<option title="item1" value="item1">item1</option>
<option title="item2" value="item2">item2</option>
<option title="item3" value="item3">item3</option>
</select>
================

==========code behind=======
protected void Page_Load(object sender, EventArgs e)
{
string script = @"
<script language='javascript'>
function handlechange()
{
var lst = document.getElementById('lstid');

alert(lst.selectedIndex);
}

</script>
";

Page.ClientScript.RegisterClientScriptBlock(this.G etType(),
"lst_onchange",
script.Replace("lstid", lst.ClientID)
);

}
============================

Hope this helps.

Regards,

Steven Cheng
Microsoft Online Community Support
==================================================

When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.

==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Apr 26 '06 #5

P: n/a
Wow! So you're saying that these controls are considered to be nested inside
other controls by virtue of being contained inside a MasterPage? That's a
little ugly isn't it? It's just that not being able to rely on the ID of an
object seems to defeat a lot of the magic that ASP.NET created in the first
place for having aceess to an object both on the client and the server side.

"bruce barker (sqlwork.com)" wrote:
when a control is nested in another control, the parents names is added.
this keeps the names unique. think about placing a named control in a
reapter. you can use the UniqueId to get the actual rendered id.

simpler is to pass the control to function, so you do not need the name:

<select id="MyPulldown" onchange="handleProblemChange(this);"
runat="server">

<script.>
function handleProblemChange(e)
{
alert(e.id + ' ' + e.options[e.selectedIndex].value); // display
control id and value
}
</script>
-- brice (sqlwork.com)

"Alex Maghen" <Al********@newsgroup.nospam> wrote in message
news:A1**********************************@microsof t.com...
I have some client-side JavaScript that I want to run whenever a pulldown
<SELECT> is changes on th client. I'm trying to do this as follows...

<select id="MyPulldown" onchange="handleProblemChange();"
runat="server">

If I do this, I get client-side javascript errors because the id
"MyPulldown" doesn't exist. It's been mangled into this crazy-named thing
that I can't use.

How do I fix this so that the ID that I give it ends up being the same on
both the server and client side?

Alex


Apr 26 '06 #6

P: n/a
Hey Alex,

Have you had a chance to have a look at my last reply? As I mentioned we
can programmatically get any server control's client-side ID through the
"ClientID" property (after they have been correctly added into their parent
NamingContainer). ClientID is just the one useful to our client-side
script, and for server-side, we use the "ID" property to locate a
servercontrol in its NamingContainer.

Also, as for master page in ASP.NET 2.0, it is somewhat like a Usercontrol,
and it is the concrete page(which applied the Master page) that will
include the master page as a sub control, rather than the Master Page
include the concrete page.

BTW, we can turn on the ASP.NET page's output Trace through the @Page
directive in aspx file, thus, the runtime page will display the whole
page's control Tree which is quite useful for understanding the page's
control structure.

Anyway, please feel free to post here if you have any question on this.

Regards,

Steven Cheng
Microsoft Online Community Support
==================================================

When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.

==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Apr 27 '06 #7

P: n/a
Hi Alex,

Any further progress on this? Also, I've found your other new threads on
the script manipulating in ASP.NET 2.0 pages and have posted some other
suggestion there. Anyway, if there is anything we can help ,please feel
free to post here.

Regards,

Steven Cheng
Microsoft Online Community Support
==================================================

When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.

==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

May 1 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.