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

正如@taTrifynor在评论中所说，你应该只使用input type="radio"和<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>，阅读Button groups。例如：

about it

＆＃13;

{{1}}

＆＃13;

或者我不明白你想要什么。

Answer 2

这应该可以解决您的问题，基本上您需要在所选选项中添加“活动”并从之前选择的兄弟姐妹中删除“活动”。

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

Bootstrap buttons not getting highlighted when clicked

2 个答案: