how to prevent javascript function to execute when page is postback?

Question

I have this java script code that generate organizational chart from database

 <script type="text/javascript">
    google.load("visualization", "1", { packages: ["orgchart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        $.ajax({
            type: "POST",
            url: "add org unit.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json", 

            success: function (r) {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Entity');
                data.addColumn('string', 'ParentEntity');
                data.addColumn('string', 'ToolTip');
                for (var i = 0; i < r.d.length; i++) {
                    var employeeId = r.d[i][0].toString();
                    var employeeName = r.d[i][1];
                    var designation = r.d[i][2];
                    var reportingManager = r.d[i][3] != null ? r.d[
                        i][3].toString() : '';
                    data.addRows([[{
                        v: employeeId,
                        f: '<a target="_blank" href="edit emp cv.aspx?employeeId='+employeeId+'">' + employeeName + '</a>' + '<div><span>' + designation + '</div></span>',
                    }, reportingManager, designation]]);
                }
                var chart = new google.visualization.OrgChart($("#chart")[0]);
                chart.draw(data, { allowHtml: true });
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }
</script>

and these web method in c# code behind

[WebMethod]
    public static List<object> GetChartData()
    {
        DataLayer.StoreDBEntities dbEntities  = new DataLayer.StoreDBEntities();
        List<object> chartData = new List<object>();
        List<DataLayer.org_unit> result = dbEntities.org_unit.ToList();
        foreach (DataLayer.org_unit unit in result)
        {
            string name = unit.org_unit_type.alias + " " + unit.name;
            string Details = "";

            if (unit.emp_assignment.ToArray().Length != 0)
            {
                List<DataLayer.emp_assignment> empAssigns = unit.emp_assignment.ToList();
                foreach (DataLayer.emp_assignment assign in empAssigns)
                {

                    Details += assign.job_title.alias + ":" + assign.employee.name + "<br/>";
                }
            }
            chartData.Add(new object[] { unit.id, name, Details, unit.upper_unit_id });
        }
        return chartData;

    }

the chart is regenerated every postback and when page is load although I did not call java script function at all

how to stop this ? i want to generate chart only whene butten click

Answer 1

First, you need to remove this google.setOnLoadCallback(drawChart); then you can use the jQuery click event like this:

$(function() {

    $('#draw-chart').click(function(event) {
         event.preventDefault();
         drawChart();
    });

});

Add a button to your HTML like this:

<button id="draw-chart">Draw Chart</button>