[Solved] Kendo functions stops working after event.stopImmediatePropagation

[Francesca]

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

[Daniel]

Hi,

The widgets will stop working because the scripts will not be evaluated when the response is set to the innerHTML property. You can use the jQuery html method to set the response in order to avoid the problem e.g.

if (updateTarget) {
   $(updateTarget).html(xhr.responseText);
}

Regards,
Daniel
Telerik