DataTables 2.0.8 with Plesk 18.0.61

rperper

Using their sample extension (ext-panel-stats) with the minimal additions of this:

    public function init()
    {
        parent::init();

        $baseUrl = pm_Context::getBaseUrl();

        $hl = $this->view->headLink();
        $hl->appendStylesheet("{$baseUrl}datatables.min.css");

        $hs = $this->view->headScript();
        $hs->appendFile("{$baseUrl}jquery-3.7.1.js");
        $hs->appendFile("{$baseUrl}datatables.min.js");
        $hs->appendFile("{$baseUrl}litespeed.js");
    }

...and a file named litespeed.js:

console.log("jQuery " + (jQuery ? "IS" : "NOT") + " loaded");
console.log("DataTable " + (jQuery.fn.dataTable ? "IS" : "NOT") + " loaded");
new DataTable("#sample");

I get the results of:

Uncaught:
Error: Mismatched anonymous define() module: function(t){return n(t,window,document)}
http://requirejs.org/docs/errors.html#mismatch
    at makeError (require.js?1717397912:5:1799)
    at T (require.js?1717397912:5:8692)
    at require.js?1717397912:5:15134

Uncaught:
Error: Mismatched anonymous define() module: function(e){return t(e,window,document)}
http://requirejs.org/docs/errors.html#mismatch
    at makeError (require.js?1717397912:5:1799)
    at T (require.js?1717397912:5:8692)
    at require.js?1717397912:5:15134

jQuery IS loaded
litespeed.js:2 DataTable NOT loaded

Uncaught:
ReferenceError: DataTable is not defined
    at litespeed.js:3:1

I'd sure like to use DataTables in this environment. A very old version of DataTables, 1.10.19 does work. But we'd sure like the new features. Any suggestions?

Thanks!

allan

This blog post talks about using DataTables in a Require.js environment. It might be of some use.

Beyond that, can you link to a page showing the error so I can take a look and see what is happening please?

I don't see your current require for DataTables for example.

Allan

rperper

Thanks for your response Allan!

The purpose of the appendFile() and appendStylesheet() is specifically to include js scripts and stylesheets without the use of the old fashioned require.

Unfortunately, since this is a Plesk Administrative extension, I can't post the required root login to this site. However, if you can contact me directly at rperper@litespeedtech.com we can work out a mechanism for you to be able to access the site.

I have the full extension as a .zip file as well, but I don't see a way to post those on this site. Again, I'd be glad to send that as well.

Thanks again for your help!

Bob

allan

Hi Bob,

appendFile() is a PHP function though - what does that result into in Javascript?

I'll drop you an email so we can see if we can get this figured out.

Allan

Justillusion

Hi @rperper

Plesk uses require.js and you can do something like this in your litespeed.js to load dependencies:

document.addEventListener("DOMContentLoaded", init);

function init() {
  // config for the scripts
  require.config({
    paths: {
      "jquery": "/modules/dummy/jquery-3.7.1.min",
      "datatables.net":  "/modules/dummy/dataTables.min",
    },
    waitSeconds: 40
  });

  // load by require.js and call main function afterwards
  require(['jquery', 'datatables.net'], main);
};

// main logic
function main (jQuery, DataTable) {
    console.log("jQuery " + (jQuery ? "IS" : "NOT") + " loaded");
    console.log("DataTable " + (jQuery.fn.dataTable ? "IS" : "NOT") + " loaded");
    new DataTable("#sample");
}

I hope it will help you!

rperper

Thank you so much, that works!

But it seems a bit limiting and it's probably my inexperience. I can't seem to be able to use jQuery or DataTable outside of the main function. I tried doing this, but I still wasn't able to get my DataTable definitions to work outside of main. I can define my tables there, but that seems a bit extreme; then even tables we don't use have to be defined.

function main (jq, dt) {
    jQuery = jq;
    DataTable = dt;
    new DataTable("#table");
}

Thanks again, this is great!

Bob

allan

@Justillusion - brilliant - thank you for your insightful reply!

I can't seem to be able to use jQuery or DataTable outside of the main function.

That's how require.js works - the libraries requested are passed in to the function created so that you have access to them while keeping things separated.

If you want to use the libraries else where you have three options:

1. Pass them around as variables to other functions
2. Make them global - e.g. window.DataTable = dt; and window.$ = jq;. This is considered "polluting the global scope" and can be frowned upon in an environment such as AMD loaders where a lot has been done to stop items leaking out into the global scope.
3. Similar to 2, but rather than using a global scope, use a local scope and define your other functions and the like inside main, where jq and dt will be accessible. I think this might be the most common approach? Not sure!

Allan