javascript is not working

[Abhi Shinde]

Hi,
   I want to call javascript function on dropdown onchange method.
I have a page which contains <telerik:RadWindow> and my dropdown is in telerik:RadWindow.

Please refer bellow code for more details,
MyPage.aspx -

<telerik:RadWindow ID="EditClientDetails" runat="server" DestroyOnClose="true" Title="Edit Client Details"
            VisibleOnPageLoad="false" Behaviors="Minimize, Move" Left="580" Width="860" Height="550"
            Top="-8" EnableShadow="true" Modal="true">
            <ContentTemplate>
                       <table>
                                  <td align="left" valign="top">
                                    <asp:LinqDataSource ID="linqDsContactMode" runat="server" ContextTypeName="DataClassesDataContext"
                                        OrderBy="ContactMode" Select="new (id, ContactMode)" TableName="tbl_client_contactModes">
                                    </asp:LinqDataSource>
                                    <asp:DropDownList ID="ddlContactMode" runat="server" Width="155" CssClass="standard-input"
                                        DataSourceID="linqDsContactMode" DataTextField="ContactMode" DataValueField="id"
                                        AppendDataBoundItems="True" >
                                        <asp:ListItem Value="0" Text="Select"></asp:ListItem>
                                        <asp:ListItem Value="-1" Text="Other" />
                                    </asp:DropDownList>
                                    <br />
                                    <div id="txtOtherContactModeDiv" runat="server" style="margin-top: 5px;">
                                        <telerik:RadTextBox ID="txtOtherContactMode" MaxLength="50"  runat="server" Width="150" BorderColor="#000000" />
                                    </div>
                                </td>
</table>
<div align="center" class="gap">
                        <telerik:RadButton ID="RadBtnUpdate" runat="server" Text="Update" ValidationGroup="EditClient"
                            OnClick="RadBtnUpdate_Click" OnClientClicked="validate">
                        </telerik:RadButton>
</div>
 </ContentTemplate>
        </telerik:RadWindow>

Javascript function in Mypage.aspx-

<telerik:RadScriptBlock ID="rdBlock" runat="server">
    <script type="text/javascript" language="javascript">
        function otherContactModeValidation() {
            var empty = document.getElementById('<%= ddlContactMode.ClientID %>').value;
            alert(empty);
            if (empty == "-1") {
                document.getElementById('<%= txtOtherContactModeDiv.ClientID %>').style.display = 'block';
            }
            else
            {
                document.getElementById('<%= txtOtherContactModeDiv.ClientID %>').style.display = 'none';
            }
        }
 </script>
</telerik:RadScriptBlock>

Mypage.cs

protected void Page_Load(object sender, EventArgs e)
    {
        ddlContactMode.Attributes["onchange"] = "otherContactModeValidation()";
}

Javascript function is not able call on dropdown change.
Please help me...
Abhi

[Marin Bratanov]

Hi Abhi,

I tested your code and it works as expected on my end. I only had to remove the databinding, as I do not have your custom datasource, but that is not relevant to the case. You can find my test page attached and a video from my experiment here: http://screencast.com/t/clcXPifo5uxg. Please make sure that this is the actual code you are using when you experience this behavior. I would also recommend that you rebuild your project in case the changes in the code-behind (where you attach the handler) are actually not yet reflected in the application. Another possible approach is that you attach this event handler in the markup instead of in the code-behind to see if this helps.


All the best,
Marin
the Telerik team

[Abhi Shinde]

Hi,
I got reason of why my javascript is not working.

Actually my <telerik:RadScriptBlock> (means javascript function) is declared above the all aspx code. that is why code is not able to call javascript function.

I just pasted <telerik:RadScriptBlock> at the end of page and its working fine.

Can you explain why we need to put <telerik:RadScriptBlock> at the end of page?

Thanks

[Marin Bratanov]

Hi Abhi,

Please examine the following article on the difference between RadCodeBlock and RadScriptBlock: http://www.telerik.com/help/aspnet-ajax/ajax-radscriptblock-radcodeblock.html.

What I suppose your issue was that you were trying to reference a control that has not been loaded, since the script is loaded before the other elements on the page, for example a $find(), $get() statement, or a reference to the Telerik jQuery (the $telerik object) which is available only after one of our controls is parsed so it outputs the needed scripts.

That being said - generally it is better to keep your scripts after your markup for this exact reason - to make sure that all of the content the script will manipulate is loaded already.

Kind regards,
Marin
the Telerik team