I want to send a HttpPostedFileBase to my controller using Ajax.BeginForm together with the rest of my form.
Because I'm using Ajax I need to tweak my request in order for it to work, (file is otherwise null).
The problem I'm facing is that the kendo functions (multi-selects, file-inputs etc), in my form, doesn't reload/stops working after the content is reloaded with ajax. The script that cause this problem is using
e.stopImmediatePropagation();
which stops all kendo functions for some reason, (no javascript expert here).
MVC VIEW
@(Html.Kendo().MultiSelectFor(x => x.DefaultCategoryModel.CategoryId)
.DataTextField("CategoryName")
.DataValueField("CategoryId")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCategories", "Shop");
});
})
)
note: It doesn't matter which kendo functions I use, they all stop working.
Script
window.addEventListener("submit", function (e) {
var form = e.target;
if (form.getAttribute("enctype") === "multipart/form-data") {
if (form.dataset.ajax && $(form).valid()) {
e.preventDefault();
e.stopImmediatePropagation();
$('.admin-shop-settings-message-container').remove();
AjaxLoadUp();
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (form.dataset.ajaxUpdate) {
var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
if (updateTarget) {
updateTarget.innerHTML = xhr.responseText;
}
}
}
};
xhr.send(new FormData(form));
}
}
}, true);
I have tried reloading Kendo script using:
$.getScript("myscript");
inside the if (updateTarget) but that doesn't solve my problem.
Any suggestions? Thank you