calling clientside js with onchange event

  • Thread starter Thread starter Zeebra3
  • Start date Start date
Z

Zeebra3

Here goes: I have a web form with several asp:dropdownlists, with
which, when selection is changed I want to fire an event defined in
some clientside js.

The content of the clientside code is dependant on data collected in
the code behind on the server. I have set AutoPostback to false for
the controls and added lines such as
cboMyCombo1.Attributes.Add("onchange", "MyCombos_OnChange('1')");
in the Page_Load event, which is rendered OK when I view the source of
the page.
I wanted to use RegisterClientScriptBlock to get the client js into
the page, but found that it didn't put the code into the <head> tag,
but into the <form> tag. After some research I deemed it necessary to
get the js into the <head> tag and so I added an id and runat=server
to the head tag.
At design time I have some script already declared in the head tag so
I got the InnerHtml property of the head tag in the Page_Load event
and appended some more script within an additional <script> tags.

When rendered and looking at the source, everything appears to be
where I want it to be on the page. The onchange attributes are there
and the 'MyCombos_OnChange' js function is within the head tag.
However, you've guessed it, I get the good old message
"Microsoft JScript runtime error: Object expected" suggesting that the
'MyCombos_OnChange' function called from the onchange attribute is not
defined.
Interestingly, if I change the cboMyCombo1.Attributes.Add call in
Page_Load to add the attribute onchange and call a function that is
already hard coded into the page, this function is called OK. I have
also tried swapping round the order in which hard coded client js and
dynamic js appears, even taken out all hard coded client js. I just
can't get my onchange event to call a dynamically created js function
even when it is within the head tag.
I may be overlooking something, but I've exhausted all posts similar
to this problem and am now seeking inspiration.
Thanks for any help with this
 
Hi Davec,

After reviewing the description, I think the question is: You used
InnerHtml property of the head tag in the Page_Load event to add some
JavaScript code into <head> ...</head>, and used
cboMyCombo1.Attributes.Add("onchange", "MyCombos_OnChange('1')") to call
MyCombos_OnChange when the dropdownlist’s onchange event fires. However,
the MyCombos_OnChange was not called as expected and A "Microsoft JScript
runtime error: Object expected" error occurred. Please post here if I have
any misunderstandings.

I have done a test and here is the code snippet. It works well on my
machine; you can try it on your side.

private void Page_Load(object sender, System.EventArgs e)
{
HtmlGenericControl head=(HtmlGenericControl)this.FindControl ("myhead");
head.InnerHtml ="<script language=JavaScript> function
MyCombos_OnChange(i){alert(i);}</script>";
DropDownList1.Attributes.Add("onchange","MyCombos_OnChange('1')");
}

<HEAD id ="myhead" runat =server >
...
...
</HEAD>


<form id="Form1" method="post" runat="server">
<asp:DropDownList id="DropDownList1" style="Z-INDEX: 101; LEFT: 128px;
POSITION: absolute; TOP: 80px" runat="server">
<asp:ListItem >1</asp:ListItem>
<asp:ListItem >2</asp:ListItem>
<asp:ListItem >3</asp:ListItem>
</asp:DropDownList>
</form>

Additionally, please check the rendered html and find if it is correct on
the client side. If the problem is still not resolved, please past some
lines of code here then I might be able to work out what the problem is.

Best regards,
Lewis

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

--------------------
| From: (e-mail address removed) (Zeebra3)
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| Subject: calling clientside js with onchange event
| Date: 5 Aug 2003 09:15:22 -0700
| Organization: http://groups.google.com/
| Lines: 36
| Message-ID: <[email protected]>
| NNTP-Posting-Host: 193.132.206.100
| Content-Type: text/plain; charset=ISO-8859-1
| Content-Transfer-Encoding: 8bit
| X-Trace: posting.google.com 1060100123 10612 127.0.0.1 (5 Aug 2003
16:15:23 GMT)
| X-Complaints-To: (e-mail address removed)
| NNTP-Posting-Date: 5 Aug 2003 16:15:23 GMT
| Path:
cpmsftngxa06.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfeed00.sul.t-online.de!t-onlin
e.de!peernews3.colt.net!news0.de.colt.net!news-fra1.dfn.de!npeer.de.kpn-euro
rings.net!in.100proofnews.com!in.100proofnews.com!pd2nf1so.cg.shawcable.net!
residential.shaw.ca!sn-xit-03!sn-xit-01!sn-xit-05!sn-xit-09!supernews.com!po
stnews1.google.com!not-for-mail
| Xref: cpmsftngxa06.phx.gbl microsoft.public.dotnet.framework.aspnet:165025
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| Here goes: I have a web form with several asp:dropdownlists, with
| which, when selection is changed I want to fire an event defined in
| some clientside js.
|
| The content of the clientside code is dependant on data collected in
| the code behind on the server. I have set AutoPostback to false for
| the controls and added lines such as
| cboMyCombo1.Attributes.Add("onchange", "MyCombos_OnChange('1')");
| in the Page_Load event, which is rendered OK when I view the source of
| the page.
| I wanted to use RegisterClientScriptBlock to get the client js into
| the page, but found that it didn't put the code into the <head> tag,
| but into the <form> tag. After some research I deemed it necessary to
| get the js into the <head> tag and so I added an id and runat=server
| to the head tag.
| At design time I have some script already declared in the head tag so
| I got the InnerHtml property of the head tag in the Page_Load event
| and appended some more script within an additional <script> tags.
|
| When rendered and looking at the source, everything appears to be
| where I want it to be on the page. The onchange attributes are there
| and the 'MyCombos_OnChange' js function is within the head tag.
| However, you've guessed it, I get the good old message
| "Microsoft JScript runtime error: Object expected" suggesting that the
| 'MyCombos_OnChange' function called from the onchange attribute is not
| defined.
| Interestingly, if I change the cboMyCombo1.Attributes.Add call in
| Page_Load to add the attribute onchange and call a function that is
| already hard coded into the page, this function is called OK. I have
| also tried swapping round the order in which hard coded client js and
| dynamic js appears, even taken out all hard coded client js. I just
| can't get my onchange event to call a dynamically created js function
| even when it is within the head tag.
| I may be overlooking something, but I've exhausted all posts similar
| to this problem and am now seeking inspiration.
| Thanks for any help with this
|
 
Hi

It should not matter that the onchange function is in the form tag
--------------8<---------
<html>
<head>
</head>
<body>
<form>
<script language="JavaScript">
function doIt(e){
alert(e.selectedIndex);
}
</script>
<select name="mySelect" onchange="doIt(this)">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
</body>
</html>
------------->8----------------------

Post the code generated for the onchange handler.....

--
Best Regards
Vidar Petursson
==============================
Microsoft Internet Client & Controls MVP
==============================
 
Hi again, confusion reigns. Thanks for your reponses Lewis and Vidar,
much appreciated. Let me tie this thing up.
Firstly Lewis. The only differences in principle between what you
posted and what I had done, was that I was appending additional script
onto the end of the contents of the Head innerhtml and I also had the
comment tags within the script. Now I know these are small things but
bear with me.
The script function that I was embedding into the page was built up as
a string on the serverside and looked similar to this
<script language="javascript"><!--function
doThis(arg){window.alert("Hi there");}--></script>
This was being appended to the head innerhtml which already contained
some js functions within script tags, something like
<script language="javascript">
<!--
function myFunct(){
window.alert("hello");
}
-->
</script>
After posting I managed to get my dynamic code working by inserting it
into the existing script tag before the first existing function.

The crucial difference was that because I was inserting it into
existing script tags, I had taken out the <!-- --> comments as they
were already present. It seemed that they were causing the failure due
to the fact that I had no line breaks around them.

And so Vidar, you are correct. Once I had ensured that the script had
the comment tags on separate lines, I could indeed use
RegisterClientScriptBlock to add the code into the form tag, with no
problems.

All's well that ends well, and thanks again for your responses.
 
Hi Davec,

I am glad to hear you had found where the problem is. Thank you for sharing
the knowledge in the newsgroup.

Have a nice day.

Lewis

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


--------------------
| From: (e-mail address removed) (Zeebra3)
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| Subject: Re: calling clientside js with onchange event
| Date: 8 Aug 2003 02:15:29 -0700
| Organization: http://groups.google.com/
| Lines: 34
| Message-ID: <[email protected]>
| References: <[email protected]>
| NNTP-Posting-Host: 193.132.206.100
| Content-Type: text/plain; charset=ISO-8859-1
| Content-Transfer-Encoding: 8bit
| X-Trace: posting.google.com 1060334130 21829 127.0.0.1 (8 Aug 2003
09:15:30 GMT)
| X-Complaints-To: (e-mail address removed)
| NNTP-Posting-Date: 8 Aug 2003 09:15:30 GMT
| Path:
cpmsftngxa06.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfeed00.sul.t-online.de!t-onlin
e.de!news-spur1.maxwell.syr.edu!news.maxwell.syr.edu!sn-xit-03!sn-xit-01!sn-
xit-09!supernews.com!postnews1.google.com!not-for-mail
| Xref: cpmsftngxa06.phx.gbl microsoft.public.dotnet.framework.aspnet:166054
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| Hi again, confusion reigns. Thanks for your reponses Lewis and Vidar,
| much appreciated. Let me tie this thing up.
| Firstly Lewis. The only differences in principle between what you
| posted and what I had done, was that I was appending additional script
| onto the end of the contents of the Head innerhtml and I also had the
| comment tags within the script. Now I know these are small things but
| bear with me.
| The script function that I was embedding into the page was built up as
| a string on the serverside and looked similar to this
| <script language="javascript"><!--function
| doThis(arg){window.alert("Hi there");}--></script>
| This was being appended to the head innerhtml which already contained
| some js functions within script tags, something like
| <script language="javascript">
| <!--
| function myFunct(){
| window.alert("hello");
| }
| -->
| </script>
| After posting I managed to get my dynamic code working by inserting it
| into the existing script tag before the first existing function.
|
| The crucial difference was that because I was inserting it into
| existing script tags, I had taken out the <!-- --> comments as they
| were already present. It seemed that they were causing the failure due
| to the fact that I had no line breaks around them.
|
| And so Vidar, you are correct. Once I had ensured that the script had
| the comment tags on separate lines, I could indeed use
| RegisterClientScriptBlock to add the code into the form tag, with no
| problems.
|
| All's well that ends well, and thanks again for your responses.
|
 
Back
Top