Question

I have a drop down list which contains a list of visits which are displayed like so:
5/3/2012 At School Below this dropdown list are A Date field and a visit type dropdown list. I would like to populate these fields based on the first dropdown list. so for this example the date field will be filled with 5/3/2012 and the visit type will be: At School

I am using javascript to use it but i am having an error window saying [object Object].

Here is my code:

JavaScript:

<script type="text/javascript">

var durationRowVisibilityCheck = function () {
    var disableDuration = $.trim($("select#UnableToVisitReasonId option:selected").text()).length != 0;
    var $durationRow = $("#visitDuration");
    if (disableDuration) $durationRow.hide(); else $durationRow.show();
};

$(function () {
    durationRowVisibilityCheck();
    $("select#UnableToVisitReasonId").change(function () {
        durationRowVisibilityCheck();
    });
    $("#VisitEntryId").change(function(e) {
        var visitEntryId = $("#VisitEntryId.option:selected").val();
        if (visitEntryId != '<%=Guid.Empty %>')
            GetVisitDetails(visitEntryId);
    });
});
function GetVisitDetails(visitEntryId) 
{
    $.ajax({
            url: '<%=Url.Action("GetVisitDetails", "VisitActivity") %>' + '?visitEntryId=' + visitEntryId,
            contenttype: "application/json; charset=utf-8",
            success: function(json) {
                populate(json);
            },
            error: function (xhr, status, error) {
                alert(xhr);
            },
            type: "POST",
            datatype: "json"
        });
    }
function populate(data) {
    $("#ActivityDate").val(data.VisitDate);
    $("#VisitTypeId").val(data.VisitTypeId);
}

Get Details method:

public JsonResult GetVisitDetails(Guid visitEntryId)
    {
        var model = new VisitDetailModel();
        VisitEntry visitEntry = _visitEntryService.Get(visitEntryId);
        if(visitEntry == null)
        {
            model.Message = string.Format(Message.NotFoundMessage, Resources.Entities.Visit.EntityName);
            return Json(model);
        }
        model.VisitEntryId = visitEntryId;
        model.VisitTypeId = visitEntry.VisitTypeId;
        if (visitEntry.VisitType != null)
            model.VisitType = visitEntry.VisitType.Description;
        model.VisitDate = visitEntry.VisitDate.ToShortDateString();
        return Json(model);
    }

    #region Nested Type:VisitDetailModel

    public class VisitDetailModel
    {
        public Guid VisitEntryId { get; set; }
        public short VisitTypeId { get; set; }
        public string VisitType { get; set; }
        public string VisitDate { get; set; }
        public string Message { get; set; }
    }

Answer 1

Try replacing

datatype: "json"

with:

dataType: "json"

or completely get rid of it because jQuery is smart enough to use the response Content-Type header from the server and automatically parse the response for you.

Also remove:

contenttype: "application/json; charset=utf-8",

You are not sending any JSON to the server. You are sending a normal request.

So, here’s how to adapt your $.ajax call:

$.ajax({
    url: '<%= Url.Action("GetVisitDetails", "VisitActivity") %>',
    type: 'GET',
    cache: false,
    data: { visitEntryId: visitEntryId },
    success: function(json) {
        populate(json);
    },
    error: function (xhr, status, error) {
        alert(xhr);
    }
});

Because I have specified GET verb for the AJAX request (which is the correct verb to be used for retrieving data from the server), you need to adapt your GetVisitDetails controller action so that it sends JSON over GET which is not allowed by default:

return Json(model, JsonRequestBehavior.AllowGet);

Also the following selector seems wrong to me:

var visitEntryId = $("#VisitEntryId.option:selected").val();

Try directly retrieving the selcted value of the dropdown in the .change() event handler:

$('#VisitEntryId').change(function(e) {
    var visitEntryId = $(this).val();
    if (visitEntryId != '<%=Guid.Empty %>')
        GetVisitDetails(visitEntryId);
});