External JS file in visualforce page not defined

Question

I feel like I'm missing something trivial here, but who knows... I have a Javascript file with two simple methods. This file is being included by an tag.

Signing.JS

function toggleVisibilityFromClick(idOfObjectToToggle){
    var current = document.getElementById(idOfObjectToToggle);
    if (current.style.display === 'none')
        current.style.display = 'block';
    else 
        current.style.display = 'none';

        document.title = 'hello!';
}

The visualforce page has the lines:

<apex:includescript value="{!$Resource.SigningJS}"/>
<apex:commandButton value="Manage Roles" onClick="toggleVisibilityFromClick('rolesManager'); return false;"/>

SigningJS.js has been uploaded to static resources. When I click the button I get the error:

SCRIPT5009: 'toggleVisibilityFromClick' is not defined

Answer 1

You need to export your function definitions via the global scope.

window.toggleVisibilityFromClick = function(idOfObjectToToggle) {
...

---

Alternatively, make sure you have no script errors anywhere in your code. If there are syntax errors, the function won't be defined.

Answer 2

Did some more digging and found that the JS file mime type was defaulting to text/html. I changed it to application/javascript in the meta file and all was good.