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

4 posts, 0 answers
  1. Violetta
    Violetta avatar
    6 posts
    Member since:
    Nov 2014

    Posted 16 Jan 2015 Link to this post

    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.
  2. Dimo
    Dimo avatar
    8404 posts

    Posted 20 Jan 2015 Link to this post

    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.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. Violetta
    Violetta avatar
    6 posts
    Member since:
    Nov 2014

    Posted 22 Jan 2015 in reply to Dimo Link to this post


    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.

  4. Violetta
    Violetta avatar
    6 posts
    Member since:
    Nov 2014

    Posted 22 Jan 2015 in reply to Violetta Link to this post

    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.
Back to Top