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

G

Guest

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
 
G

Guest

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?
 
B

bruce barker \(sqlwork.com\)

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)
 
S

Steven Cheng[MSFT]

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.GetType(),
"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.)
 
G

Guest

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) said:
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 said:
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
 
S

Steven Cheng[MSFT]

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.)
 
S

Steven Cheng[MSFT]

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.)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,969
Messages
2,570,161
Members
46,708
Latest member
SherleneF1

Latest Threads

Top