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>
0

2 Answers 2

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.

7
  • 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, 2016 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, 2016 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, 2016 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, 2016 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, 2016 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>
1
  • @AerinC A vital tool for any Javascript development!
    – Adrian Larson
    Jul 18, 2016 at 13:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .