3

I've tried everything I can think of to get this checkbox to work. This code is just supposed to trigger a function when a checkbox is checked. It currently does not trigger the alert, it only "visually" checks. Thank you for any input.

<apex:page >
    <script type="text/javascript">
    function checked() {
        alert("This has been triggered");
    }
    </script>
    <apex:form >
        <apex:inputcheckbox onclick="checked()"/>
    </apex:form>
</apex:page>
4

The problem is reported in the console:

Uncaught TypeError: checked is not a function

It seems to be a name conflict but I can't see where.

Changing the function name to e.g. isChecked works around the problem.

PS

The fix that relates to the root cause is this:

<apex:inputcheckbox onclick="window.checked()"/>

that references the global function checked that is otherwise shadowed (hidden) by the checked property of the input checkbox element.

  • I should have included the error message. I didn't think renaming would work... still it's probably not a great pattern to follow. That's a quick and dirty workaround though. – Adrian Larson Jul 15 '16 at 19:09
  • @AdrianLarson I disagree that there is anything dirty or workaround about it and would argue its a great pattern to follow unless a more complicated solution pays back in some way. – Keith C Jul 15 '16 at 19:49
  • I would argue that unobtrusive listeners are a lot less vulnerable to API changes and naming conflicts. Leaking functions into the global state is not just a code smell, it can have harmful side-effects as demonstrated by this very question. What if a naming conflict also gets introduced that breaks isChecked? – Adrian Larson Jul 15 '16 at 19:54
  • I guess here it was not a Javascript conflict, but I still think that naming functions that do not need to be named and leaking them into the global state is an avoidable smell. – Adrian Larson Jul 15 '16 at 19:59
  • @AdrianLarson Yep thats an argument for the complexity. Caused me to Google a bit and find what is the difference between overengineering, underengineering and rightengineering?. – Keith C Jul 15 '16 at 20:01
4

The first thing you should always do when you face a Javascript error is open up the console. Here's how to do it on:

If you had done so, you would have seen the following error when you click the checkbox:

Uncaught TypeError: checked is not a function

There are a few ways to deal with this. My preference is to use unobtrusive listeners. Try this vanilla Javascript:

<apex:page >
    <script>
    (function (D) {
        "use strict";
        D.addEventListener('DOMContentLoaded', function () {
            var i, checkboxes = D.querySelectorAll('input.myClass');
            for (i = 0; i < checkboxes.length; i++) {
                checkboxes[i].addEventListener('click', function () {
                    alert('fire');
                });
            }
        }); 
    })(document);
    </script>
    <apex:form >
        <apex:inputcheckbox styleClass="myClass" />
    </apex:form>
</apex:page>

Or its jQuery equivalent:

<apex:page >
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
    (function ($) {
        "use strict";
        $(function () {
            $('input.myClass').click(function () {
                alert('fire');
            });
        });
    })(jQuery);
    </script>
    <apex:form >
        <apex:inputcheckbox styleClass="myClass" />
    </apex:form>
</apex:page>
  • @AerinC A vital tool for any Javascript development! – Adrian Larson Jul 18 '16 at 13:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.