kendo.all.min.js is loaded with every ajax request.

[Anton]

Hi, I have a webpage where I load the main page, and then load kendo.ui components (ASP.NET MVC) via ajax calls. On checking, the kendo.all.min.js library - all 1,5 MB of it - gets loaded with every call. That is because I have the scripts included in the page loaded via ajax. However, were I to exclude these scripts, the page loaded via ajax will not work correctly because the kendo.ui components will not work correctly.

How can I make these pages loaded via ajax use the kendo.all.min.js library loaded during the loading of the main page?

Thanks in advance.

[Dimo]

Hello Violetta,

The observed problem can occur if you load jQuery in every Ajax request as well, which is incorrect, because each new jQuery instance deletes all previously registered jQuery plugins (such as the Kendo UI widgets). If you make sure that all jQuery and Kendo UI scripts are loaded only once during initial page load, you should have no problems.

http://docs.telerik.com/kendo-ui/troubleshooting#known-javascript-errors

Regards,
Dimo
Telerik

 

 

[Anton]

Dimo,

Here's my setup:

I am using Telerik for ASP.NET MVC

Scenario 1)

Page A contains Kendo PanelBar.
Page A contains all the corrects javascripts and stylesheets

One of the bars within the PanelBar loads Page B via AJAX and (supposedly) includes it into the DOM.
Panel B contains some other Kendo UI components.
Panel B does not include any javascripts or stylesheets, relying instead on Page A to supply them because Page A already loaded them.

Result: Panel B's Kendo UI components do not work. They render, but without any Javascript functionality.

* Note: there is no duplicate loading of jQuery; it is loaded only once in Page A.

Scenario 2 (same as Scenario 1, but with one modification):

If I include all the correct javascripts and stylesheets in Page B, Page B now works, but it loads > 1.5 MB of javascript files now. There is duplicate loading of jQuery in Scenario 2 for Page B, but it does not seem to mask or cancel jQuery loaded for Page A.

Question 1: How do I avoid loading all that javascript for every ajax loading of Page B, Page C, etc., which are loaded by Page A?

Question 2: What is context propagation for pages loaded into other pages via AJAX? Do they become part of the same DOM, or not? And if they become part of the same DOM, why does the already loaded javascripts not propagate in scope to them, so that code within those loaded pages could use the javascripts from the parent page?

Thanks for your reply. I am sure this problem comes up frequently. I tried removing all javascripts from child pages, per your advice. It did cause javascripts to stop being loaded again and again, but the Kendo UI components stopped working in child pages. So it must be something different.

[Anton]

Dimo, never mind, please, it is solved. For everyone who is reading, for some reasons in Scenario 1 you have to define all javascript functions in your html before you attach them to Kendo UI components.