Answers

• kthorngren Posts: 21,452Questions: 26Answers: 4,975

  January 2022

  Use $(document).ready( function () {...}); like the examples.

  Kevin
• j.castelli Posts: 10Questions: 4Answers: 0

  January 2022

  The thing is I already use it. Here's how the table is initialized in my script:

  document.addEventListener("DOMContentLoaded", function(event) {
      if(document.querySelectorAll("#datatableStorefront").length) {
          (async () => {
              let columnsData = await fetch(routes.getStorefrontsDatatableColumns).then(response => response.json()).catch(console.log);
              initDatatable(columnsData); // This function initializes my table with data I got from the previous request
          })();
      }
  });
  

  Here's how my scripts are loaded:

  <!-- This first script loads JQuery as well  -->
  <script src='https://adminconnect.xxx.org/V3/US_AdminConnect_SDK.js'></script>
  <script defer src="https://cdn.datatables.net/v/dt/(...)/datatables.min.js"></script>
  <script src="{{ asset('js/app.js') }}"></script>
  

  There's indeed a defer before the CDN script but if I remove it, then I have an error saying that JQuery is not loaded.

  To be honest I'm pretty much a noob when it comes to JavaScript, do you think there's a way to overcome this?
• kthorngren Posts: 21,452Questions: 26Answers: 4,975

  January 2022 edited January 2022

  document.addEventListener("DOMContentLoaded", function(event)

  This is according to the DOMContentLoaded event docs:

  The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
  A different event, load, should be used only to detect a fully-loaded page.

  Maybe this SO Thread will help. A better place to research generic Javascript and jQuery questions is on Stack Overflow.

  Kevin