Force jQuery.noConflict on generated code

4 posts, 0 answers
  1. MARTIJN
    MARTIJN avatar
    2 posts
    Member since:
    May 2017

    Posted 20 Dec 2017 Link to this post

    I am using PHP wrapper to generate a Kendo UI Grid. But the view factory that I am using use jQuery and other stuff (doesn't matter). So, when I try it to generate a page in the application and add the code that generates Kendo UI Grid. The browser fires an exception because 'jQuery' object doesn't exist. I tried jQuery.noconflict (https://api.jquery.com/jquery.noconflict/) API but it didn't work.

    Is there an option in Kendo UI wrappers to the symbol or the name that it should use for jQuery?

  2. Dimitar
    Admin
    Dimitar avatar
    683 posts

    Posted 22 Dec 2017 Link to this post

    Hello,

    You should be able to change the jQuery alias by using $.noConflict() as follows:
    <script>
      $m = jQuery.noConflict();
      $m("#combo").kendoComboBox({});
    </script>

    Also, please make sure that jQuery is referenced only once and that it is placed in the <head> element of the page along with the kendo scripts. Failing to do so might result in undefined widgets error. You can checkout the Troubleshooting Documentation Article, where you can find more about the most common issues that can be encountered and different ways to solve them.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. MARTIJN
    MARTIJN avatar
    2 posts
    Member since:
    May 2017

    Posted 23 Dec 2017 in reply to Dimitar Link to this post

    Thank you, I know this part. But I am using PHP wrappers to generate the widgets. So the noConflict method won't work. I tried it before I asked the question. The page that I am working on is working great. But after the integration with Moodle page renderer, it reports that jQuery doesn't exist or not defined. I reference jquery in the same page and it will be called before the kendo UI min js file in the page so I don't think it's a reference issue. The additionals configurations like the custom filter don't have any errors, only the generated code does.
  4. Dimitar
    Admin
    Dimitar avatar
    683 posts

    Posted 26 Dec 2017 Link to this post

    Hello,

    The server-side wrappers for the Kendo UI widgets are self-initialized. This means that each initialization script is rendered right after the HTML markup of the widget. In such cases, the Kendo UI scripts can be registered at the end of the document while the jQuery script must be registered in the body before the first Kendo UI widget on the document, or in the document head.

    I have made a quick research on the moodle renderer and noticed that it forces all script tags at the end of the body of the page. Therefore, in case jQuery is loaded by default with the moodle renderer, you should move the reference to the <head> of the page and make sure that jQuery is referenced only once in the page, otherwise all existing jQuery plugins (including Kendo UI) will be wiped out, thus triggering an error.

    Please refer to the following documentation in moodle for using jQuery:


    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top