Json Dropdown Postback Response

Question

My Ajax calls:

$(document).ready(function()
{
    $.ajax({
        type: "POST",
        url : "HazzardsDashBoards.aspx/GetReport",
        data: "{}",
        contentType: 'application/json',
        dataType: 'json',

        complete: function (jqXHR)
        {
           var data = JSON.parse(jqXHR.responseText);
           TrendChart(data);
        },
        error: function (error) {
           alert("error");
        }
    });

    $(".ddlChange").change(function () {
        $.ajax({
            type: "POST",
            url : "HazzardsDashBoards.aspx/GetReport1",
            data:  JSON.stringify({ company: $("#ddl_PermitCmpny").val(), dept: $("#ddl_Agency").val() }),
            contentType: 'application/json',
            dataType: 'json',
            complete: function (jqXHR)
            {
                var data = JSON.parse(jqXHR.responseText);
                TrendChart(data);
            },
            error :function(jqXHR,textStatus,errorThrown)
            {
                alert("An error occurred whilst trying to contact the server: " + jqXHR + " " + textStatus + " " + errorThrown);
            }
        });
    });
});

Server Methods:

[WebMethod]
public static List<Dictionary<string, object>> GetReport()
{
    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();

    try
    {

            string strQry = string.Empty;

            strQry = " select YEAR(dt_ModifiedOn)[date],COUNT(*) [HazardCount] from tbl";
            strQry += " where int_PluginID = 4 and int_FeatureID=35  ";
            strQry += " group by year(dt_ModifiedOn) ";

            using (commonManager)
            {
                DataTable dt = commonManager.ExecuteDataTable(strQry);

                Dictionary<string, object> row;
                foreach (DataRow dr in dt.Rows)
                {
                    row = new Dictionary<string, object>();
                    foreach (DataColumn col in dt.Columns)
                    {
                        row.Add(col.ColumnName, dr[col]);
                    }
                    rows.Add(row);
                }
            }
        }


    catch (Exception ex)
    {

        throw ex;
    }
    return rows;
}

[WebMethod]
public static List<Dictionary<string, object>> GetReport1(string company, string dept)
{
    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();

    try
    {
        string strQry = string.Empty;

        strQry = " select YEAR(mwl.dt_ModifiedOn)[date],COUNT(*) [HazardCount] from tbl";
        strQry += " left outer join tbl1 thzd on thzd.int_HAZARD_ID = mwl.str_ObjectID";
        strQry += " where int_PluginID = 4 and int_FeatureID=35 ";
        if (company != "")
        {
            if (company == "1")
            {
                strQry += " and  str_ReportFromType = 'E'";
            }
            else
            {
                strQry += " and  str_ReportFromType = 'C'";
            }
        }

        if (dept != null && dept != string.Empty)
        {
            if (company == "1")
            {
                strQry += " and thzd.str_72_ME = '" + dept + "' ";
            }
            if (company == "2")
            {
                strQry += " and thzd.smallint_5865_ME = '" + dept + "' ";
            }

        }


        strQry += " group by year(mwl.dt_ModifiedOn) ";

        using (commonManager)
        {
            DataTable dt = commonManager.ExecuteDataTable(strQry);

            Dictionary<string, object> row;
            foreach (DataRow dr in dt.Rows)
            {
                row = new Dictionary<string, object>();
                foreach (DataColumn col in dt.Columns)
                {
                    row.Add(col.ColumnName, dr[col]);
                }
                rows.Add(row);
            }
        }
    }
    catch (Exception ex)
    {

        throw ex;
    }
    return rows;
}

I am getting same json response for both ajax calls, after dropdown selection also I am getting same json response. Data is overriden after dropdown selection and data is not being reflected.

Ajax call is firing and going to respective method but the data is not being reflected and showing same data. I need to get the different json responses for different ajax calls as when dropdown changes and page load.

Answer 1

Please note that your first AJAX call will run every single time the page loads .I'm suspecting that after you call GetReport1() a post back happens and the jQuery load event runs which will override your TrendChart() logic by calling GetReport() .

You can place an alert('Page Loading...'); statement just after $(document).ready(function(){ to test this theory.

You could be using an ASP.NET DropDownList control which causes the post back, if that's the case try replacing it with a simple HTML <select> and see if that fixes your problem