No more jQuery?
Jan 22, 2020
It seems like the latest update for Storyline 360 DOES NOT include jQuery anymore. I know many of us has been relying on jQuery workarounds. So the options now you have:
1. Not using jQuery anymore in JavaScript triggers.
2. Manually include a copy (or reference) to jQuery in the published version.
(If you're not sure about what this means but you have some of these "hacks" in your code, basically if you see $ or jQuery in that code snippet, for example
$('.area-secondary-wrapper').toggle();
$('.menu-icon-wrapper').toggle();
https://www.rabbitoreg.com/examples/p99/#/lessons/AF_796ALUsNSIxEj9YhkikDWrJrRK4H0
to toggle the side-bar menu on and off... , you are using jQuery.)
I'll update the Project 99 https://www.rabbitoreg.com/examples/p99/#/lessons/xt5L89i0WgiXivqKOOd3yy0q0XS7TJJk JavaScript examples with the new approach.
17 Replies
Hello Zsolt,
Were you able to include a reference to jQuery. After publishing my course to web, I have tried adding jQuery to story.html. It doesn't seem to work.
Try this:
Put this on the Master Layout when the timeline starts. If you're using multiple layouts, put it on each.
var p = GetPlayer();
//var webLoc = p.GetVar("WebObjectFolder");
//this.oLocation="story_content/WebObjects/"+webLoc+"/";
function add_script(scriptURL,oID) {
var scriptEl = document.createElement("script");
var head=document.getElementsByTagName('head')[0];
var fn = "loadedCallback_"+oID
scriptEl.type = "text/javascript";
scriptEl.src = scriptURL;
scriptEl.id=oID;
scriptEl.onload = eval(fn);
head.appendChild(scriptEl);
}
if(document.getElementById('zsoltsupport')==null){
add_script("https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js","zsoltsupport");
}
function loadedCallback_zsoltsupport()
{
console.log("loaded")
}
This will load jQuery when Storyline starts or resumes. However, unfortunately, it takes time to load. If in the mean time your slide is trying to use jQuery it might not work. Therefore, on the slide when you usually just throw in jQuery when it starts, you have to wait until it is loaded:
For example, if on a slide I want to run something:
checkjQ();
function checkjQ()
{
if(!window.jQuery)
{
setTimeout(function(){checkjQ()}, 100);
}
else
{
//this is where you put your code with jQuery
}
}
Sorry, it seems to be working. I noticed some element id's have changed.
For example, I was looking for an id called "presentation" which doesn't exist anymore.
Hi everyone,
To improve security for our customers, we removed jQuery from Storyline 360. You can still use it to write custom JavaScript. You'll just need to reference the jQuery library directly.
Why? Why? Why? and it seems without consultation
Does GetPlayer still work because I am finding my titles that I publish with the latest build do not let me access this function to get variables.
Made a post on a simple fix for this problem: https://community.articulate.com/discussions/articulate-storyline/fix-for-loss-of-jquery-and-gsap-in-new-update
I agree. I'm not sure why this type of change was just implemented without some sort of notification and opportunity for us to weigh in about the impacts. jQuery is so prevalent on the web and within corporate infrastructures that I'm wondering why having a js file (which won't do anything unless someone codes a request is a security issue. Is the thought that the folks who use Storyline are nefarious in some way? There must be some logic somewhere I don't understand.
As far as placing code in all the master slides - wouldn't that render the preview useless, or are we now able to preview with javascript? Is the expectation that we duplicate ALL our master slides so we have one with Javascript and one without, then maintain them both?
This is actually a much better reasoning than I've read today for removing the library. That said, to silently pull it without any notification does put some of us in a bind. At the very least, some sort of announcement could have been made like "on Jan 1, 2021 will will discontinue using jQuery. We will be using "whatever" which is included as of our most recent release. Please make the modifications necessary for migration.
Technology will always follow trends, it will always evolve - that said, we should have some time to plan when these decisions are made for us. And I do completely understand that it wasn't supported (as JS isn't), but there are times when we have no choice but to use other methods to resolve either bugs that aren't fixed for months or years, or to make some functionality happen that we've asked for in feature requests that have never been implemented (i.e. detect changes in text fields as people are typing without needing to "blur" the field).
The other thing that is probably rarely considered is when folks build (via contract) courses for clients and hand them off. What happens when they update? What extra steps do they have to go through? Do these contractors have to dig through their records and notify all their clients to make the more-than-text changes they may not be comfortable doing (which is why they often hire contractors in the first place)?
There are just a lot of impacts to such a change that don't seem like they were considered.
To their credit, neither JavaScript, nor jQuery has been ever officially supported beyond the Execute JS trigger. And I agree with Matthew about jQuery is a heavy library for using it for our purposes. However, we were not building applications in jQuery. The only reason we used it because that was the only workaround to manipulate object on the screen. Now, maybe we'll have new features, supported features now to do all the things we had to have a workaround for. I'd be happy about to see that! It would also save us from the headache of figuring out what changed on the screen with every release. (Again, this is still available but you need to add jQuery manually.)
The other thing that is probably rarely considered is when folks build (via contract) courses for clients and hand them off. What happens when they update?
Wait, If the newest version of SL doesn't support it, does that mean that published courses are affected, too?
Wow, dropping this without annoucing or even noting it in the version log is quite reckless.
A good example of this is how I would use it to find elements in the player and add an ID to them so that I could then easily manipulate them. Now, with jquery gone, I've discovered that many of the previously ID'less elements now actually do have an ID so my jquery shortcuts are obsolete.
Still, a "warning shot across the bow" would have been nice.
Hey Zsolt!
Do you know if this broke the background music java that you created awhile back? It seems like anything new that we try to use it on won't work.
Thank you,
Marie Nelson
Hi Marie!
It depends on the code. Send me an email with what you're using and I'll take a look.
Zsolt
My music JavaScript is still working as I did not use any jquery shortcuts.
The thing that breaks music JS for most users is running the code BEFORE the user interacts with the page. This became a security requirement for media in most/all of the recent browser releases.
See example file in Rise with code and instructions:
https://rise.articulate.com/share/HO9-VvSOZZdjXn5Ga0-a-BFDcYZQYcbr
Can someone please make a tutorial video on how we add the Jquery to our Projects.
Thanks in advance.