Dependency chains do not work #45

dzschille · 2017-11-16T13:42:24Z

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.

The text was updated successfully, but these errors were encountered:

haukeadler · 2017-11-17T11:13:19Z

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)

dzschille · 2017-11-17T11:51:48Z

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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dependency chains do not work #45

Dependency chains do not work #45

dzschille commented Nov 16, 2017

haukeadler commented Nov 17, 2017 •

edited

Loading

dzschille commented Nov 17, 2017

Dependency chains do not work #45

Dependency chains do not work #45

Comments

dzschille commented Nov 16, 2017

haukeadler commented Nov 17, 2017 • edited Loading

dzschille commented Nov 17, 2017

haukeadler commented Nov 17, 2017 •

edited

Loading