4
I have a page that contains several graphs. We use Google Maps to create them. The graphs are organized in dashboards.
Page description:
On the page contains a UpdatePanel responsible for dashboard buttons uppDashboards within this contains a asp:Repeater with each link to Dashboard, which are created dynamically.
Below the uppDashboards contains a UpdatePanel responsible for generating all graphics, the uppScripts. contains 2 literals, one responsible for the inclusion of google scripts and the ltrDashboard responsible for containing all the charting scripts on the screen. Every update on uppScriptsa new id is generated for the functions that generate the graphics.
Here is an example of the code generated in ltrDashboard:
<div class='gridster'>
<ul>
<li id='8|IndicadorGrafico' data-col='5' data-row='5' data-sizex='5' data-sizey='5' data-max-sizex='5'
data-max-sizey='5'>
<div class="item fundoGraficos">
<div id="divGraficoColuna58710331423957543044827774055569" class="divGraficoColuna58710331423957543044827774055569"
style="width: 560px; height: 500px; margin: auto; padding-top: 9px; "></div>
<script>
$(document).ready(function () {
Sys.Application.add_load(function () {
google.charts.setOnLoadCallback(
GraficoColuna58710331423957543044827774055569);
function GraficoColuna58710331423957543044827774055569() {
var chartDiv = document.getElementById(
'divGraficoColuna58710331423957543044827774055569');
var data = google.visualization.arrayToDataTable([
['Data de Emissão - Mês', 'Valor'],
['Janeiro de 2018', 122477.5976],
['Fevereiro de 2018', 107240.4000],
['Março de 2018', 127834.0200],
['Abril de 2018', 112301.9750],
['Maio de 2018', 85482.4250],
['Junho de 2018', 120004.3600],
['Julho de 2018', 130099.3300],
['Agosto de 2018', 109626.7750],
['Setembro de 2018', 97912.2000],
['Outubro de 2018', 101668.0250],
['Novembro de 2018', 10062.8776],
['Dezembro de 2018', 74.6100]
]);
var options = {
backgroundColor: 'transparent',
hAxis: {
titleTextStyle: {
color: '#495057'
},
textStyle: {
color: '#495057'
}
},
vAxis: {
titleTextStyle: {
color: '#495057'
},
textStyle: {
color: '#495057'
},
format: 'R$ #,##0.00'
},
chartArea: {
left: '20 %',
top: '15 %',
right: '5 %',
bottom: '12 %'
},
animation: {
duration: 1500,
startup: true
},
width: 560,
height: 500,
title: 'Teste2',
titleTextStyle: {
color: '#495057',
fontSize: '18'
},
legend: {
position: 'none'
},
bar: {
groupWidth: '90%'
}
};
var chart = new google.visualization.BarChart(chartDiv);
chart.draw(data, options);
};
});
});
</script>
<div Class="item-edit" onclick="javascript:__doPostBack('ContentPlaceHolder1_AppContentPlaceHolder_uppScripts','EditarIndicador#8')"><i
Class="far fa-pencil-alt"></i></div>
</div>
</li>
</ul>
</div>
Description of the dossier:
When changing Dashboard the css classes of the buttons are changed. A new script is generated in the ltrDashboard. is updated on uppDashboard and in the uppScripts
When creating a new Dashboard a new item is inserted into the Repeater and the function to change the Dashboard is called with the code of the new item.
Description of the problem:
By entering the page for the first time all Dashboard exchange behavior is working perfectly. when you click on a different Dashboard the ltrDashboard is generated with a new id, executed and graphics are generated correctly.
When adding a Dashboard the last generated Script is "frozen" and keeps calling with the old id. Explaining otherwise:
Access the page
Script 111 is generated in ltrDashboard
Script 111 is called
Graphics generated
Click on the second Dashboard
Script 112 is generated on ltrDashboard
Script 112 is called
Graphics generated
Click to return to the first Dashboard
Script 113 is generated in ltrDashboard
Script 113 is called
Graphics generated
Adicionar Dashboard
Script 114 is generated in ltrDashboard
Script 113 is called and gives error in console
Graphics with error
Change to the first Dashboard
Script 115 is generated in ltrDashboard
Script 113 is called and gives error in console
Graphics with error
From this only call the updating script after reloading the page
The error occurs on the line of the script:
var chartDiv = document.getElementById('divGraficoColuna58710331423957543044827774055569');
For that element no longer exists.
Something very strange is that accessing the Elements tab of Chrome the ID is updated, but when accessing the document by the Sources tab the old ID is there. This occurs in all Browsers.
I cannot identify why you are running an old code, the new one being the one in the Elements tab. Has anyone been through a similar problem at the time of working with the Updatepanels?
EDIT
It is possible to make this code in a different way and that the same problem does not occur with Update Panels?