Setting and unsetting active class in bootstrap pagination

Question

I have this bit of Javascript that handles clicks on my navbar. It is working for the most part the disable style is being applied where it should be the previous next, first, and last buttons all take you to the correct page. For some reason the same technique applied to the active style is not working. Ideally I never want any buttons to show as active except the current page button. Whichever button I click shows as active though and the current page doesn't get the active style unless you click on it. Any help on the correct syntax to set and unset active on my Navbar buttons would be appreciated.

var current_page;
var total_pages;

function fnPage_click(multiplyer) {
    //make all buttons inactive and enabled
    for (var i = 0; i < total_pages; i++)
        $('#li' + i).removeClass("active");

    $('#li.prev').removeClass("active");
    $('#li.prev').removeClass("disabled");
    $('#li.next').removeClass("active");
    $('#li.next').removeClass("disabled");
    $('#li.first').removeClass("active");
    $('#li.last').removeClass("active");

    $.ajax({
        url: '/Home/Browsing?' + multiplyer,
        type: 'POST',
        error: function (xhr) {
            alert('Error: ' + xhr.statusText);
        },
        success: function (result) {
            $("#divLocGrid").html(result);
            current_page = multiplyer;
            switch (current_page) {
                case 1: {
                    //Previous is disabled/inactive, First is inactive, the current_page is active
                    $("#li.prev").removeClass("active").addClass("disabled");
                    $("li.first").removeClass("active");
                    $('#li' + current_page).addClass("active");
                    break;
                }
                case total_pages: {
                    //Next is disabled/inactive, Last is inactive, the current_page is active
                    $('#li.next').removeClass("active").addClass("disabled");
                    $("li.last").removeClass("active");
                    $('#li' + current_page).addClass("active");
                    break;
                }
                default: {
                    //Previous and Next are enabled but inactive the current_page is active
                    $('#li.prev').removeClass("active");
                    $('#li.next').removeClass("active");
                    $('li' + current_page).addClass("active");
                    break;
                }
            }
        },
        async: true,
        processData: false
    });
}

function fnPrevNxt(strDir) {
    var multiplyer;

    if (strDir == 'Nxt') {
        multiplyer = current_page + 1;
        if (multiplyer > total_pages) {
            $('#li.next').removeClass("active").addClass("disabled");
            return;
        }

    }
    else {
        multiplyer = current_page - 1;
        if (multiplyer < 1) {
            $('#li.prev').removeClass("active").addClass("disabled");
            return;
        }
    }

    fnPage_click(multiplyer);
}

function fnOnNavBtnsLoad(model) {
    total_pages = model;
    fnPage_click(1);
}

<body onload="fnOnNavBtnsLoad(@Model)">
<div id="dvNavBtns">
    <nav class="navbar navbar-expand-lg bg-gray-light navbar-dark" aria-label="Locations pages">
        <ul id="ulNavBtns" class="pagination">
            <li id="li.first" class="page-item">
                <a href="javascript:void(0)" id="btnFirst" class="page-link" onclick="fnPage_click(1)">First</a>
            </li>
            <li id="li.prev" class="page-item">
                <a href="javascript:void(0)" id="btnPrev" aria-label="<<" class="page-link" onclick="fnPrevNxt('Prev')">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            @{int pages = Model;
                int num = 0;
                while (num < pages)
                {
                    num++;
                    <li id="li" +@(num) class="page-item">
                        <a href="javascript:void(0)" aria-label=@num class="page-link" onclick="fnPage_click(@(num))">
                            @(num)
                        </a>
                    </li>
                }
            }
            <li id="li.next" class="page-item">
                <a href="javascript:void(0)" id="btnNxt" aria-label=">>" class="page-link" onclick="fnPrevNxt('Nxt')">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li id="li.last" class="page-item">
                <a href="javascript:void(0)" id="btnLast" class="page-link" onclick="fnPage_click(@Model)">Last</a>
            </li>
        </ul>
    </nav>
</div>

Answer 1

Its kind of convoluted but this is the syntax that finally worked for me. I had to go through the document.context.all collection of elements to find the element then add or remove from the classList collection of the element.

$(document).context.all['li.id'].classList.add("classname");
$(document).context.all['li.id'].classList.remove("classname");

Setting and unsetting active class in bootstrap pagination

Question

1 answers

solution1
0 ACCPTED 2018-07-12 16:04:28

Setting and unsetting active class in bootstrap pagination

Question

1 answers

solution1 0 ACCPTED 2018-07-12 16:04:28

solution1
0 ACCPTED 2018-07-12 16:04:28