Bootstrap buttons not getting highlighted when clicked

Question

I have an app with 3 buttons, the 3 buttons make an AJAX call to retrieve some data and redraw a table with the data. However when clicked the button should be kept highlighted so the user knows which data they are viewing.

This is the JS code that calls the Web API method:

   iniciativasEstrategicas.GetVistaActividades = function (filtro) {
        var idObjetivoValue = sessionStorage.idObjetivoValue;
        $('#tab_vista1').html('<br><br><br><img class="loadImage" src="Images/loader.gif" />');
        $.ajax({
            url: 'IniciativasEstrategicasWebPart/GetVistaActividades',
            type: 'POST',
            data: {
                idObjetivo: idObjetivoValue,
                filtro: filtro
            },
            success: function (data) {
                drawVistaActividades(data);
            },
            error: function (data) {
                showErrorMessage(data);
            }
        });
    }   

This is the method that draws the data:

 function drawVistaActividades(data) {
        resetBreadCrumb();
        var html = "";
        for (var i = 0; i < data.length; i++) {
            html += template.rowVistaActividades
                .replace("{0}", data[i].nombreActividad)
                .replace("{1}", data[i].iniciativaName)
                .replace("{2}", data[i].fechaVencimiento)
                .replace("{3}", data[i].fechaRealTerminacion)
                .replace("{4}", data[i].responsables);
        }
        $("#tab_vistaActividades").html("<br>" + "<br>" + template.tableVistaActividades.replace("{0}", html));
    }

This is the table template that I use to draw the data, and the buttons are there

tableVistaActividades: "<div>" +
                                    "<div>" + 
                                        "<div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">" +
                                          "<button type=\"button\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaActividades('A tiempo')\">A tiempo</button>" +
                                          "<button type=\"button\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaActividades('Atrasadas')\">Atrasadas</button>" +
                                          "<button type=\"button\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaActividades('Pendientes')\">Pendientes</button>" +
                                        "</div>" +
                                    "</div>" + 
                                    "<table class='table'>" +
                                        "<thead>" +
                                            "<tr>" +
                                                "<th>" +
                                                    "Actividad" +
                                                "</th>" +
                                                "<th>" +
                                                    "Iniciativa" +
                                                "</th>" +
                                                "<th>" +
                                                    "Fecha propuesta" +
                                                "</th>" +
                                                "<th>" +
                                                    "Fecha real terminación" +
                                                "</th>" +
                                                "<th>" +
                                                    "Responsables" +
                                                "</th>" +
                                            "</tr>" +
                                        "</thead>" +
                                        "<tbody>" +
                                            "{0}" +
                                        "</tbody>" +
                                    "</table>" +"<div>",

and the row template

rowVistaActividades: "<tr>" +
                        "<td>" +
                            "{0}" +
                        "</td>" +
                        "<td>" +
                            "{1}" +
                        "</td>" +
                        "<td>" +
                            "{2}" +
                        "</td>" +
                        "<td>" +
                            "{3}" +
                        "</td>" +
                        "<td>" +
                            "{4}" +
                        "</td>" +
                    "</tr>",

As you can see in this page.

We are using the same Bootstrap button code and in that page the button remains highlighted when clicked.

Answer 1

This should solve your problem, basically you need to add "active" to selected option and remove "active" from siblings which was previously selected.

$(".btn-group > .btn").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
    $(this).addClass("active");
});

Answer 2

As @taTrifynor said in the comment, you should simply use Button groups with input type="radio", read about it. For example:

JSFiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked="checked"/>Button 1 (preselected)
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off"/>Button 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off"/>Button 3
    </label>
</div>

Or I don't understand what do you want.