Whilst continuing the development (from other devs) of new features for the in-house CMS at work, I ran into a problem with an AJAX post method.
The goal was to not refresh the page when content was being saves, since we're using Kendo UI tabs and windows, a page refresh would lose your current position and hinder the UX.
For one page and controller, the following code worked:
$("#btn-create-folder").click(function (event) {
event.preventDefault();
var folder = {};
$(this).closest("form").serializeArray().map(function (item) {
if (folder[item.name]) {
if (typeof (folder[item.name]) === "string") {
folder[item.name] = [folder[item.name]];
}
folder[item.name].push(item.value);
}
else {
folder[item.name] = item.value;
}
});
$.ajax({
contentType: "application/json; charset=utf-8",
type: "POST",
url: $(this).closest("form").attr('action'),
dataType: "json",
data: JSON.stringify(folder),
success: function (result) {
if (result) {
self.CloseWindow();
self.RefreshTable();
$("#foldertree").data("kendoTreeView").dataSource.read();
}
else {
alert("Failed to save changes.");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
if (document.location.hostname === "localhost") {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.responseText);
}
}
});
});
The AJAX is attached to the submit button click. However, this would not work on another page and controller, even though the overall principles were the same.
To get it working, I had to use code where the AJAX would intercept the form submit, rather than a button click.
$("#metaTagsForm").submit(function (e) {
e.preventDefault();
var postform = new FormData(this);
$.ajax({
type: "POST",
url: $(this).attr("action"),
data: postform,
dataType: "json",
processData: false,
contentType: false,
success: function (msg, string, jqXHR) {
alert("Saved.");
},
error: function (xhr, textStatus, error) {
console.log(xhr.statusText);
console.log(textStatus);
console.log(error);
alert("Failed to save changes.");
}
});
});
A bonus is that there is less code, so the file is visually cleaner. At this stage, I'm unsure if there are pros/cons to either method.
The button click method required a [FromBody] on the parameter model of the controller post method, where as the form submission could not have this.
For reference, the controller method looks like this:
[HttpPost]
[TraitAuthorize(AllowedTrait = PermissionType.SubSiteEdit)]
public async Task<JsonResult> MetaTags(SubSiteModel model)
{
var errorList = new Dictionary<string, string>();
var routeFunctions = new RouteFunctions(SubSiteService, _routeHelper);
var subSiteBeforeChange = SubSiteService.GetSubSite(model.Id);
subSiteBeforeChange.OgType = model.OgType;
subSiteBeforeChange.TwitterSite = model.TwitterSite;
subSiteBeforeChange.TwitterCard = model.TwitterCard;
subSiteBeforeChange.ImageId = model.ImageId;
var userId = WebFactory.Instance.GetSessionManager(HttpContext).CmsUserId;
var response = routeFunctions.UpdateSubSite(subSiteBeforeChange, SettingSingleService.DefaultCultureId, userId);
if (response != null && response.IsAccepted && response.Object != null)
{
//return RedirectToAction("Index", "SubSiteOverview", new { subSiteId = model.Id, tab = "configuration" });
return Json(new { IsOk = true });
}
if (response != null)
{
foreach (var reason in response.RejectReasons)
{
errorList.Add("Reject", reason);
}
}
return Json(new { IsOk = false, Errors = errorList.Select(er => new { Field = er.Key, Message = er.Value }) });
} [HttpPost]
[TraitAuthorize(AllowedTrait = PermissionType.SubSiteEdit)]
public async Task<JsonResult> MetaTags(SubSiteModel model)
{
var errorList = new Dictionary<string, string>();
var routeFunctions = new RouteFunctions(SubSiteService, _routeHelper);
var subSiteBeforeChange = SubSiteService.GetSubSite(model.Id);
subSiteBeforeChange.OgType = model.OgType;
subSiteBeforeChange.TwitterSite = model.TwitterSite;
subSiteBeforeChange.TwitterCard = model.TwitterCard;
subSiteBeforeChange.ImageId = model.ImageId;
var userId = WebFactory.Instance.GetSessionManager(HttpContext).CmsUserId;
var response = routeFunctions.UpdateSubSite(subSiteBeforeChange, SettingSingleService.DefaultCultureId, userId);
if (response != null && response.IsAccepted && response.Object != null)
{
//return RedirectToAction("Index", "SubSiteOverview", new { subSiteId = model.Id, tab = "configuration" });
return Json(new { IsOk = true });
}
if (response != null)
{
foreach (var reason in response.RejectReasons)
{
errorList.Add("Reject", reason);
}
}
return Json(new { IsOk = false, Errors = errorList.Select(er => new { Field = er.Key, Message = er.Value }) });
}