Ajax Jquery parallel call not giving the data

Question

I am trying to implement a google chart in my aspx page. I have a search button, that will display two pie chart. I am using Ajax Jquery to read the data parallel . Here is my code

<div>
        <div style="text-align: left; padding-left: 30px;">
            <uc1:ucChartDateSelector ID="ucChartDateSelector1" runat="server"></uc1:ucChartDateSelector>
            <asp:Button ID="btnSearch" runat="server" Text="Search" AutoPostBack="false"
                OnClientClick="javascript:GenerateChartReport();" />

        </div>
    </div>

    <!--Div that will hold the dashboard-->


    <div id="dashboard_div">

        <!--Divs that will hold each control and chart-->
        <div id="chartLine_div" style="width: 600px; height: 400px;">
            <img src="../images/ajax-loader.gif" alt="Loading Report" />
        </div>


        <div id="visualization" style="width: 600px; height: 400px;">
            <img src="../images/ajax-loader.gif" alt="Loading Report" />
        </div>
    </div>

 <script type="text/javascript">


        var toDate = '<%=ucChartDateSelector1.ToDate%>';
        var fromdate = '<%=ucChartDateSelector1.FromDate%>';
        var reportFor = '<%=ucChartDateSelector1.ddlReportType.SelectedItem.Text%>';
        var periodFor = '<%=ucChartDateSelector1.ddlDateSelection.SelectedItem.Text%>';



        function GenerateChartReport() {
            $.ajax({
                type: 'POST',
                url: 'Dashboard.aspx/GetData', 
                contentType: 'application/json',
                dataType: 'JSON',
                async: true,
                success: function (response) {
                    TwoColumnReport(response.d, "visualization", "Google Charts Example");
                },
                error: function (error) {
                    console.log(error);
                }

            }),

            $.ajax({
                type: 'POST',
                url: 'Dashboard.aspx/ReadBooking',
                contentType: 'application/json',
                dataType: 'json',
                async: true,
                data: JSON.stringify({ fromDate: fromdate, toDate: toDate, reportFor: reportFor, periodFor: periodFor }),
                success: function (response) {
                    TwoColumnReport(response.d, "chartLine_div", "Google Dealy Example");

                },
                error: function (error) {
                    console.log(error);
                }

            });
        }
        function TwoColumnReport(dataValues, mainDivId, reportTitle) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Column Name');
            data.addColumn('number', 'Column Value');

            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
            }
            new google.visualization.PieChart(document.getElementById(mainDivId)).
               draw(data, { title: reportTitle });
        }
    </script>`

Here is the back end code

  [WebMethod]
    public static List<Data> GetData()
    {
        int milliseconds = 2000;
        Thread.Sleep(milliseconds);
        List<Data> dataList = new List<Data>();

        dataList.Add(new Data("Column 1", 100));
        dataList.Add(new Data("Column 2", 200));
        dataList.Add(new Data("Column 3", 300));
        dataList.Add(new Data("Column 4", 400));

        return dataList;
    }


    [WebMethod]
    public static List<Data> ReadBooking(String fromDate, String toDate, String reportFor, String periodFor)
    {
        logger.WriteInfoLog(String.Format("ReadBooking Summary.   Report type {0}-{3}  DateRange {1}- {2} ", reportFor, fromDate, toDate, periodFor));
        int milliseconds = 5000;
        Thread.Sleep(milliseconds);
        List<Data> dataList = new List<Data>();

        dataList.Add(new Data("row 1", 1400));
        dataList.Add(new Data("row 2", 3200));
        dataList.Add(new Data("row 3", 3100));
        dataList.Add(new Data("row 4", 4100));
        dataList.Add(new Data("row 5", 2400));
        return dataList;
    }

When ever i click search button, the Div will be filled with the chart . But some how it gets cleaned up too

Answer 1

You can change your WebMethod to return string and serialize dataList to json:

[WebMethod]
public static string GetData()
{
    int milliseconds = 2000;
    Thread.Sleep(milliseconds);
    List<Data> dataList = new List<Data>();

    dataList.Add(new Data("Column 1", 100));
    dataList.Add(new Data("Column 2", 200));
    dataList.Add(new Data("Column 3", 300));
    dataList.Add(new Data("Column 4", 400));

    var jsonSerialiser = new JavaScriptSerializer();
    var jsonString = jsonSerialiser.Serialize(dataList);

    return jsonString;
}

then your ajax post, on success: function(response){} , response will be the list

Answer 2

The issue was with Post back.
Modified JavaScript code to return false .

function GenerateChartReport() {
    return false;
}

and removed AutoPostBack="false" from the asp:button

<asp:Button ID="btnSearch" runat="server" Text="Search" OnClientClick="return GenerateChartReport();" />