JQuery / JSON Error "SyntaxError: JSON.parse: unexpected character"

Question

I am working on MVC4 and trying to pass the presentation of a form to a form using JQuery and JSON. The query retrieves the flag values ​​inside the grid. Below is the code:

<script type="text/javascript"> function DeleteCustomer() { var temp = ""; var id = ""; if (confirm("Are you sure to delete records?")) { $('#myGrid table tr').each(function () { if ($(this).find("input[id*='assignChkBx']").length > 0) { if ($(this).find("input[id*='assignChkBx']")[0].checked == true) { temp = $(this).find("input[id*='assignChkBx']").val(); if (temp != "" || temp != null) { id = id + " " + temp; temp = ""; } } // End of Loop } }); //End of each Loop $.ajax({ url: "Customer/DeleteCustomeByID", type: "POST", contentType: 'application/json; charset=utf-8', dataType: "json", data: "{'CustomerID':'" + id + "'}", success: function (data) { //alert('Records deleted'); $('#lblMessage').html('Records Deleted'); }, error: function (xhr, textStatus, err) { alert('Error: ' + err); //$('#lblMessage').html(err); } }); } } 

My html code is as follows:

 <input type="button" id="btnDelete" value="Delete" title="Delete" onclick="DeleteCustomer()" style="color: Gray" /> 

 @{ WebGrid grid = new WebGrid(Model, rowsPerPage: 15, ajaxUpdateContainerId: "myGrid"); } @grid.GetHtml( fillEmptyRows: false, alternatingRowStyle: "alternate-row", headerStyle: "grid-header", footerStyle: "grid-footer", mode: WebGridPagerModes.All, firstText: "<< First", previousText: "< Prev", nextText: "Next >", lastText: "Last >>", columns: new[] { grid.Column("", format: @<text><input class="check-box" type="checkbox" id="assignChkBx" value="@item.CustomerID" /></text>), grid.Column("CustomerID", "CustomerID", canSort: true), grid.Column("CompanyName", "Company Name", canSort: true), grid.Column("ContactName", "Contact Name", canSort: true), grid.Column("Address", "Address", canSort: false), grid.Column("City", "City", canSort: true), grid.Column("", header: "Actions", format: @<text> @Html.ActionLink("Edit", "Edit", new { id=item.CustomerID} ) @Html.ActionLink("Delete", "Delete", new { id=item.CustomerID} ) </text> ) }) 

When I click the delete button, the jQuery mentioned above will accept the selected values ​​in the controller. The controller code is written below:

 [HttpPost] public ActionResult DeleteCustomeByID(string CustomerID) { Customer customer = new Customer(); try { if (ModelState.IsValid) { string[] values = CustomerID.Split(' '); for (int i = 1; i <= values.Length - 1; i++) { if (values[i].ToString().Trim() != "" || values[i].ToString() != null) { customer = db.Customers.Find(values[i].ToString()); db.Customers.Remove(customer); db.SaveChanges(); } } return RedirectToAction("Index"); } return View(customer); // Error in Model, if any } catch (DbEntityValidationException dbEx) { foreach (var validationErrors in dbEx.EntityValidationErrors) { foreach (var validationError in validationErrors.ValidationErrors) { Trace.TraceInformation("Class: {0}, Property: {1}, Error: {2}", validationErrors.Entry.Entity.GetType().FullName, validationError.PropertyName, validationError.ErrorMessage); } } throw new Exception(); // You can also choose to handle the exception here... } catch (Exception ex) { throw new Exception(ex.Message); } } 

When I press the delete button, the values ​​go to the controller and delete the entries. But the problem is that after deleting the records, when they returned to the controller, I get the following error: " SyntaxError: JSON.parse: unexpected character " for FireFox, " json parsing error unrecognized token '<' " for Safari and " Error: object error. "I search for various sites and try different solutions. But nothing works. I am using Northwind db.

Thanks in advance.

Partha

Answer 1

According to the docs , the following property:

 dataType: "json" 

... tells jQuery the type of data you expect from the server. Then your action returns HTML. So when jQuery tries to parse the JSON that it expects, it runs in HTML and gives you this error.

Either change the action to return a JsonResult , or set dataType to "html" .

Answer 2

Not sure, but I noticed that you are not passing JSON to your $ .ajax call ... Try:

 data: JSON.stringify({CustomerID: id }), ... 

JSON uses double quotes around member names.

Answer 3

After two days of searching, testing and debugging to resolve this crazy bug, I found that the problem was with the jquery library. I started a new project, so I selected the recent jquery-1.10.2.js and got an error. I tried jquery-1.9.1.js and also got an error. But when I tested jquery-1.5.2.js, the success function worked fine and the error was not thrown.