Chris Hammond Chris Hammond - 3 months ago 7
jQuery Question

Bootstrap jQuery "Active" selector event

On my web page I have three check boxes for filtering and they've all by "stylised" with bootstrap to use "ticks" rather than the standard check box.

Full markup

<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.RAGStatus2 {
}

.RAGStatus2 .active .checked {
display: inline-block;
}

.RAGStatus2 .checked {
display: none;
}
</style>


</head>
<body>
<span class="RAGStatus2 pull-right">
<span class="btn-group" data-toggle="buttons">
<label class="ragButtons btn btn-info active" style="width:50px; height: 30px; display: inline" id="blue">
<input disabled="disabled" type="checkbox" id="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Blue)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Blue)" class="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Blue)" />
<span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
</label>
<label class="ragButtons btn btn-warning active" style="width:50px; height: 30px; display: inline" id="amber">
<input disabled="disabled" type="checkbox" id="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Amber)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Amber)" class="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Amber)" />
<span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
</label>
<label class="ragButtons btn btn-danger active" style="width:50px; height: 30px; display: inline" id="red">
<input disabled="disabled" type="checkbox" id="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Red)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Red)" class="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Red)" />
<span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
</label>
</span>
</span>

<textarea id="debug" style="width: 100%; height: 300px"></textarea>

<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<script type="text/javascript">
$(function () {
$(".ragButtons").click(function (e) {
$("#debug").val("");
$(".ragButtons").each(function () {
if ($(this).hasClass("active")) {
$("#debug").val($("#debug").val() + $(this).attr("id") + "\r\n");
}
});
}
);
});
</script>
</body>
</html>


Here's the jsfiddle => https://jsfiddle.net/0qrqcbvd/

Now, my problem is that when I click one of the boxes, I want to make an ajax call with the ACTIVE filters only but the click() event doesn't deactivate the button in time... it's always one step behind..

When form is opened, all three are set to active...


  • Click one of buttons to turn off, debug still shows all three

  • Click it again to turn back on, debug now shows two (the one we're clicking is not showing)

  • Click it a third time (off again), then again, shows all three again (should be 2).



I've tried with the "onmouseup" but get the same outcome

Answer

It is because the BUTTON DATA-API use a delegated event handler to toggle the state of the checkboxes.

The solution is to use the change event triggered by the button plugin like

$(function() {
  $(".ragButtons").change(function(e) {
    $("#debug").val("");
    $(".ragButtons").each(function() {
      if ($(this).hasClass("active")) {
        $("#debug").val($("#debug").val() + $(this).attr("id") + "\r\n");
      }
    });
  });
});
.RAGStatus2 {} .RAGStatus2 .active .checked {
  display: inline-block;
}
.RAGStatus2 .checked {
  display: none;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<span class="RAGStatus2 pull-right">
        <span class="btn-group" data-toggle="buttons">
            <label class="ragButtons btn btn-info active" style="width:50px; height: 30px; display: inline" id="blue">
                <input disabled="disabled" type="checkbox" checked id="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Blue)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Blue)" class="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Blue)" />
                <span class="glyphicon glyphicon-hidden unchecked"></span>  <span class="glyphicon glyphicon-ok checked"></span>
</label>
<label class="ragButtons btn btn-warning active" style="width:50px; height: 30px; display: inline" id="amber">
  <input disabled="disabled" type="checkbox" checked id="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Amber)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Amber)" class="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Amber)" />
  <span class="glyphicon glyphicon-hidden unchecked"></span>  <span class="glyphicon glyphicon-ok checked"></span>
</label>
<label class="ragButtons btn btn-danger active" style="width:50px; height: 30px; display: inline" id="red">
  <input disabled="disabled" type="checkbox" checked id="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Red)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Red)" class="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Red)" />
  <span class="glyphicon glyphicon-hidden unchecked"></span>  <span class="glyphicon glyphicon-ok checked"></span>
</label>
</span>
</span>

<textarea id="debug" style="width: 100%; height: 300px"></textarea>

Comments