0

Okay, So I have looked through all the other questions around trigger not working. I think my question is a bit different from the others I believe.

I have this here listening for clicks on a div:

$(".switch").click(function(){
    var state = ( $(this).children('.b1').is('.btn-success') ? 0 : 1 );
    $(this).attr('data-state', state  );
    $(this).children('.b1').toggleClass('btn-success');
    $(this).children('.b0').toggleClass('btn-danger');
    $(this).trigger('stateChanged', state);
});

Notice at the bottom I try to trigger the event stateChanged, in on document ready I run this function...

function data_depends(){
    var key_name = urlName();
    $(document).find('[data-depends]').each(function(index){
        var depends = $(this).data("depends").split(", ");
        if(depends != null)
            if(depends[1] == "state"){
                if($(depends[0]).data("state") == "0")
                    $(this).show(500);
                else
                    $(this).hide(500);
                var a = this;
                $(depends[0]).bind("stateChanged", 
                            function(x){if(x) $(a).show(500); 
                                        else $(a).hide(500);});
            }
    });
}

notice in that function I have...

$(depends[0]).bind("stateChanged", function(x){if(x) $(a).show(500);
else $(a).hide(500);});

But the function just is never called.

Here's the html

<div class="control-group">
    <label class="control-label" for="sale">Outcome</label>
    <div class="controls">
        <div id="sale" class="btn-group switch" data-toggle="buttons-radio" data-state="0" data-persist>
            <button type="button" class="btn b1">Sale</button>
            <button type="button" class="btn b0 btn-danger">No Sale</button>
        </div>
    </div>
</div>
<div class="control-group" data-depends="#sale, state">
    <label class="control-label" for="reason">No sale reason</label>
    <div class="controls">
        <input id="reason" type="text" placeholder="No sale reason" data-persist ><br>
    </div>
</div>

2 Answers 2

1

The signature of your function should take an event as first argument :

$(depends[0]).bind("stateChanged", 
    function(evt, x) { // <-- here add "evt" as first argument
        if(x) $(a).show(500);
        else $(a).hide(500);
});
1
  • Thanks. Use that in my answer :)
    – FabianCook
    Jan 3, 2013 at 22:54
0

So this here goes back to this question here: https://superuser.com/questions/527761/javascript-being-cached-in-chrome

Sometime it does it, sometimes it doesn't.

So for anyone that wants to use a input field that depends on a switch.....

PS. Requires jquery and bootstrap.


javascript

$(".switch").click(function(){
    var state = ( $(this).children('.b1').is('.btn-success') ? 0 : 1 );
    $(this).attr('data-state', state  );
    $(this).children('.b1').toggleClass('btn-success');
    $(this).children('.b0').toggleClass('btn-danger');
    $(this).trigger('stateChanged', state);
    //$("#" + this.id).trigger('stateChanged', state);
});

function data_depends(){
    var key_name = urlName();
    $(document).find('[data-depends]').each(function(index){
        var depends = $(this).data("depends").split(", ");
        if(depends != null)
            if(depends[1] == "!state"){
                var a = this;
                $(depends[0]).bind("stateChanged", function(evt, x){if(!x) {$(a).show(500);}else{ $(a).hide(500);}});
            }else if(depends[1] == "!state"){
                var a = this;
                $(depends[0]).bind("stateChanged", function(evt, x){if(x) {$(a).show(500);}else{ $(a).hide(500);}});
            }

    });
}

$(document).ready(function(e) {
    data_depends();
    $(".switch").trigger('stateChanged', 0);
});

html

<div class="control-group">
    <label class="control-label" for="sale">Outcome</label>
    <div class="controls">
        <div id="sale" class="btn-group switch" data-toggle="buttons-radio" data-state="0" data-persist>
            <button type="button" class="btn b1">Sale</button>
            <button type="button" class="btn b0 btn-danger">No Sale</button>
        </div>
    </div>
</div>
<div class="control-group" data-depends="#sale, state">
    <label class="control-label" for="reason">No sale reason</label>
    <div class="controls">
        <input id="reason" type="text" placeholder="No sale reason" data-persist ><br>
    </div>
</div>
2
  • 1
    That doesn't make any sense... $(this).trigger('stateChanged') shoudl work just fine given valid html(no duplicate id's!!!)
    – Kevin B
    Jan 3, 2013 at 22:24
  • I know. But as soon as I changed it, it worked. Maybe chrome is just boned.
    – FabianCook
    Jan 3, 2013 at 22:31

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.