MVC5 Ajax update

Question

I have a dropdown with selection id StaffId. What I am doing is once an item is selected I want to pass on the StaffId to controller to fetch records in a database using the staffId. This is giving an error on page load without passing the StaffId to the controller. below is the snippet

controller

[HttpPost]
          public PartialViewResult GetStaffPosts(int? id)
          {

              var sPost = db.StaffPosts.Where(a => a.StaffId == id.Value);  
              return PartialView(sPost.ToList());

          }

   <div id="divPartialView">
   @{Html.RenderPartial("GetStaffPosts");}
   </div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#StaffId").change(function (event) {
            var options = {};
               options.url= "/StaffPost/GetStaffPosts/" + $(this).val(),
                options.data= { id: $(this).val() },
                options.cache= false,
                optionstype= "POST",
                options.dataType= "html",

                options.success= function (data, textStatus, XMLHttpRequest) {
                    $("#divPartialView").html(data); // HTML DOM replace
                    $.ajax(options);
                }
            });
        });

</script>

Answer 1

Your current code is not actually making an ajax call on the change event because you are invoking the $.ajax(options); call inside the success callback of the options object. You are not calling the $.ajax method on the change event!

This should work (assuming your controller code is returning a 200 response) .

$("#StaffId").change(function (event) {
        var options = {};
        options.url= "/StaffPost/GetStaffPosts/" + $(this).val(),
        options.data= { id: $(this).val() },
        options.cache= false,
        options.type= "POST",
        options.dataType= "html",
        options.success= function (data, textStatus, XMLHttpRequest) {
                $("#divPartialView").html(data); // HTML DOM replace

        }
        $.ajax(options);
 });

You may also simplify your code using the $.post method.

$("#StaffId").change(function() {

    $.post("/StaffPost/GetStaffPosts/",{ id: $(this).val() } ,function (data) {
            $("#divPartialView").html(data);
    });

});

Or even using the $.load method and a one liner

$("#StaffId").change(function(event) {

    $("#divPartialView").load("/StaffPost/GetStaffPosts/", { id: $(this).val() });

});

Answer 2

Hi just put your ajax call outside of the success function and make an url like the below code and try again

Your changed code:

<script type="text/javascript">
    $(document).ready(function () {
        $("#StaffId").change(function (event) {
            var options = {};


               options.url= "../StaffPost/GetStaffPosts,


                options.data= { id: $(this).val() },
                options.cache= false,
                optionstype= "POST",
                options.dataType= "html",
                options.success= function (data, textStatus, XMLHttpRequest) 
                 {
                    $("#divPartialView").html(data); // HTML DOM replace

                }


                $.ajax(options);


            });
        });

</script>