Ajax - Update Panel Problem ? Help

[cranberries__089]

Hi All,

 

 

I have an aspx page which uses a master page. There is a javascript function which generates fusion chart from json data at html5. When user selects an item from combobox, jsondata is generated at code behind and javascript function is declared and runned.

 

My aspx page is;

 

<asp:Content ID="Content1" ContentPlaceHolderID="Content" runat="server">

 

<script src="../../Scripts/FusionCharts.js" type="text/javascript"></script>

 

<dx:ASPxLabel ID="lblQueries" runat="server" Text=" Queries" />

 

<div id="comboQueries" style="margin: 5px 0px 40px 5px">

<dx:ASPxComboBox ID="cmbQueries" runat="server" ValueType="System.Int32" TextField="QUERY_NAME"

ValueField="ID" Width="190px">

<%-- <ClientSideEvents SelectedIndexChanged="function(s, e) { ComboItemChanged(s,e);}" />--%>

</dx:ASPxComboBox>

</div>

<br />

<dx:ASPxButton ID="btnGenerateChart" runat="server" Text="Generate Chart" OnClick="btnGenerateChart_OnClick">

</dx:ASPxButton>

<div id="firstChartDiv">

</div>

<script type="text/javascript">

 

var isChartLoaded = false;

 

function FC_Rendered(DOMId) {

switch (DOMId) {

case "myChartId":

isChartLoaded = true;

break;

}

return;

}

 

function GenerateChart(jsonData) {

 

if (isChartLoaded) {

var chartObj = FusionCharts("myChartId");

//var chartObj = getChartFromId('myChartId');

chartObj.dispose();

}

 

FusionCharts.setCurrentRenderer('javascript');

 

var myChart = new FusionCharts("FusionCharts/Pie3D.swf",

"myChartId", "400", "300", "0", "1");

 

myChart.setJSONData(jsonData);

 

myChart.render("firstChartDiv");

 

}

 

</script>

</asp:Content>

 

My aspx.cs page: (Code Behind)

 

 

 

 

DBOperationClass dbOp= new DBOperationClass ();

 

private JsonObject obj = null;

private myChart chart = null;

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

cmbQueries.DataSource = nac.GetChartQueryNames();

cmbQueries.DataBind();

}

 

}

 

protected void btnGenerateChart_OnClick(object sender, EventArgs e)

{

int queryId = Convert.ToInt32(cmbQueries.SelectedItem.Value);

string query = nac.GetChartQueries(queryId);

obj = new JsonObject();

chart = new myChart();

chart.Caption = "Caption";

chart.YAxisName = "AA";

chart.XAxisName = "BB";

obj["chart"] = chart;

obj["data"] = dbOp.GetChartProperties(query);

Page.ClientScript.RegisterStartupScript(this.GetType(), "Key", "GenerateChart(" + obj + ")", true);

 

}

 

 

public class myChart

{

 

private string caption;

private string xAxisName;

private string yAxisName;

private string numberPrefix;

 

public string Caption

{

set { caption = value; }

}

 

public string XAxisName

{

set { xAxisName = value; }

}

 

public string YAxisName

{

 

set { yAxisName = value; }

}

 

public string NumberPrefix

{

set { numberPrefix = value; }

}

 

}

 

This code block is workingproperly. But I dont want the page does postback . Because of it, I used update panel of AJAX.

 

This time my aspx page:

 

 

 

<asp:Content ID="Content1" ContentPlaceHolderID="Content" runat="server">

<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>

<script src="../../Scripts/FusionCharts.js" type="text/javascript"></script>

<asp:ScriptManager ID="scriptManagerChartTest" runat="server">

<scripts>

<asp:ScriptReference Path="../../Scripts/updatepanelhook.fusioncharts.js" />

</Scripts>

</asp:ScriptManager>

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">

<scripts>

<asp:ScriptReference Path="../../Scripts/updatepanelhook.fusioncharts.js" />

</Scripts>

</asp:ScriptManagerProxy>

<asp:UpdatePanel ID="UpdatePanelChart" runat="server">

<ContentTemplate>

<asp:Panel ID="Panel1" runat="server" Height="350px" Width="440px">

</asp:Panel>

<dx:ASPxLabel ID="lblQueries" runat="server" Text=" Queries" />

<div id="comboQueries" style="margin: 5px 0px 40px 5px">

<dx:ASPxComboBox ID="cmbQueries" runat="server" ValueType="System.Int32" TextField="QUERY_NAME"

ValueField="ID" Width="190px">

<%-- <ClientSideEvents SelectedIndexChanged="function(s, e) { ComboItemChanged(s,e);}" />--%>

</dx:ASPxComboBox>

</div>

<br />

<dx:ASPxButton ID="btnGenerateChart" runat="server" Text="Generate Chart" OnClick="btnGenerateChart_OnClick">

</dx:ASPxButton>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="btnGenerateChart" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

<script type="text/javascript">

 

var isChartLoaded = false;

 

function FC_Rendered(DOMId) {

switch (DOMId) {

case "myChartId":

isChartLoaded = true;

break;

}

return;

}

 

function GenerateChart(jsonData) {

 

// if (isChartLoaded) {

// var chartObj = FusionCharts("myChartId");

// // var chartObj = getChartFromId("myChartId");

// if (chartObj != null) {

// chartObj.dispose();

// }

// }

 

FusionCharts.setCurrentRenderer('javascript');

 

var myChart = new FusionCharts("FusionCharts/Pie3D.swf",

"myChartId" + i, "400", "300", "0", "1");

myChart.setJSONData(jsonData);

myChart.render("myChartIdDiv");

 

}

</script>

</asp:Content>

 

This time my Code Behind:

 

 

 

DBOperationClass dbOp= new DBOperationClass ();

 

private JsonObject obj = null;

private myChart chart = null;

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

cmbQueries.DataSource = nac.GetChartQueryNames();

cmbQueries.DataBind();

}

 

}

 

protected void btnGenerateChart_OnClick(object sender, EventArgs e)

{

int queryId = Convert.ToInt32(cmbQueries.SelectedItem.Value);

string query = nac.GetChartQueries(queryId);

obj = new JsonObject();

chart = new myChart();

chart.Caption = "Caption";

chart.YAxisName = "AA";

chart.XAxisName = "BB";

obj["chart"] = chart;

obj["data"] = dbOp.GetChartProperties(query);

ScriptManager.RegisterClientScriptBlock(btnGenerateChart, this.GetType(), "Key", "GenerateChart(" + obj + ")", true);

 

}

 

 

public class myChart

{

 

private string caption;

private string xAxisName;

private string yAxisName;

private string numberPrefix;

 

public string Caption

{

set { caption = value; }

}

 

public string XAxisName

{

set { xAxisName = value; }

}

 

public string YAxisName

{

 

set { yAxisName = value; }

}

 

public string NumberPrefix

{

set { numberPrefix = value; }

}

 

}

 

 

 

When I don't control if there is an existing chart (with the same Id), the chart is generated for the first time, but other times it is not seen properly.( Like seen at attached files)

For this problem , I control any chart is generated with FC_Rendered event , and try to control,

 

 

<script type="text/javascript">

 

var isChartLoaded = false;

 

function FC_Rendered(DOMId) {

switch (DOMId) {

case "myChartId":

isChartLoaded = true;

break;

}

return;

}

 

function GenerateChart(jsonData) {

 

if (isChartLoaded) {

var chartObj = FusionCharts("myChartId");

// var chartObj = getChartFromId("myChartId");

if (chartObj != null) {

chartObj.dispose();

}

}

FusionCharts.setCurrentRenderer('javascript');

 

var myChart = new FusionCharts("FusionCharts/Pie3D.swf",

"myChartId" , "400", "300", "0", "1");

myChart.setJSONData(jsonData);

myChart.render("myChartIdDiv");

 

}

</script>

 

But this time, getChartFromId("chartId") and FusionChart("chartId") functions do not return existing chart. And I can not dispose existing chart.

 

I try to give a unique Id for every chart, with a variable (appending it to the end of id : myChartId+i ), the same problem exists again. It does not seen properly..

 

I have been working on this problem for 3 days, and I dont have enough time. If you help me I will approciate you..

 

Thanks for your replies in advance..

 

Good works..

[Sanjukta]

Hi,

 

Hi All,

 

 

I have an aspx page which uses a master page. There is a javascript function which generates fusion chart from json data at html5. When user selects an item from combobox, jsondata is generated at code behind and javascript function is declared and runned.

 

But this time, getChartFromId("chartId") and FusionChart("chartId") functions do not return existing chart. And I can not dispose existing chart.

 

I try to give a unique Id for every chart, with a variable (appending it to the end of id : myChartId+i ), the same problem exists again. It does not seen properly..

 

I have been working on this problem for 3 days, and I dont have enough time. If you help me I will approciate you..

 

Thanks for your replies in advance..

 

Good works..

 

Could you please try checking on what all you are receiving while disposing the chart using "FusionCharts.items[...]"?

 

 

FusionCharts.items[] is an associative array that stores all the charts rendered in a page. The DOMId is represented by the key and the JavaScript chart object is the respective value. If you pass the DOMId of the chart to this array, you will get the reference to the JavaScript Object of the related chart.

Ex:

var chart = FusionCharts.items["myChartId"]; 

 

Awaiting your reply.

[cranberries__089]

Firstly , thanks for the reply.

 

I tried your suggestion, It worked for controlling if there is any chart on page. I am controlling and disposing chart if exists, chart is seen like generated but there is not a completed chart screen at page.

 

I have attached screenshots for you. There is 3 screen shots which is named meaningful. I put a gray background for the type Pie3D to be able to see borders.

 

Thanks for the reply in advance..

 

Hi,

 

 

 

Could you please try checking on what all you are receiving while disposing the chart using "FusionCharts.items[...]"?

 

 

FusionCharts.items[] is an associative array that stores all the charts rendered in a page. The DOMId is represented by the key and the JavaScript chart object is the respective value. If you pass the DOMId of the chart to this array, you will get the reference to the JavaScript Object of the related chart.

Ex:

var chart = FusionCharts.items["myChartId"]; 

 

Awaiting your reply.

Files.zip