CODEWITHSUNDEEP
jquerytwitter-bootstrap
Chris Hammond
Chris Hammond

Reputation: 2186

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.0.0/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    <script type="text/javascript">
        $(function () {
            $(".ragButtons").change(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...

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

* UPDATE *

When I posted this snippet, I used the latest version of Bootstrap/jQuery which does actually solve the problem, however, the actual system that this code was extracted from uses Bootstrap 3.0.0 and jQuery 1.10.2

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

Upvotes: 0

Views: 72

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388436

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.active").map(function() {
      return this.id;
    }).get().join('\r\n'));
  });
});
.RAGStatus2 {} .RAGStatus2 .active .checked {
  display: inline-block;
}
.RAGStatus2 .checked {
  display: none;
}
<script src="https://code.jquery.com/jquery-1.10.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>

Upvotes: 1

Related Questions