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
Zsolt Olah

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


}

}

Lisa Jones
David Crocker

Why? Why? Why? and it seems without consultation

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? 

Lisa Jones
Matthew Bibby

As you probably know, jQuery is an ancient library that is rightly being dropped by many developers these days, especially as they look towards the future.

A lot of its functionality is no longer needed with modern browsers and it's a pretty big library to include if you are only using it for a few small things.

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.

Zsolt Olah

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.) 

OWEN HOLT

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.

OWEN HOLT
Marie Nelson

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

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