Ajax Question
Summernote image upload through AJAX causes page refresh
I'm trying to perform image uploads from summernote plugin to the server through AJAX and ASP.NET MVC.
After inspecting several examples I was able to create the following JS code:
Init:
$('#contentEditor').summernote({
height: 520, // set editor height
minHeight: 520, // set minimum height of editor
maxHeight: 520, // set maximum height of editor
callbacks: {
onImageUpload: onImageUpload
}
});
Image Upload:
function onImageUpload(files) {
var data = new FormData();
data.append("articleId", @(Model.Id));
data.append("langId", @(Model.LanguageCode));
for (var i = 0; i < files.length; i++) {
data.append("files[" + i + "]", files[i]);
}
$.ajax({
data: data,
type: "POST",
url: "@(Url.Action("UploadArticleImage"))",
cache: false,
contentType: false,
processData: false,
success: function (d) {
if (!d.result) {
// TODO: Show error
} else {
for (var i = 0; i < d.data.length; i++) {
$('#contentEditor').summernote('insertImage', d.data[i]);
}
}
}
});
return false;
}
Now, the image uploading works and I'm getting the correct path but for some reason the AJAX call causes a page refresh after it executes.
I've tried adding the "return false" but it didn't work and I'm unable to use preventDefault since I'm not getting the event from summernote.
Does anyone have any idea why AJAX is causing the refresh?
I'm suspecting the culprit is the "FormData" object but I was unable to find any proof or a way to prevent the refresh even after extensive Google research.
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
So, after 2 days of researching every corner of google it was a guess that solved it... Apparently, the reason my site kept refreshing on file upload (And only on file upload!) through AJAX was because of Visual Studio "Browser Link"!!! The moment I shut it down the issue was resolved! It appears this happened because when I'm uploading a picture the folder structure changes and it causes the browser link to call a refresh.
It's a good tool but it seems it can cause some unexpected issues -_-
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download