This problem has been driving me slightly nuts for more than a few hours now. I've read so many posts and articles now that I have a vague understanding of the problem but not the cause. I realise the problem is that when I submit something like JSON.parse on an object that's undefined. I cannot figure out why that is though. I'm sure it's very simple and I'm sure I'll feel a tool once it's pointed out, but for now I don't mind feeling a bit silly if it sorts the problem.
The problem is that when I submit the form using the below methods I get the following error:
Uncaught SyntaxError: Unexpected token u js:1
i.extend.parseJSON js:1
c js:1
u js:1
n.extend.showLabel js:1
n.extend.defaultShowErrors js:1
n.extend.showErrors js:1
n.extend.form js:1
n.extend.valid js:1
(anonymous function)
i.event.dispatch js:1
y.handle
Also when I move the cursor from field to field I get this error:
Uncaught SyntaxError: Unexpected token u js:1
i.extend.parseJSON js:1
c js:1
u js:1
n.extend.showLabel js:1
n.extend.defaultShowErrors js:1
n.extend.showErrors js:1
n.extend.element js:1
n.extend.defaults.onfocusout js:1
r js:1
(anonymous function) js:1
i.event.dispatch js:1
y.handle js:1
i.event.trigger js:1
i.event.simulate js:1
f
This obviously prevents me from submitting the form to the controller to be processed. The error seems to be from the jquery library (line 498) when it tries to: return n.JSON.parse(t); (t is undefined). I'm using jquery 1.9.1, bootstrap 2.2.2 and jqValidate/1.9.0.unobtrusive.js. The form is in a bootstrap modal and looks as follows:
@model AModelTestApp.Models.UserModel
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>User</h3>
</div>
<div class="modal-body">
@{
var ajaxOptions = new AjaxOptions
{
HttpMethod = "POST",
OnComplete = "Complete"
};
}
@using (Ajax.BeginForm("EditUser", "Home", ajaxOptions, new { id = "userform" }))
{
<div class="row-fluid">
<div class="span12">
@Html.ValidationSummary("Ooops..", new { id = "validateuser", @class = "alert alert-error" })
</div>
</div>
<div class="row-fluid">
<div class="span6">
@Html.LabelFor(m => m.Id)
@Html.TextBoxFor(m => m.Id)
@Html.LabelFor(m => m.Username)
@Html.TextBoxFor(m => m.Username)
@Html.LabelFor(m => m.FirstName)
@Html.TextBoxFor(m => m.FirstName)
@Html.LabelFor(m => m.LastName)
@Html.TextBoxFor(m => m.LastName)
</div>
<div class="span6">
@Html.LabelFor(m => m.Email)
@Html.TextBoxFor(m => m.Email)
@Html.LabelFor(m => m.UserTypeId)
@Html.TextBoxFor(m => m.UserTypeId)
@Html.LabelFor(m => m.Created)
@Html.TextBoxFor(m => m.Created)
@Html.LabelFor(m => m.Active)
@Html.CheckBoxFor(m => m.Active)
</div>
</div>
<div class="row-fluid">
<div class="span1 offset10">
<a id="btnclear" class="btn" href="#">Clear</a>
</div>
</div>
}
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal" href="#">Close</a>
<a id="btnsubmit" class="btn btn-info" href="#">Submit</a>
</div>
<script type="text/javascript">
$.validator.unobtrusive.parse($('#userform'));
$('#btnclear').click(function() {
$('input').val('');
$(':checkbox').prop('checked', false);
return false;
});
$('#btnsubmit').click(function () {
$('#userform').validate();
if ($('#userform').valid()) {
$('#userform').submit();
} else {
alert("Something went wrong with the validation")
}
});
function Complete(result) {
alert("Woooo - " + result);
}
</script>
The modal is loaded as follows:
<div class="row-fluid">
<div class="span12">
<button id="btnclick" class="btn btn-large btn-block btn-primary">Click Me</button>
</div>
</div>
<div id="mainmodal" class="modal hide fade"></div>
<script type="text/javascript">
$('#btnclick').click(function () {
$.ajax({
url: '@Url.Action("GetUser", "Home")',
type: 'GET',
success: function (result) {
//awss.modal.popup(result);
$('#mainmodal').html(result);
$('#mainmodal').modal('show');
}
});
return;
});
</script>
From this controller:
public ActionResult GetUser()
{
var user = new UserModel
{
Id = 1,
Username = "sbody",
FirstName = "Some",
LastName = "Body",
Email = "[email protected]",
UserTypeId = 6,
Created = new DateTime(2013, 1, 1),
Active = true
};
return PartialView("EditUser", user);
}
Both ClientValidationEnabled and UnobtrusiveJavaScriptEnabled are enabled in the web.config. I'm hoping it's just a case of me looking at the same problem for too long and can't see the obvious. Any help greatly appreciated. Thanks :)
The JavaScript exceptions "unexpected token" occur when a specific language construct was expected, but something else was provided. This might be a simple typo.
The best way to catch invalid JSON parsing errors is to put the calls to JSON. parse() to a try/catch block.
JSON can actually take the form of any data type that is valid for inclusion inside JSON, not just arrays or objects. So for example, a single string or number would be valid JSON. Unlike in JavaScript code in which object properties may be unquoted, in JSON only quoted strings may be used as properties.
Can you Try the following
'$.parseJSON(result)'
use parsejson in your ajax success function.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With