添加Google Charts会清除我的HTML

时间:2013-10-03 14:06:29

标签: javascript jquery ajax asp.net-mvc-4 google-visualization

我想使用ajax添加多个部分视图,但在'google.load(...'后,整个页面变为空白,它会清除我的所有HTML。

我读了一些api做'document.write(......'的东西,那就是问题,但我不知道如何解决它。

有什么想法吗?

这是我的代码:

View1.cshtml

<html>
   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   ...
   <div id="container"></div>
   <button id="next"> next</button>
   ...
</html>

的script.js

$('#next').click(function () {
    $.ajax({
        url: myUrl/view2,
        data: { Id: 5},
        dataType: 'html',
        success: function (result) {
            //debugger;
            $(result).appendTo(container);
        },
        beforeSend: function () {
        },
        complete: function () {
        },
        error: function (message, codError) {
            console.log(message, codError);
        },
        async: true
    });
});

View2.cshtml

<div id="chart_div_81"></div>

<script type="text/javascript">
    (function () {
        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', { 'packages': ['corechart'] });

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);
        // Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it.
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['One', 'Two', 'Three'],
                [/10/09/2013',
                        0,
                        15
                    ],
                    ['18/09/2013',
                        0,
                        15
                    ]
            ]);

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.LineChart(document.getElementById('chart_div_81'));
            chart.draw(data, options); 
        }
    })();
</script>

0 个答案:

没有答案