Cannot add a new custom action for use in your project

[LuisCaceres]

I created a custom action called test. That went absolutely fine I believe. However, adding a value of test to the data-do-when attribute causes a SyntaxError in JavaScript. According to the error only certain methods are allowed (such as blank, click, hide, show, etc). This effectively makes it difficult to come up with custom methods and use them in your code.

[dkeeghan]

Hi @LuisCaceres,

Here is an example of adding a custom event:

// add custom action
$.doWhen.addAction('test', function($el) {
    $el.find('.js-match-text').text('Matched');
}, function($el) {
    $el.find('.js-match-text').text('Unmatched');
});

// initialise doWhen
$(document).ready(function(){
    $(document).doWhen();
});

Then you would use it by using:

<select id="select-box">
    <option value="match">Match</option>
    <option value="no-match">No match</option>
</select>

<div data-do-when='{ "select-box": ["match"] }' data-do-action="test">
    Here is the status of if I am matched or not: '<span class="js-match-text">Unmatched</span>'
</div>

I've put this in a CodePen which works as expected https://codepen.io/dkeeghan/pen/xrewGO

In the warning message that would read like this:
$.doWhen: Invalid action "invalid". Valid options are: [blank, show, hide, click, enable, disable, test]

Check and make sure that the custom action that you've added is included in the "Valid options" list, if it's not, it looks like it hasn't been added correctly.

Cheers,
Damian

[dkeeghan]

@LuisCaceres did the above resolve your issue?