No more jQuery?

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.  

19 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


}

}

Matthew Bibby

GetPlayer will still work Richard.

David, jQuery was never included in Storyline for us to use in the way that we do, so I understand why there was no consultation. 

I'd like it if Articulate could give us some warning with major changes like this (and recent changes they made to the publishing structure), but as we have the ability to run older versions of Storyline while we rewrite our code or whatever, I get why they don't.

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.

Personally, I'm pleased to see that Articulate has moved away from using this. 

If your projects still rely on jQuery, you can just add it back. To do this I'd use Zsolt's approach above

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.

Matthew Bibby
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.

I agree with you 100%. As a contractor with many clients, changes like this can cause real issues.

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

Matthew Bibby
Walt Hamilton

Wait, If the newest version of SL doesn't support it, does that mean that published courses are affected, too?

Nope, it'll only become an issue if they are republished with a new version of Storyline. So they'll work fine for now, but the next time the clients want changes made you'll need to manually include jQuery or figure out an alternative solution.

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