trying to use dynamically added jscript for ddlist onchange event

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 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
 
K

Ken Cox [Microsoft MVP]

Hi Dave,

I played with this for a while and it *seems* to work okay. Not quite sure that
I understand your issue so I may have missed the point.

In the code below, I insert the script into the head tag as a generic control.
I insert the onchange event as an attribute to the dropdown list control. The
script is in place and is being called.

Perhaps you can see if this is what you're after and if not, post some code
that fails for you?

Ken
MVP [ASP.NET]


Public Class jscrpt
Inherits System.Web.UI.Page

#Region " Web Form Designer Generated Code "

'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub
InitializeComponent()

End Sub
Protected WithEvents cboMyCombo1 As System.Web.UI.WebControls.DropDownList
Protected Head1 As System.Web.UI.HtmlControls.HtmlGenericControl

'NOTE: The following placeholder declaration is required by the Web Form
Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub

#End Region

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Load
cboMyCombo1.Attributes.Add("onchange", "MyCombos_OnChange('1')")
Head1.InnerHtml = " <script>function
MyCombos_OnChange(strText){alert(strText);}</script>"
End Sub

End Class


<%@ Page Language="vb" AutoEventWireup="false" Codebehind="jscrpt.aspx.vb"
Inherits="p733workev.jscrpt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head runat="server" id="head1">
</head>
<body ms_positioning="FlowLayout">
<form id="Form1" method="post" runat="server">
<p>
<asp:dropdownlist id="cboMyCombo1" runat="server">
<asp:listitem value="red">red</asp:listitem>
<asp:listitem value="green">green</asp:listitem>
<asp:listitem value="blue">blue</asp:listitem>
</asp:dropdownlist></p>
<p>
</form>
</P>
</body>
</html>

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 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
 
Z

Zeebra3

Many thanks for your response Ken.
What you have done will indeed work. I have now found out what my
problem was. The block of script that I was trying to add into the
head was something like
<script language="javascript><!--function doThis(arg){window.alert("Hi
There");}--></script>
My problem was the <!-- --> comment tags which I had failed to put
line breaksd around. This was causing problems when it was rendered to
the page.
I realised this when I appended my dynamic javascript to existing
javascript that I hard hardcoded into the page at design time. This
existing javascript had the comment tags on separate lines and so I
didn't need to add in any more, and the function worked OK.
As an addition, once I knew that the comment tags were causing my
problem, I tried using RegisterClientScriptBlock to add my dynamic
function into the form tag on the page again and that worked too. So
the script doesn't need to be put into the Head element after all.
Thanks again for your response

Ken Cox said:
Hi Dave,

I played with this for a while and it *seems* to work okay. Not quite sure that
I understand your issue so I may have missed the point.

In the code below, I insert the script into the head tag as a generic control.
I insert the onchange event as an attribute to the dropdown list control. The
script is in place and is being called.

Perhaps you can see if this is what you're after and if not, post some code
that fails for you?

Ken
MVP [ASP.NET]


Public Class jscrpt
Inherits System.Web.UI.Page

#Region " Web Form Designer Generated Code "

'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub
InitializeComponent()

End Sub
Protected WithEvents cboMyCombo1 As System.Web.UI.WebControls.DropDownList
Protected Head1 As System.Web.UI.HtmlControls.HtmlGenericControl

'NOTE: The following placeholder declaration is required by the Web Form
Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub

#End Region

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Load
cboMyCombo1.Attributes.Add("onchange", "MyCombos_OnChange('1')")
Head1.InnerHtml = " <script>function
MyCombos_OnChange(strText){alert(strText);}</script>"
End Sub

End Class


<%@ Page Language="vb" AutoEventWireup="false" Codebehind="jscrpt.aspx.vb"
Inherits="p733workev.jscrpt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head runat="server" id="head1">
</head>
<body ms_positioning="FlowLayout">
<form id="Form1" method="post" runat="server">
<p>
<asp:dropdownlist id="cboMyCombo1" runat="server">
<asp:listitem value="red">red</asp:listitem>
<asp:listitem value="green">green</asp:listitem>
<asp:listitem value="blue">blue</asp:listitem>
</asp:dropdownlist></p>
<p>
</form>
</P>
</body>
</html>
Click to expand...
 
K

Ken Cox [Microsoft MVP]

Glad to hear you got things going!

Ken

Many thanks for your response Ken.
What you have done will indeed work. I have now found out what my
problem was. The block of script that I was trying to add into the
head was something like
<script language="javascript><!--function doThis(arg){window.alert("Hi
There");}--></script>
My problem was the <!-- --> comment tags which I had failed to put
line breaksd around. This was causing problems when it was rendered to
the page.
I realised this when I appended my dynamic javascript to existing
javascript that I hard hardcoded into the page at design time. This
existing javascript had the comment tags on separate lines and so I
didn't need to add in any more, and the function worked OK.
As an addition, once I knew that the comment tags were causing my
problem, I tried using RegisterClientScriptBlock to add my dynamic
function into the form tag on the page again and that worked too. So
the script doesn't need to be put into the Head element after all.
Thanks again for your response

Ken Cox said:
Hi Dave,

I played with this for a while and it *seems* to work okay. Not quite sure that
I understand your issue so I may have missed the point.

In the code below, I insert the script into the head tag as a generic control.
I insert the onchange event as an attribute to the dropdown list control. The
script is in place and is being called.

Perhaps you can see if this is what you're after and if not, post some code
that fails for you?

Ken
MVP [ASP.NET]


Public Class jscrpt
Inherits System.Web.UI.Page

#Region " Web Form Designer Generated Code "

'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub
InitializeComponent()

End Sub
Protected WithEvents cboMyCombo1 As System.Web.UI.WebControls.DropDownList
Protected Head1 As System.Web.UI.HtmlControls.HtmlGenericControl

'NOTE: The following placeholder declaration is required by the Web Form
Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub

#End Region

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Load
cboMyCombo1.Attributes.Add("onchange", "MyCombos_OnChange('1')")
Head1.InnerHtml = " <script>function
MyCombos_OnChange(strText){alert(strText);}</script>"
End Sub

End Class


<%@ Page Language="vb" AutoEventWireup="false" Codebehind="jscrpt.aspx.vb"
Inherits="p733workev.jscrpt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head runat="server" id="head1">
</head>
<body ms_positioning="FlowLayout">
<form id="Form1" method="post" runat="server">
<p>
<asp:dropdownlist id="cboMyCombo1" runat="server">
<asp:listitem value="red">red</asp:listitem>
<asp:listitem value="green">green</asp:listitem>
<asp:listitem value="blue">blue</asp:listitem>
</asp:dropdownlist></p>
<p>
</form>
</P>
</body>
</html>
Click to expand...
 

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

Similar Threads

I am trying to detect Which image id="" was clicked ? 22
Problems with using event handlers for button and textarea input 1
calling clientside js with onchange event 5
Image upload not working in browser 4
How can I hide a div using an event listener on multiple checkboxes? 6
I am trying to make an audio player, how do I get the selected file to be playable? 5
onChange event 0
Dynamically Assigning OnChange Handler 2

Members online

No members online now.
Total: 39 (members: 0, guests: 39)
Robots: 377

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,013
Latest member
KatriceSwa

Latest Threads

Top