Updating Statuspage to jQuery 3.5

[#1]

On June 15, 2020, the jQuery library that loads on all status pages will be updated to jQuery 3.5. We’re making this update to protect status pages against known security vulnerabilities in the version currently used, jQuery 1.8.2.

Before we make this update, we want users of status pages with custom JavaScript to confirm their page customizations work correctly with both versions. It's unlikely that any pages will require edits to the existing JavaScript, but your page may have jQuery functions that aren’t supported or have changed with the update to jQuery 3.5.

To help you verify if there is any impact to your page, we’ve added the ability for you to preview your page with jQuery 3.5 before we make the update:

1. Click Your page in the left sidebar menu.

2. Click Customize page and emails in the secondary menu.

3. Click the Customize HTML & CSS button in the top right of the Customizations page.

4. Locate the toggle at the top of the page for Preview jQuery version, as shown below.

5. Select v3.5. Your page will update to show what it will look like under the new version.

6. Take note of your customizations affected by the new version.

7. Make the necessary customization changes or contact our support team for help.
   
   
   

[Dave Parrish]

Thanks @Chase Wilson! I can add a little bit more commentary about this update, as well as give some guidance about what you might need to change, if anything.

The jump from jQuery 1.8.x to 3.5.x is a big one, and there have been a number of breaking changes along the way. However, there's a good chance that your page will continue to work just fine, with no changes to your custom code. The best approach is to test your page using the jQuery preview we've provided, and check the js console for any errors that appear when you to toggle to jQuery 3.5.

If you do encounter errors, the jQuery API docs have ample information about what's been deprecated.

If your custom code includes any of the snippets from our sample customizations library, the good news is that 100% of those work in jQuery 3.5.x without any change required.

[Dave Parrish]

So, how about some examples of code that work in jQuery 1.8.x but not in jQuery 3.5.x? Here are a couple no-longer-supported methods you may be using in your custom code:

.load()

The .load() method has been removed. So if your custom code is binding an event handler to the "load" JavaScript event, and you're doing it like this:

$(window).load(function() {
  // do amazing stuff
});

Then you should update your code to use the .on() method instead, like this:

$(window).on("load", function() {
  // do amazing stuff
});

.unload()

Similarly, the .unload() method has been removed and should be updated with the .on() method, thusly:

$(window).on("unload", function() {
  // do more amazing stuff
});

.size()

The .size() method has been removed, and you should instead use the .length property, which is functionally equivalent. So this:

var n = $("div").size();

Should be replaced with this:

var n = $("div").length;

Of course this is not an exhaustive list of all the breaking changes. If you end up having to update your code, please feel free to share your examples here in the comments!