I have a simple online directory and file hosting app that allows traversal through the directories.

I am loading the DataTables content using AJAX by clearing all rows in the DataTable and then adding new rows with the updated data. I'm also updating the URL with the current path by using the replaceState function.

Currently I am able to use the back button once and it will load the content of the DataTable from the previous AJAX request, but the page stays static on any following back button presses. The forward button never works.

Code is below:

<script>
    $('body').on('click', '.folder_link', function (){
        folder_path = this.value
        req = $.ajax({
            url:  '{{ url_for(request.endpoint) }}' + folder_path,
            type: 'POST',
            data: {
                "path": folder_path
            },
            success: function(data){
                datatable = $('#datable_documents').DataTable();
                datatable.clear().draw();

                for (var i = 0; i < data['data'].length; i++) {
                    datatable.row.add(data['data'][i]);
                }

                datatable.draw();

                window.history.pushState(
                    {
                        url: '{{ url_for(request.endpoint) }}' + folder_path,
                        data: data
                    },
                    '',
                    '{{ url_for(request.endpoint) }}' + folder_path
                );
                url_next = '{{ url_for(request.endpoint) }}' + folder_path;
                window.history.replaceState(
                    {
                        url: '{{ url_for(request.endpoint) }}',
                        data: data
                    },
                    {},
                    url_next
                );
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert('error');
            }
        });

        $(window).on('popstate', function(event){
            location.reload(true);
        });
    });
</script>