Answers

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  June 20

  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 Posts: 3Questions: 1Answers: 0

  June 20

  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 Posts: 63,498Questions: 1Answers: 10,471 Site admin

  June 21

  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 Posts: 1Questions: 0Answers: 1

  June 25 Answer ✓

  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 Posts: 3Questions: 1Answers: 0

  June 25

  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 Posts: 63,498Questions: 1Answers: 10,471 Site admin

  June 27 edited June 27

  @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