Buttons or pop-ups not working: finding JavaScript errors

A button that does nothing when clicked, a pop-up that never opens, a picker or slider that stays blank: these are almost always JavaScript problems. The page loaded, but a script failed, and without it the interactive parts stop. Your browser records exactly what failed in its developer console. It takes a minute to open, and it usually points straight at the cause.

Open the browser console

1. Open the page where something does not work.
2. Press F12, or right-click anywhere on the page and choose Inspect. On a Mac in Chrome you can also press Cmd + Option + J.
3. Click the Console tab.
4. Reload the page, then click the button that does not work. Errors appear in red.

You are looking for the first red error. Later errors are often knock-on effects of the first one.

What the common errors mean

A file under /js/DC/ could not be loaded (404)

The add-on's JavaScript files are missing from your server. Every D.C Style add-on with scripts keeps them in its own folder under js/DC/, and that folder is easy to miss when uploading, because it sits outside src/. Upload the full contents of the add-on's upload folder again, then confirm with the file health check.

"jQuery is not defined" or "$ is not defined"

XenForo 2.2 loaded the jQuery library on every page. XenForo 2.3 no longer does. An add-on written for XenForo 2.2 that relies on jQuery breaks on 2.3 with exactly this error. Check that the add-on version you have installed supports XenForo 2.3. The Compatibility section and Version History tab on its product page tell you. Then upgrade to a 2.3 build. Upgrading from XenForo 2.2 to 2.3 explains how to check all your add-ons before you move.

Errors that mention Rocket Loader or Cloudflare

Cloudflare's Rocket Loader delays and reorders scripts to speed up page loads. XenForo's scripts depend on loading in a particular order, so Rocket Loader regularly breaks buttons, editors and pop-ups. Turn it off for your forum in your Cloudflare dashboard, purge the Cloudflare cache, and test again. See Changes not showing? for more on Cloudflare.

"Oops! We ran into some problems … More error details may be in the browser console."

This means the button's request to your server failed. It is a server-side problem, not a JavaScript one. In the developer tools, open the Network tab, click the button again, and look for the request shown in red. Then check Logs > Server error log in the Admin CP for the matching error. Finding the real error explains what to look for.

An error in another add-on's file

One broken script can stop the scripts that come after it, so the add-on that looks broken is not always the one at fault. The file name in the error tells you which add-on it belongs to. Temporarily disabling that add-on in Add-ons is a quick way to confirm it.

Rule out your browser

• Browser extensions, especially ad and script blockers, can block scripts. Test in a private window, where most extensions are off.
• An old cached copy of a script can linger after an upgrade. A hard refresh, Ctrl + F5 or Cmd + Shift + R, fetches fresh copies.
• Another browser: if it works in one browser and not another, tell us both browsers and their versions.

Tip: If the feature is simply not on the page at all, with no button to click, JavaScript is probably not the cause. Start with Installed an add-on but nothing shows up? instead.

Still stuck? Open a support ticket with a screenshot of the console errors, the address of the page, the button you clicked and your browser name. Those four details let us reproduce most JavaScript problems straight away.