1

I have the following form:

@model ProductFilterModel
<form action="@Url.Action("Search","ProductSearch", new{@Model})" method="get" class="vehicle-filter group">
<div class="select">
    @Html.DropDownListFor(x=>x.VehicleYearId,new List<SelectListItem>
    {
        new SelectListItem{ Text="2016", Value="2016"},
        new SelectListItem{ Text="2015", Value="2015"},
    },new{@class="year"})

</div>
<div class="select">
    <select id="MakeDropDownList" name="VehicleMakeId" class="make" disabled data-request-url="@Url.Action("GetVehicleMakes","ProductFilter")"></select>
</div>
</form>

When the VehicleYearId dropdown changes, I go and get the Vehicle Makes, but instead of returning JSON in the data parameter, it returns the whole HTML document. Here is the javascript I am running when the year changes:

$('#VehicleYearId').on('change', function() {
        $.ajax({
            url: $makeDropDownList.attr('data-request-url'),
            method: 'GET',
            dataType: 'json',
            data: { year: $yearDropDownList.find(':selected').val() },
            success: function (data) {

                $('#MakeDropDownList').empty();
                $('#MakeDropDownList').append($('<option/>', { value: "-1", text: "MAKE" }));
                $('#MakeDropDownList').find('option[value="-1"]').prop('disabled', true);
                $('#MakeDropDownList').find('option[value="-1"]').prop('selected', true);
                $(data).each(function (index, item) {
                    $('#MakeDropDownList').append($('<option/>', { value: item.Id, text: item.Name }));
                });
                $('#MakeDropDownList').prop('disabled', false);
            }
        });

    });

It is throwing an error saying unexpected token < and the reason is because it is returning the whole html document instead of just the select value of the selected option. If I use $yearDropDownList.find(':selected').val() outside the ajax call, it returns the selected year. Here is the method that returns the vehicle makes, basically what data-request-url for the the make drop down:

public JsonResult GetVehicleMakes(string year)
    {

        var vehicleMakes = _vehicleRepository.GetVehicleMakes(year);
        return Json(vehicleMakes, JsonRequestBehavior.AllowGet);
    }

When I inspect the error parameters in the ajax call, this is what I have:

jqXHR - Object {readyState: 4, responseText: " ↵<!doctype html> ↵<html> ↵<head> ↵ ↵ <title>SC…</div><!--module--> ↵ ↵</footer> ↵
↵ ↵</html>", status: 200, statusText: "OK"}

textStatus - parseerror

errorThrown - SyntaxError: Unexpected token <(…)

Here is the controller:

public class ProductFilterController : Controller
{
    readonly VehicleRepository _vehicleRepository = new VehicleRepository();


    public JsonResult GetVehicleMakes(string year)
    {

        var vehicleMakes = _vehicleRepository.GetVehicleMakes(year);
        return Json(vehicleMakes, JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetVehicleModels(string make)
    {
        var vehicleModels = _vehicleRepository.GetVehicleModels(make);
        return Json(vehicleModels, JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetVehicleYears()
    {
        var vehicleYears = _vehicleRepository.GetVehicleYears();
        return Json(vehicleYears, JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetVehicleEngines(string model)
    {
        var vehicleEngines = _vehicleRepository.GetVehicleEngines(model);
        return Json(vehicleEngines, JsonRequestBehavior.AllowGet);
    }

}
dsh
  • 12,037
  • 3
  • 33
  • 51
xaisoft
  • 3,343
  • 8
  • 44
  • 72
  • 1
    Have you inspected the contents of the html that is being returned? It may be a 404 or 501 error page. I find that unexpected html coming as an AJAX response is often an error page, indicating a bad AJAX request address or a server error. – Surreal Dreams Sep 15 '15 at 13:31
  • What exactly is the HTML content being returned? Your server is probably either throwing an error page or not handling the request properly and returning an entire HTML document. – swornabsent Sep 15 '15 at 13:32
  • @swornabsent - The whole document from the root to the end is being returned. – xaisoft Sep 15 '15 at 13:37
  • @SurrealDreams - I will look into this, but I will tell you that I am using the Umbraco CMS, so the route doesn't necessarily exist because I am just returning a view to be overlapped on top of an existing page, not sure if that has anything to do with it. Is there anything I can check to see the error code returned? – xaisoft Sep 15 '15 at 13:38
  • @xaisoft okay, then it's probably the latter, i.e. your server-side app isn't handling a request with a `year` parameter and is just falling through to serving up the whole page. Hard to say why/where without seeing more of your server side code. – swornabsent Sep 15 '15 at 13:39
  • @swornabsent - I will update my post with controller code. That is pretty much the only other thing involved except the JsonResult method. – xaisoft Sep 15 '15 at 13:42
  • @SurrealDreams - I updated my post with some more details – xaisoft Sep 15 '15 at 13:47
  • If you use a tool like FireBug or the browser's built in inspector, you can find all your AJAX requests and see their details, such as the parameters passed and the response. It's very useful for debugging. Be sure to check both your request and the return value. You can see if you're passing the data you expect - maybe your year value is blank or 0, and this gets html back instead of JSON. – Surreal Dreams Sep 15 '15 at 14:07
  • 1
    First make sure your AJAX request actually hit your action method, set a break point on it and test, I had the same problem and the source of error was routing issue, my url was pointing to an action that wasn't responding to that url, hence the whole page was coming back and the parse error. – Hamid Mosalla Sep 15 '15 at 14:25
  • @HamidMosalla - It does not hit the action method. If I use Umbraco's `@Html.BeginUmbracoForm`, it hits it, but a regular `form` tag does not. – xaisoft Sep 15 '15 at 14:33

0 Answers0