“active” class in AJAX pagination not working

Question

i'm quite new in ajax and javascript, and how can I give a class='active' when the button is clicked.

here is my code :

$(document).ready(function(){
    load_data();
        function load_data(pages)
        {
            var id=<?php echo $id; ?>;
            $.ajax({
                url:"includes/komentar-ajax.php?id="+id,
                method:"POST",
                data:{page:pages},
                success:function(data){
                    $('#pagination_data').html(data);
                }
            })
        }

        $(document).on('click','.page-link', function(){
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
            } else {
                $(this).addClass('active');
            }
            var pages = $(this).attr("id");
            load_data(pages);
        });
});

Answer 1

In your ajax success function, after setting the $('#pagination_data') html you can then set your active state.

First remove the active class from all .page-link buttons and then set the class active to the one you want.

Your code would look like this:

   $.ajax({
            url:"includes/komentar-ajax.php?id="+id,
            method:"POST",
            data:{page:pages},
            success:function(data){
                $('#pagination_data').html(data);
                // remove active class from other buttons
                $('.page-link').removeClass("active");
                // add active class to your button 
                $("#"+id).closest(".page-item").addClass('active');
            }
        })

Keep in mind that passing the page as the id of your .page-link buttons may result to duplicate ids and things will stop working. I suggest you use data attributes to store this kind of information in your html elements.