This is a migrated thread and some comments may be shown as answers.

Kendo functions stops working after event.stopImmediatePropagation

1 Answer 70 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Francesca
Top achievements
Rank 1
Francesca asked on 10 Aug 2015, 01:53 PM

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

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 12 Aug 2015, 01:21 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Francesca
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or