Using cables with AJAX

Hello,

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?

Cheers!

hey,

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");
el.src='patch.js';
document.getElementById("container").appendChild(el)

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?

best,
stephan/steam

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?

hm,

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!

@joe Did you ever manage to get this to work?

No I was having issues with initialising and re-declaring javascript variables, in the end decided to rework my project.

It seemed as though cables would not load if there was a delay between the page loading and running cables. A delay of 100ms in a setTimeout function would cause it to not work at all.

I was able to create the effect i wanted using seamless page transitions and the use of the “CABLES.jsLoaded” event listener.

For now this is an open question for anyone willing to take on the challenge :slight_smile:

@joe Thanks, I was trying to do something similar before I came to this thread.
I went a slightly different way around, but it might give you some ideas.

I decided to load patched through the iFrame op, my end goal was to have a hero comp that loaded other cables comps inside it.

Having a little trouble with transparency so it’s not quite working as i’d like, but with enough help and time I’ll solve it eventually :slight_smile: