dependsOn Dependency chains do not work

Expectation: When i have an element "1" which depends from element "a", and i have some elements which depend from element "1", i expect that these elements gets hidden when "1" gets hidden.

Code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="./dependsOn.min.js"></script>
</head>
<body>
<div class="chars">
    Chars<br />
    <label class="form__labelradio">A
        <input class="depA" type="radio" name="char" value="a"/>
    </label>
    <label class="form__labelradio">B
        <input class="depB" type="radio" name="char" value="b"/>
    </label>
    <label class="form__labelradio">C
        <input class="depC" type="radio" name="char" value="c"/>
    </label>
</div>
<hr />
<div class="numbers">
    Numbers<br />
    <label class="form__labelradio">1
        <input class="dep1" type="radio" name="number" value="1"/>
    </label>
    <label class="form__labelradio">2
        <input class="dep2" type="radio" name="number" value="2"/>
    </label>
    <label class="form__labelradio">3
        <input class="dep3" type="radio" name="number" value="3"/>
    </label>
</div>
<hr />
<div class="animals">
    Animals<br />
    <label class="form__labelradio">Dog
        <input class="depDog" type="radio" name="animal" value="dog"/>
    </label>
    <label class="form__labelradio">Cat
        <input class="depCat" type="radio" name="animal" value="cat"/>
    </label>
    <label class="form__labelradio">Frog
        <input class="depFrog" type="radio" name="animal" value="frog"/>
    </label>
</div>
<script>
    $(function () {
        $('.dep1').dependsOn({
            'input[name="char"]': {values: ['a']}
        });
        $('.depDog').dependsOn({
            'input[name="number"]': {values: ['1']}
        });
        $('.depCat').dependsOn({
            'input[name="number"]': {values: ['1']}
        });
        $('.depFrog').dependsOn({
            'input[name="number"]': {values: ['1']}
        });
    });
</script>
</body>
</html>

Demo: https://jsfiddle.net/5rd3ogkf/

Steps to reproduce:

Klick "A". You can see "1" appears.
Klick "1". You can see the animals appear.
Klick "2". You can see the animals disappear.
Klick "1" again. You can see the animals appear again.
Klick "B". You can see "1" disappears. That's correct. But the animals are still there. Because "1" is hidden, i expect that the animals are hidden too.

Tested in Firefox 57 and Chrome 62.

Nov 16 '17 13:11 dzschille

Are you able to formulate the dependencies explicitly like so?

        $('.dep1').dependsOn({
            'input[name="char"]': {values: ['a']}
        });
        $('.depDog').dependsOn({
            'input[name="number"]': {values: ['1']},
            'input[name="char"]': {values: ['a']}
        });
        $('.depCat').dependsOn({
            'input[name="number"]': {values: ['1']},
            'input[name="char"]': {values: ['a']}
        });
        $('.depFrog').dependsOn({
            'input[name="number"]': {values: ['1']},
            'input[name="char"]': {values: ['a']}
        });

See working example https://jsfiddle.net/5rd3ogkf/3/ (updated to .dependsOn v1.5.1 because your Fiddle used 1.0.0 which does not seem to work)

Nov 17 '17 11:11 haukeadler

Hi @haukeadler , your example is a workaround that works in this simple case. But when you have a "real" form with 10 fields or more, and every field has 5 options, than you would have a bloat of dependsOn definitions. Every field must than be depended on all the ones before.

I think when an element gets hidden because of its dependency that the hide event should bubble to the elements that are depended from it.

Nov 17 '17 11:11 dzschille

dependsOn dependsOn copied to clipboard

Dependency chains do not work

dependsOn
dependsOn copied to clipboard