This part of the Flask webapp is attempting to read data from a database table and present it in HTML format using a Javascript file that performs this operation and is called upon loading the HTML site all enclosed into a single Flask app.

The error I see in the Browser Console are two:

Uncaught SyntaxError: Unexpected token '<' (at VM214 tabTables.js:1:1) VM214 tabTables.js:1

Uncaught SyntaxError: Unexpected token '<' (at tabTables.js:1:1) tabTables.js:1

My HTML code where the JS script is called from is this one:

{% block content %}
<h2>{% block title %}Admin{% endblock %}</h2>
<div class="admin-container">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="user-tab" data-toggle="tab" href="#user" role="tab" aria-controls="user" aria-selected="true">User List</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="product-tab" data-toggle="tab" href="#product" role="tab" aria-controls="product" aria-selected="false">Product List</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="user" role="tabpanel" aria-labelledby="user-tab">
            <table id="user-table" class="table">
                <!-- User list table content will be loaded here dynamically -->
            </table>
        </div>
        <div class="tab-pane fade" id="product" role="tabpanel" aria-labelledby="product-tab">
            <table id="product-table" class="table">
                <!-- Product list table content will be loaded here dynamically -->
            </table>
        </div>
    </div>
</div>
{% block javascript %}
<!-- Include JavaScript file specific to the admin page -->
<script src="{{ url_for('static', filename='tabTables.js') }}"></script>
{% endblock %}
{% endblock %}

My Javascript Code called from the HTML is this one:

<script>
    // Function to load user or product list based on active tab
    function loadList(tabId, tableName) {
        $.ajax({
            url: '/load_list',
            method: 'POST',
            data: { table: tableName },
            success: function(response) {
                console.log('Response received:', response); // Log the response
                if (response.trim() === '') {
                    // Display a message indicating that the table is empty
                    $(tabId).html('<p>No data available.</p>');
                } else {
                    $(tabId).html(response);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error); // Log the error
                // Display an error message
                $(tabId).html('<p>Error loading data.</p>');
            }
        });
    }

    // Event listener for tab switching
    $('#myTab a').on('shown.bs.tab', function (e) {
        var tabId = $(e.target).attr('href');
        var tableName = $(e.target).attr('data-table');
        loadList(tabId + '-table', tableName);
    });

    // Load user list initially
    loadList('#user-table', 'users');
</script>

the flask app section with the route to that HTML page is this one:

# Route for the admin page
@app.route('/admin')
def admin():
    return render_template('admin.html')

I’ve read through lots of posts but couldn’t find much related to this issue; main piece of feedback I’ve read is:

The error Uncaught SyntaxError: Unexpected token ‘<‘ typically indicates that the browser is trying to parse HTML as JavaScript. This usually occurs when the JavaScript file being loaded contains HTML content instead of valid JavaScript code.

Still I was not able to find a way for the browser to show that there is no data in the table, which is empty but should resolve the below message per JS if statement:

if (response.trim() === '') {
                    // Display a message indicating that the table is empty
                    $(tabId).html('<p>No data available.</p>')

I’d appreciate any guidance on what I can do to keep debugging this.