Webservice returning Internal error 500 only from JQuery call

Question

I am getting Internal error 500 when I call from JQuery, not otherwise. Help please!!!

JQuery call

$.ajax({
                    type: "POST",
                    url: "myWebService.asmx/getnpsTrend",
                    data: jsonData,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess_,
                    error: OnErrorCall_
                });

Webservice method:

        [WebMethod]
        [System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]
        public  List<ChartDatasets> getnpsTrend(string region, string client, string product)
        {
        <code>
        }

I have tried every possible solution provided except for static:

1. Enabled get

2. Reconfigured Config file

More background...

• I am using chart.js to display graphs
• To make the chart data dynamic I am using the webservice to give me data in json format. Here is the reference.
• This works perfectly if I directly call the webservice. So I wonder if the url provided in JQuery call is wrong! Have tried different combinations but nothing has worked yet! :(

Edit: Complete JQuery code

<script>

        $(document).ready(function () {
            $("#btn_line_chart").on('click', function () {
                var fil_reg = $("#ddlRegion").val();
                var fil_cli = $("#ddlClient").val();
                var fil_prd = $("#ddlProduct").val();

                console.log("Inside function");
                console.log(fil_reg);
                var jsonData = JSON.stringify({
                    jsn_reg: fil_reg,
                    jsn_cli: fil_cli,
                    jsn_prd: fil_prd
                });


                $.ajax({
                    type: "POST",
                    url: "myWebService.asmx/getnpsTrend",
                    data: jsonData,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess_,
                    error: OnErrorCall_
                });

                function OnSuccess_(reponse) {
                    var aData = reponse.d;
                    var aLabels = aData[0];
                    var aDatasets1 = aData[1];
                    var aDatasets2 = aData[2];

                    var data = {
                        labels: aLabels,
                        datasets: [{
                            label: "My First dataset",
                            fillColor: "rgba(220,220,220,0.2)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data: aDatasets1
                        },
                        {
                            label: "My Second dataset",
                            fillColor: "rgba(151,187,205,0.2)",
                            strokeColor: "rgba(151,187,205,1)",
                            pointColor: "rgba(151,187,205,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,1)",
                            data: aDatasets2
                        }]
                    };

                    var ctx = $("#myChart").get(0).getContext('2d');
                    ctx.canvas.height = 300;  // setting height of canvas
                    ctx.canvas.width = 500; // setting width of canvas
                    var lineChart = new Chart(ctx).Line(data, {
                        bezierCurve: false
                    });
                }
                function OnErrorCall_(repo) {
                    alert("Woops something went wrong, pls try later !");
                }
            });
        });

    </script>

Answer 1

Make following changes in webscript

  [System.Web.Script.Services.ScriptService]  // add top of Class file 
    public class myWebService: System.Web.Services.WebService
    {
        [WebMethod(EnableSession = true)]
       public  List<ChartDatasets> getnpsTrend(string region, string client, string product)
        {
        //Check if we get All Parameters from Ajax function i.e region, client and product

        // Code

        }
}

Then in Ajax function

 $.ajax({
            url: '../myWebService.asmx/getnpsTrend',
            data: "{'region': '" + regionvalue + "'}, 'client': '" + clientvalue + "','product': '" + productvalue + "'",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) 
            {
                if (data != null) 
                {
                    // use  data.d value

                }
            },
            error: function (data) 
            {
                alert("Error message ");
            }
        });