Forum Discussion

SpencerHilvitz's avatar
SpencerHilvitz
Qrew Trainee
7 years ago

Kendo AMD not loading, trying to convert to global

I am trying to load Kendo into Quick Base. I understand that Kendo is loaded as an AMD module. Unfortunately, it is not working with my custom application that I'm trying to load through the Rich Text Field. Are there any suggestions for how to convert Kendo to a global module? Is that even necessary? Thank you!
  • I understand what you are trying to do but without a CDN URL to the Kendo library I can only guess what version or components you are using.

    You basically have two options:

    (1) Try to load Kendo as an AMD library using QuickBase's requirejs implementation:

    Here is the requirejs code to load D3 used in an old forum answer:

    require.config({
      paths: {
        "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3";
      }
    });
    require(['d3'], function(d3) {
      console.dir(d3);
    });

    https://community.quickbase.com/quickbase/topics/how-do-you-reference-a-js-library-in-a-code-page#re...

    (2) Modify the Kendo library to prohibit it from loading as an AMD module. At the bottom of the Kendo library there will be code similar to this:

      ...
      }(jQuery), window.kendo
    }, "function" == typeof define && define.amd ? define : function(e, t) {
      t()
    });


    You need to knock out the logic that tests for define.amd. This is a tricky task to edit it correctly as the original code is minified, nested and uses constructs that are difficult for humans to read. I think this it the correct modification but I did not test it:

      ...
      }(jQuery), window.kendo
    }, function(e, t) {
      t()
    });

  • I just noticed there was a small typo in the requirejs code (errant semicolon) I posted. Here is a version of that code that clears the typo and loads d3 and kendo-ui-core using requirejs and then logs the d3 and kendo objects along with all the requirejs loaded modules:

    require.config({
      paths: {
        "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3",
        "kendo": "https://cdnjs.cloudflare.com/ajax/libs/kendo-ui-core/2014.1.416/js/kendo.core.min"
      }
    });
    require(['d3', 'kendo'], function(d3, kendo) {
      console.dir(d3);
      console.dir(kendo);
      console.dir(requirejs.s.contexts._.config );
    });
    • SpencerHilvitz's avatar
      SpencerHilvitz
      Qrew Trainee
      <img src='" & [SB_LOADER_IMAGE] & "' "&
      "onload='JavaScript:"&

      "console.log(&apos;triggered&apos;);" &
      "require.config({" &
          "paths: {" &
              "&quot;kendo&quot;: &quot;https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min&quot;"; &
          "}" &
      "});" &

      "require([&apos;kendo&apos;], function(kendo) {" &
          "console.dir(kendo);" &
          "console.dir(requirejs.s.contexts._config);" &
      "});" &

      "'/>"
    • SpencerHilvitz's avatar
      SpencerHilvitz
      Qrew Trainee
      Thank you so much for getting back to me so quickly! I had been trying to get this to work and I'm still having issues with the requirejs implementation. I have the following code and I am getting back undefined for the console.dir(). Sorry about all of the extra quotations, I am having to do the iol technique and use the rich text field syntax.
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      Don't even attempt to place your operative JavaScript into the onload attribute. Doing so will only cause you endless problems with all the escaping needed.

      Convince yourself the script I provided works by pasting it directly into the console. Do your development from the console. Once you get that working implement the IOL technique and place your working code into the module.js file. This is the fastest and more reliable way to develop script for QuickBase.