parserrror SyntaxError: Unexpected token < - Load Partial View using jQuery Ajax in ASP.NET MVC 4

Question

I'm using the following Ajax call to load a partial view into a div:

  $.ajax({
    url: "/URL",
    type: "POST",
    dataType: "json",
    data: JSON.stringify(request),
    contentType: "application/json; charset=utf-8",
    success: function(data) {
        $('#Result').html(data);
        App.hidePleaseWait();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        App.hidePleaseWait();
        alert(textStatus);
        alert(errorThrown);
    }
});

Here's my controller:

[HttpPost]
        public ActionResult GetSomething(MyModel formModel)
        {
            var model = new ResultModel();

            try
            {
                model.Data = GetSomeData();
            }
            catch (Exception exception)
            {
                model.ErrorMessage = exception.Message;
            }

            return PartialView("_Results", model);
        }

I get the following error "parserrror SyntaxError: Unexpected token <"

It seems that the .ajax call is expecting json back instead of html. What do I need to do to fix this?

Thanks.

Answer 1

You need to change your datatype in the ajax call.

 dataType: "json",

to

 dataType: "html", 

Datatype tells that type is json, but you send back the partial view which is html. So it tries to parse it as json data and throws the error.

datatype - type of data you expect back from the server.

dataType (default: Intelligent Guess (xml, json, script, or html)) Type: String The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string). The available types (and the result passed as the first argument to your success callback) are:

Answer 2

As you now know to add dataType to html instead of json. I also check for the following in the success/done part of jquery's ajax function:

success: function (response, status, xhr) {
  var ct = xhr.getResponseHeader("content-type") || "";
  if (ct.indexOf('html') > -1) {
    // returned result is of type html, so act accordingly
    }
  else if (ct.indexOf('json') > -1) {
    // returned result is of type json, so act accordingly
  }
}

Also, there are times when you might need to parse the data you have received from server as html like this:

var htmldata = $.parseHTML(data); //where data is the stuff you got from server. and now use this htmldata for your processing.

Reference for parseHTML()