How to load a p5.js script dynamically

Question

I am trying to create a modal window which displays a canvas animation. The idea is obviously to do this without loading a new page, and load the animation dynamically. The canvas animation is created from a javascript file - using the p5.js library (Processing for the web).

I use JQuery.load() to load html content dynamically into the modal window, but the script tag inside that html does not get executed.

Below is the html file I intend to load into the modal window. Once again, when I load this file using the JQuery.load('/path/filename.html') I don't get any errors, however the script tag at does not execute.

<div id="sketchContainer" class="sketchContainer">



</div>

<script type="text/javascript" src="p5sketch/sketch.js"></script>

below is the JavaScript which handles the .load() requests.

function loadData() {

  $('.projectBlock').load("modalContent.html", function() {
    console.log("load html was performed");
    $.getScript("p5sketch/sketch.js", function(data, textStatus, jqxhr) {
      console.log(data);
      console.log(textStatus);
      console.log(jqxhr.status);
      console.log("load sketch was performed");
    });
  });

Maybe I am missing something. Perhaps it has something to do with canvas. I just can't figure it out. Does anyone know how to approach this?

How do you normally start the script sketch.js?? maybe you need to add a self invoking function to start it because none of the normal window.onload events will fire when you load a script — Blindman67, May 26 '16 at 13:52

score 0 · Answer 1 · edited May 23 '17 at 10:29

I did a google search of "jquery load html with javascript" and got a ton of results, including these related questions:

jQuery .load() call doesn't execute javascript in loaded html file

jQuery .load() / .ajax() not executing javascript in returned HTML after appended

According to the answers to those questions, jquery is stripping out the <script> tags. You have to load the JavaScript separately from the html. You can use jQuery's getScript() function for this.

How to load a p5.js script dynamically

1 Answers1