JavaScript not firing method in the controller

Question

I'm trying for the following code to fire an Action method in the controller.

<script>
    function updateSalary() {
        var salary = $('#basicSalary').val();
        var figure = $('#allowance').val();
        $.ajax({
            url: '@Url.Action("updateSalary","salary")',
            type: "GET",
            dataType: "JSON",
            data: { salary: basicsalary, figure: allowance },
            success: function (add) {
                $('#basicSalary').val(salary)
            }
        })
    }
</script>

Razor:

<td>
     @Html.DropDownListFor(model => model.allowance, Model.allowances, "--please choose an option--", new { @class = "form-control", @onchange = "updateSalary()" })
</td>

Controller:

public ActionResult updateSalary (int salary, string figure)
        {
            if (figure == "Transport")
            {
                try
                {
                    allowance trans = hc.allowances.First(x => x.name == figure);
                    if (trans != null)
                        salary = +Convert.ToInt32(trans.amount);
                    else
                    throw new excep("Record not found");
                }
                catch
                {

                }                    
            }
            return Json(salary,JsonRequestBehavior.AllowGet);
        }

Basically allowance should get added to basicSalary field on the webpage when user selects the allowance dropdownlist. I've put a breakpoint on starting braces of updateSalary Action method to check if javaScript is firing it in the controller or not when I change the selection in allowance dropdownList. It is not firing. I can't figure out why. Could someone see why?

Is javascript function totaly not working? Or just ajax?

Berkay Yaylacı
– Berkay Yaylacı

2016-06-04 10:08:26 +00:00
Commented Jun 4, 2016 at 10:08 — Berkay Yaylacı
– Berkay Yaylacı, Commented Jun 4, 2016 at 10:08

Darin Dimitrov · Accepted Answer · 2016-06-04 09:42:02Z

1

Some typos here:

data: { salary: basicsalary, figure: allowance }

should probably be:

data: { salary: salary, figure: figure }

given the names of the variables you declared at the beginning of your updateSalary javascript function.

In order to track this kind of problems I would recommending you using the developer toolbar of your browser. For example if you are using Google Chrome you could click F12 to activate it and then in the Console tab look for javascript errors. Also when dealing with AJAX queries like you do, you could look at the Network tab which will show you all requests sent to the server as well as the corresponding response. This could give you a good indication where the problem might be.

answered Jun 4, 2016 at 9:42

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jogi Over a year ago

Thanks for your guidelines. Appreciate it.

reza.cse08 · Accepted Answer · 2016-06-04 10:35:57Z

1

you are using wrong variable basicsalary and allowance that is not defined. Change variable name from salary to basicsalary and figure to allowance

try this

var basicsalary = $('#basicSalary').val();
var allowance = $('#allowance').val();
$.ajax({
        url: '@Url.Action("updateSalary","salary")',
        type: "GET",
        dataType: "JSON",
        data: { salary: basicsalary, figure: allowance },
        success: function (add) {
            $('#basicSalary').val(add);
        }
  });

edited Jun 4, 2016 at 10:35

answered Jun 4, 2016 at 9:56

reza.cse08

6,18651 silver badges42 bronze badges

3 Comments

Jogi Over a year ago

All is working as expected @Shamim. Now problem is with success: function (add) { $('#basicSalary').val(salary) line of code. In these two lines, I'm trying to get salary from the actionMethod and adding it to basicSalary field. salary is being returned as Jason. With the help of dubugger, I can see expected salary calculated correctly in line return Json(salary,JsonRequestBehavior.AllowGet); but is not somehow returning to the page and get added into the basicSalary field. Any idea why?

Jogi Over a year ago

Sorry I'm totally new to ajax and javaScript.

reza.cse08 Over a year ago

Please check my edit after getting success add this line $('#basicSalary').val(add);

Collectives™ on Stack Overflow

JavaScript not firing method in the controller

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related