I have a page that contains several graphics. We used Google charts to create them. The graphics are organized in dashboards.

Page description:

In the page it contains a UpdatePanel responsible for the buttons of dashboards uppDashboards within it contains a asp:Repeater with each link to the dashboard, which are created dynamically.

Below uppDashboards contains UpdatePanel responsible for generating all graphs, uppScripts . These deniers contain 2 literals, one responsible for the inclusion of google scripts and ltrDashboard responsible for containing all the graphics loading scripts on the screen. At each update in uppScripts a new id is generated for the functions that generate the graphs. 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 process:

When changing the dashboard the css classes of the buttons are changed. A new script is generated in ltrDashboard . an update is made in uppDashboard and 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 new item code.

Problem description:

Upon entering the page for the first time all the behavior of the dashboard exchange is working perfectly. when you click on a different dashboard the ltrDashboard script is generated with a new id, executed and the graphics are generated correctly.

When adding a dashboard the last generated Script is "frozen" and is always calling with the old id. Explaining otherwise:

  

Access page

Script 111 is generated in ltrDashboard
Script 111 is called
Generated graphics

  

Click the second Dashboard

Script 112 is generated in ltrDashboard
Script 112 is called
Generated graphics

  

Click to go back to the first Dashboard

Script 113 is generated in ltrDashboard
Script 113 is called Generated graphics

  

Add Dashboard

Script 114 is generated in ltrDashboard
Script 113 is called and gives error on console
Graphics with error

  

Change to the first Dashboard

Script 115 is generated in ltrDashboard
Script 113 is called and gives error on console
Graphics with error

  

From this, just call the script updating after reloading the page

The error occurs in the script line:

var chartDiv = document.getElementById('divGraficoColuna58710331423957543044827774055569');

Because this element no longer exists.

Something very strange is that by accessing the Elements tab in Chrome the ID is updated, but when you access the document through the Sources tab the old ID is there. This is true for all browsers.

I can not identify why you are running old code, and the new one is on the Elements tab. Has anyone had a similar problem when working with UpdatePanels?

EDIT

Is it possible to make this code differently and that the same problem with Update Panels does not occur?