This is a migrated thread and some comments may be shown as answers.

javascript doesn't work after postback in ajax

2 Answers 131 Views
ScriptManager and StyleSheetManager
This is a migrated thread and some comments may be shown as answers.
appdev
Top achievements
Rank 1
appdev asked on 02 Jul 2009, 08:55 PM
i am trying to update my literal control. so everytime i select a value on dropdownlist, the literal content will change. the problem is that the content of the literal is all javascript because it is a script to draw chart from Fusion Chart (third party control).

It works great on the first time visit. but if dropdownlist selected index is changed, and is in asyncpostback, it just wont work. the literal will update if i onlyl put text in there. So my question is that how do i register javascript and write it to literal then make it works when asyncpostback is called. something like registerscriptcodeblock? pelase help me thank you very much.

literal1.Text = FusionCharts.RenderChart(c
harttype.ToString, "", chartData.ToString, "FactorySum", "798", "300", False, False)

that works fine.

now i click update  and it should update the literal which it does but it just can't see the script inside of that. the fusioncharts.renderchart() return
<!-- START Script Block for Chart FactorySum --> 
<div id='FactorySumDiv' > 
Chart. 
</div> 
<script type="text/javascript"
var chart_FactorySum = new FusionCharts("FusionCharts/MSColumn3D.swf""FactorySum""798""300""0""0""""noScale""EN" ); 
chart_FactorySum.setDataXML("<chart caption='Test' xAxisName='X Value' yAxisName='Y Value' showValues='0'><categories><category label='8/6/2006'/><category label='8/7/2006'/><category label='8/8/2006'/><category label='8/9/2006'/><category label='8/10/2006'/><category label='8/11/2006'/><category label='8/12/2006'/></categories><dataset seriesName='Offline Marketing' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'><set value='1327'/><set value='1826'/><set value='1699'/><set value='1511'/><set value='1904'/><set value='1957'/><set value='1296'/></dataset></chart>"); 
chart_FactorySum.render("FactorySumDiv"); 
</script> 
<!-- END Script Block for Chart FactorySum --> 
 

and the only thing that i see there is the word Chart.
<div id='FactorySumDiv' > 
Chart. 
</div> 


 and i want that to be in literal and work just like the way it is working when you first load the page.
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server"
    <title>Sales Report</title> 
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script> 
    <script type="text/javascript"
        function RequestStart(sender, eventArgs) 
        { 
            var divElementStyle = document.getElementById("RadAjaxLoadingPanel1").style; 
            divElementStyle.position = 'absolute'; 
            //position the loading panel 
            divElementStyle.left = eventArgs.get_eventTargetElement().offsetLeft + "px"
            divElementStyle.top = eventArgs.get_eventTargetElement().offsetTop + "px"
        } 
   </script> 
</head> 
<body style="background-color:#3d766f; font-family:Verdana; font-size:12px;"
    <form id="form1" runat="server">         
        <telerik:radscriptmanager id="RadScriptManager1" runat="server" AsyncPostBackTimeout="0"/> 
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Office2007" DecoratedControls="All" /> 
        <telerik:radajaxmanager id="RadAjaxManager1" runat="server">             
            <ClientEvents OnRequestStart="RequestStart"></ClientEvents> 
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1"
                    <UpdatedControls>                         
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />  
                        <telerik:AjaxUpdatedControl ControlID="lt_HourlyGraph" LoadingPanelID="RadAjaxLoadingPanel1" />                        
                    </UpdatedControls> 
                </telerik:AjaxSetting>                       
                <telerik:AjaxSetting AjaxControlID="ddlcharttype"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="Panel_HourlyGraph" LoadingPanelID="RadAjaxLoadingPanel1" />                         
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:radajaxmanager> 
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="1000"
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" /> 
        </telerik:RadAjaxLoadingPanel> 
        <asp:Table ID="main" runat="server" BorderColor="white" BackColor="white" BorderWidth="0" CellPadding="5" CellSpacing="0" Width="1024px"  Height="100%" HorizontalAlign="center"
            <asp:TableRow> 
                <asp:TableCell VerticalAlign="top" Width="220px"
                    <b>Company Report:</b><br /><br />                   
                    <telerik:RadComboBox ID="ddlCompanyReport" Font-Size="12px" Width="200px" AutoPostBack="true" runat="server" Skin="Web20" /><br /><br /><br /> 
                    <b>Build your own:</b><br /><br /> 
                    <telerik:RadComboBox ID="ddlAdhocReport" Font-Size="12px" Width="200px" AutoPostBack="true" runat="server" Skin="Web20" /> 
                </asp:TableCell> 
                <asp:TableCell VerticalAlign="top" Width="798px"
                    <asp:Table ID="tbl_hourlyparam" runat="server" Width="798px"
                        <asp:TableRow> 
                            <asp:TableCell VerticalAlign="top"
                                <table border="0" cellpadding="5" cellspacing="0" width="798px"
                                    <tr> 
                                        <td align="center"
                                            Previous Year: <telerik:RadDatePicker Font-Size="12px" Calendar-ShowColumnHeaders="false" Calendar-ShowRowHeaders="true" 
                                                    ID="txt_hourlyFrom" runat="server" Skin="Web20" />    
                                            Current Year: <telerik:RadDatePicker Font-Size="12px" Calendar-ShowColumnHeaders="false" Calendar-ShowRowHeaders="true" 
                                                    ID="txt_hourlyTo" runat="server" Skin="Web20" /> 
                                        </td> 
                                    </tr> 
                                    <tr> 
                                        <td width="798px">                                             
                                            <telerik:RadComboBox ID="ddlcharttype" Font-Size="12px" runat="server" Skin="Web20" AutoPostBack="true">                                                                                                 
                                                    <Items> 
                                                        <telerik:RadComboBoxItem Text="Select a chart type" Value="" /> 
                                                        <telerik:RadComboBoxItem Text="Area" Value="Area" /> 
                                                        <telerik:RadComboBoxItem Text="Bar" Value="Bar" /> 
                                                        <telerik:RadComboBoxItem Text="Column" Value="Column" /> 
                                                        <telerik:RadComboBoxItem Text="Line" Value="Line" /> 
                                                    </Items> 
                                            </telerik:RadComboBox> 
                                        </td> 
                                    </tr> 
                                    <tr> 
                                        <td>  
                                            <asp:Panel ID="Panel_HourlyGraph" runat="server"
                                                <asp:Literal ID="lt_HourlyGraph" runat="server"></asp:Literal>                                                                                    
                                            </asp:Panel>                                                        
                                        </td> 
                                    </tr> 
                                    <tr> 
                                        <td> 
                                            <telerik:RadTabStrip ID="RadTabStrip1" ReorderTabsOnSelect="true"  runat="server" Skin="Office2007"  
                                                MultiPageID="RadMultiPage1" SelectedIndex="0"
                                                <Tabs> 
                                                    <telerik:RadTab Text="Norwalk" runat="server" Selected="True" />                            
                                                    <telerik:RadTab Text="Danbury" runat="server" /> 
                                                    <telerik:RadTab Text="Yonkers" runat="server" /> 
                                                    <telerik:RadTab Text="Newington" runat="server" /> 
                                                </Tabs> 
                                            </telerik:RadTabStrip> 
                                            <telerik:RadMultiPage style="border: 1px solid #828282; padding: 40px 10px 25px;" runat="server" ID="RadMultiPage1" SelectedIndex="0"
                                                <telerik:RadPageView runat="server" ID="RadPage_Norwalk">                                              
                                                      <asp:Literal ID="Hourly_NOR" runat="server"  /> 
                                                </telerik:RadPageView>  
                                                <telerik:RadPageView ID="RadPage_Danbury" runat="server"
                                                    <asp:Literal ID="Hourly_DAN" runat="server" /> 
                                                </telerik:RadPageView> 
                                                <telerik:RadPageView ID="RadPage_Yonkers" runat="server"
                                                    <asp:Literal ID="Hourly_YON" runat="server" /> 
                                                </telerik:RadPageView> 
                                                <telerik:RadPageView ID="RadPage_Newington" runat="server"
                                                    <asp:Literal ID="Hourly_NWG" runat="server" /> 
                                                </telerik:RadPageView> 
                                             </telerik:RadMultiPage>     
                                        </td> 
                                    </tr> 
                                </table>                                 
                            </asp:TableCell> 
                        </asp:TableRow> 
                    </asp:Table> 
                </asp:TableCell> 
            </asp:TableRow> 
            <asp:TableRow> 
                <asp:TableCell ColumnSpan="2" BackColor="gray" Width="798px" ForeColor="white" HorizontalAlign="center"
                   Â© 2009 All Rights Reserved. 
                </asp:TableCell> 
            </asp:TableRow>     
        </asp:Table> 
    </form> 
</body> 
</html> 
 
 
server side is 
 Protected Sub ddlcharttype_SelectedIndexChanged(ByVal o As ObjectByVal e As Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs) Handles ddlcharttype.SelectedIndexChanged 
        Dim charttype As String = GetChartType() 
        Dim chartData As String = GetFactorySummaryChartHtm() 
        lt_HourlyGraph.Text = FusionCharts.RenderChart(charttype.ToString, "", chartData.ToString, "FactorySum""798""300"FalseFalse
    End Sub 

2 Answers, 1 is accepted

Sort by
0
Yossi Shmaltz
Top achievements
Rank 1
answered on 15 Feb 2011, 12:42 AM
Having the same problem as well, if I set the EnableAjax = false it works

Telerik support please respond
0
Yana
Telerik team
answered on 17 Feb 2011, 05:14 PM
Hello,

Could you place the javascript inside RadScriptBlock and let us know how it goes?

Kind regards,
Yana
the Telerik team
Tags
ScriptManager and StyleSheetManager
Asked by
appdev
Top achievements
Rank 1
Answers by
Yossi Shmaltz
Top achievements
Rank 1
Yana
Telerik team
Share this question
or