javascript doesn't work after postback in ajax

3 posts, 0 answers
  1. appdev
    appdev avatar
    223 posts
    Member since:
    Sep 2008

    Posted 02 Jul 2009 Link to this post

    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. Yossi Shmaltz
    Yossi Shmaltz avatar
    1 posts
    Member since:
    Mar 2010

    Posted 14 Feb 2011 Link to this post

    Having the same problem as well, if I set the EnableAjax = false it works

    Telerik support please respond
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 17 Feb 2011 Link to this post

    Hello,

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

    Kind regards,
    Yana
    the Telerik team
Back to Top