Discussions

Expand all | Collapse all

Kendo AMD not loading, trying to convert to global

  • 1.  Kendo AMD not loading, trying to convert to global

    Posted 08-16-2018 23:05
    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!


  • 2.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 02:58
    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"">https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/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()
    });



  • 3.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 04:46
    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 );
    });


  • 4.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 16:28
    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.


  • 5.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 16:28
    <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);" &
    "});" &

    "'/>"


  • 6.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 16:36
    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.


  • 7.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 16:40
    Escaping is definitely a pain. I tried to put the code in the console and this is what I got: 


  • 8.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 16:46
    This is what I get and it indicates d3 and kendo are properly configured through requirejs



  • 9.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 16:59
    That looks like it is working on yours. What possible reason could there be that I would be getting undefined for the kendo object? I have even tried changing the cdn url for kendo to "http://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min">http://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js">http://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min".



  • 10.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 16:59
    require.config({ paths: { "d3": "https://cdnjs.cloudflare.com/ajax/lib...", "kendo": "http://kendo.cdn.telerik.com/2018.2.6..." } }); require(['d3', 'kendo'], function(d3, kendo) { console.dir(d3); console.dir(kendo); console.dir(requirejs.s.contexts._.config ); });


  • 11.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 17:26
    I think it is working for you as well. The "Invalid require call" string you see in the console is just a literal string within the body of the function which is returned by the last statement:

    � d(e,c,g){var i,j;f.enableBuildCallback&&(c&&J(c))&&(c.__requireJsBuild=!0);if("string"===typeof e){if(J(c))return w(B("requireargs",
    "Invalid require call"),g);if(a&&t(P,e))return P[e](q[a.id]);if(h....


  • 12.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 17:34
    I think you are just fooling yourself that d3 and kendo are not loading. Try this instead:

    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.log(d3.version);
      console.log(kendo.version);
    });
    output:
    4.9.1
    2014.1.416


  • 13.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 17:38
    You're right, those are working. In the picture I uploaded, that second object for Kendo was coming back undefined but now it seems to be working. I must have just been doing something incorrectly. Thank you so so much for your help! I really appreciate you taking the time to help me!


  • 14.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 17:51
    Okay I see that undefined now - it is probably some remnant due the the history of the command you put in the console without refreshing the page.

    But this is a good thread as I suspect many people have given up using AMD libraries with QuickBase because of precisely what you have experienced.

    In future versions of QuickBase we will have native ES6 modules, and Sam is going to have an epiphany and go full on with the monadic pipeline of workflows and all these problems will evaporate.


  • 15.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 19:01
    That will be great to have the ES6 modules. I was finally able to get everything working. Just for the sake of anyone looking for a final solution, here is the code that got Kendo working in Quickbase. Thank you for starting me on the right path Dan, I really appreciate your help.


  • 16.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-17-2018 19:02
    $.getScript("https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js";, function () { });

    require.config({
    paths: {
    "jquery": "https://code.jquery.com/jquery-1.9.1.min";,
    "jszip": "https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min";,
    "kendo.all.min": "https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min";,
    }
    });

    require(["jquery", "jszip", "kendo.all.min"], function ($, JSZip, kendo) {
    window.JSZip = JSZip;
    $(document).ready(function () {
    Grid = new GridTest({ ProcessOrderID: '103308881', FieldList: '1.2.3.4' });
    Grid.createGrid();
    Grid.initiate();
    Grid.showColumns();
    })

    });


  • 17.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-19-2018 02:01
    I don't know why you are loading requirejs through $.getScript() as it is already loaded by QuickBase.


  • 18.  RE: Kendo AMD not loading, trying to convert to global

    Posted 08-20-2018 21:45
    You're totally right, that is unnecessary in QuickBase. I was just copying it from my local. My apologies.