Using cables with AJAX


Just recently started using cables and it is great!

I’ve been trying to integrate a patch i built into a webpage that will retrieve the content (canvas and patch.js) using AJAX. I’ve also tried using jQuery’s .load and .getScript function.

Neither of these seem to work for me, the canvas is present but the patch is never ran and the patchInitialized() is never called. No console errors either. Is there a method i need to call manually if retrieving the content like this?

Does anyone have any experience with getting cables patches dynamically like this?



why the need t use jquery and AJAX and all this? i mean, javascript that is loaded via AJAX is not supposed to be executed…that is why there is JSONP…but i guess that has other problems.

why don’t you simply load the patch by creating a script-tag on the fly. something like this:

var el = document.createElement("script");

then the browser will load the javascript and you can handle all the initialization afterwards. same goes for the canvas element.

would that work for your usecase?


Thanks for the quick reply stephan!

This seems to work pretty well for the initial patch to load. I basically want to remove the canvas and patch after a javascript function has been called and then load an alternative patch. Switching between two patches without changing the URL?

I’m not sure if this is too complex of an idea.

I’ve tried calling your code in a setTimeout method with all additional initialization methods however this seems to not work. Is cables required to load on page load?


no, not really, but i bet you will have some problems with references and everything if
you try to reuse old variables and whatever is still around. i’d remove the script tag,
“null” all existing variables, remove the canvas too. then initialize the patch from scratch.

basically all of this:

let patch = new CABLES.Patch({
                        patch: CABLES.exportedPatch,
                        glCanvasId: "renderCanvas",

i guess the injection of a script-tag is asynchronous, so you might have to subscribe to
the CABLES.jsLoaded event or window.load again…you will have to fiddle around with that. but
errors in the console should give you a good idea.

Thanks so much for your help stephan. I will try and get this to work!