html loaded with jQuery.load() doesn't render p5.js

Question

I have a website composed of multiple html pages ('home.html', 'gallery.html' etc), injected to index.html using jquery load().

Each of these pages reads data from csv tables. To do this, each page calls a js script that reads the csv and assigns data from the table to html elements, using p5.js loadTable().

This works fine for each page being the main html, but as soon as I inject them into the index.html, sketch.js doesn't recognize its p5.js syntax anymore (I think that's the issue here): key functions like preload() and draw() don't run unless called, and loadTable() isn't recognised either.

sketch.js is read, I've pinged from it to the console, just the p5 doesn't work as mentioned above.

Below is a slim version of my code. I need to keep the main structure of html pages dynamically loaded into index.html, and I need to read my content from csv's. Any advise on how to solve this?

index.html:

<html>
<head>
  <!-- p5.js and dom -->
  <script src='./lib/p5.min.js'></script>
  <script src='./lib/p5.dom.min.js'></script> 
  <!-- jQuery min -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

  <header>header, applies across the website></header>

  <div id="activePage"></div>

  <script>$("#activePage").load("home.html");</script>

</body>
</html>

home.html:

<div id="tempTarget"></div>

<!-- js to read the csv and assign to #tempTarget -->
<script src='./script/sketch.js' defer></script>

sketch.js:

var data;
var loaded = false;

function preload() {
  data = loadTable(
      './assets/copyText.csv', 'csv', 'header',
      // Callback:
      function(table) {
        loaded = true;
      });
}

function draw() {
    // check if table data is loaded
    if (!loaded) {
      console.log('Data not yet loaded');
      return;
    }
   
   // if data is loaded, get cell (0, 0) into #tempTarget
   document.getElementById("tempTarget").innerHTML = data.get(0,0);
}

@Lapskaus not at all unfortunately. I am loading home.html into index.html, not vice versa. home.html doesn't contain any html, head and body tags - just what I put in the code snippet. — Os Bo, Aug 05 '22 at 16:29

score 0 · Accepted Answer · answered Aug 10 '22 at 10:01

Solved: all code using p5.js - in my case, using loadTable() - needs to be fired from index.html:

<script src='./script/sketch.js' defer></script>

needs to move from home.html to index.html.

I've added defer to avoid firing the script before the DOM is in place.

That's it!

html loaded with jQuery.load() doesn't render p5.js

1 Answers1