How to show Result after selecting dropdown

Question

I want to show Course Code after selecting a department from drop down. it searches from database and get but does not show at browser. Here is the drop down:

 <select name="Id" id="Id">
                        <option value="">Select Department</option>
                        @foreach (var departments in ViewBag.ShowDepartments)
                        {
                            <option value="@departments.Id">@departments.Name</option>
                        }
                    </select>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
<script>
    $(document).ready(function() {
        $("#Id").change(function() {
            var departmentId = $("#Id").val();

            var json = { departmentId: departmentId };
            $.ajax({
                type: "POST",
                url: '@Url.Action("ViewAllScheduleByDept", "ClassSchedule")',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(json),
                success: function (data) {

                    //$("#myTable").append('<tr><th>ID</th><th>Name</th></tr>');

                    $('#Code').val(data.Code);
                    //$('#ContactNo').val(data.ContactNo);
                    //$('#Type').val(data.Type);
                }
            });
        });
    });

</script>

I am using mvc.

how does your ViewAllScheduleByDept method looks like ? what are you returning from that ? — Shyju, Feb 09 '16 at 18:22
Hi there. Please do not add "ASAP" to your questions, or beg for urgency in other ways. The **volunteers** here may get around to your question, and if they do so it will be at their leisure. — halfer, Feb 10 '16 at 08:29

score 2 · Accepted Answer · answered Feb 09 '16 at 18:34

Your code should work fine as long as ViewAllScheduleByDept action method returns a json structure with a Code property.

[HttpPost]
public ActionResult ViewAllScheduleByDept(int departmentId)
{  
   //values hardcoded for demo. you may replace it value from db table(s)
   return Json( new { Code="HardcodedValue", ContactNo="12345"} );
}

and you have an input form element with Id property value as Code in your page

<input type="text" id="Code" />

and you do not have any other script errors which is preventing your js code to execute.

Also, since you are sending just the Id value, you don't really need to use JSON.stringify method and no need to specify contentType property value.

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

    $.ajax({
        type: "POST",
        url: '@Url.Action("ViewAllScheduleByDept", "ClassSchedule")',
        data: { departmentId: $("#Id").val() },
        success: function (data) {
            alert(data.Code);
            $('#Code').val(data.Code);
        }
        ,error:function(a, b, c) {
            alert("Error" + c);
        }
    });

});

My Method is:- public JsonResult ViewAllScheduleByDept(int departmentId) { var schedules = GetAllSchedule(); var scheduleList = schedules.Where(a => a.departmentId == departmentId).ToList(); return Json(scheduleList, JsonRequestBehavior.AllowGet); } — Samiul, Feb 10 '16 at 20:12
So what is happening ? You are making a POST ajax request to the method. — Shyju, Feb 10 '16 at 20:21

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

use last before append

$("#myTable").last().append("<tr><td>ID</td></tr><tr><td>Name</td></tr>");

please see the link for details

Add table row in jQuery

edited May 23 '17 at 10:28

Community

1
1

answered Feb 09 '16 at 18:38

Tony Dong

3,213
1
29
32

How to show Result after selecting dropdown

2 Answers2