この問題は、数時間以上にわたって私を少し狂わせています。私は非常に多くの投稿や記事を読んだので、問題を漠然と理解していますが、原因はわかりません。問題は、未定義のオブジェクトで JSON.parse のようなものを送信するときです。それがなぜなのかはわかりません。とてもシンプルで、指摘されたらツールのように感じると思いますが、今のところ、問題を解決するのであれば少しばかげていると感じてもかまいません。
問題は、以下の方法を使用してフォームを送信すると、次のエラーが発生することです。
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
また、カーソルをフィールドからフィールドに移動すると、次のエラーが発生します。
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
これにより、フォームをコントローラーに送信して処理することが明らかにできなくなります。エラーは、jquery ライブラリ (498 行目) からのもののようです。(t は定義されていません)。jquery 1.9.1、bootstrap 2.2.2、および jqValidate/1.9.0.unobtrusive.js を使用しています。フォームはブートストラップ モーダルで、次のようになります。
@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>
モーダルは次のようにロードされます。
<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>
このコントローラーから:
public ActionResult GetUser()
{
var user = new UserModel
{
Id = 1,
Username = "sbody",
FirstName = "Some",
LastName = "Body",
Email = "sbody@domain.com",
UserTypeId = 6,
Created = new DateTime(2013, 1, 1),
Active = true
};
return PartialView("EditUser", user);
}
ClientValidationEnabled と UnobtrusiveJavaScriptEnabled の両方が web.config で有効になっています。同じ問題をあまりにも長い間見ていて、明らかなことがわからないという私のケースであることを願っています。どんな助けでも大歓迎です。ありがとう ：）