JavaScript in Flask - Flask Wiki

Including JavaScript in Flask Templates

There are several ways to include JavaScript in your Flask application:

1. External JavaScript Files

Place your JavaScript files in the static/js folder and reference them in your templates:

<!-- In your base.html or other template -->
<script src="/static/js/script.js"></script>

2. Inline JavaScript

For small scripts, you can write JavaScript directly in your HTML:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Your JavaScript code here
        document.getElementById('greeting').textContent = 'Hello, JavaScript!';
    });
</script>

3. JavaScript Blocks in Templates

Use Jinja2 blocks to organize your scripts:


{% block scripts %}
    
    
{% endblock %}


{% block scripts %}
    {{ super() }}  
    
{% endblock %}

Passing Data from Flask to JavaScript

Often, you'll need to pass data from your Flask backend to your JavaScript code. Here are common approaches:

1. Template Variables

Use Jinja2 template variables to inject Python data into JavaScript:

<script>
    // In your Flask route: render_template('page.html', user_name='Alice', items=[1, 2, 3])
    const userName = "";
    const items = [1, 2, 3];
    
    console.log(`Hello, ${userName}!`);
    console.log('Items:', items);
</script>

Note the use of the tojson filter, which safely converts Python objects to JSON for use in JavaScript. This is crucial for security and correctness.

2. Data Attributes

Store data in HTML data attributes and access them with JavaScript:

<!-- In your template -->
<div id="user-info" data-user-id="1" data-user-name="Example User">
    Welcome, Example User!
</div>

<script>
    // In your JavaScript
    const userInfo = document.getElementById('user-info');
    const userId = userInfo.dataset.userId;
    const userName = userInfo.dataset.userName;
    
    console.log(`User ID: ${userId}, Name: ${userName}`);
</script>

3. Hidden Input Fields

Another approach is to use hidden input fields:

<input type="hidden" id="config" value="">

<script>
    // In your Flask route: config_json = json.dumps({'apiUrl': '/api/v1', 'theme': 'dark'})
    const config = JSON.parse(document.getElementById('config').value);
    console.log('API URL:', config.apiUrl);
</script>

AJAX and Fetch API

One of the most powerful ways to use JavaScript with Flask is to create interactive applications that communicate with the server without page reloads. This is typically done using AJAX (Asynchronous JavaScript and XML) or the modern Fetch API.

Flask API Endpoint

@app.route('/api/data')
def get_data():
    data = {
        'name': 'Flask API',
        'version': '1.0',
        'features': ['Routing', 'Templating', 'RESTful']
    }
    return jsonify(data)

@app.route('/api/items/<int:item_id>')
def get_item(item_id):
    # Typically you would fetch this from a database
    items = {
        1: {'id': 1, 'name': 'Item One', 'price': 19.99},
        2: {'id': 2, 'name': 'Item Two', 'price': 29.99},
        3: {'id': 3, 'name': 'Item Three', 'price': 39.99}
    }
    
    if item_id in items:
        return jsonify(items[item_id])
    else:
        return jsonify({'error': 'Item not found'}), 404

JavaScript Fetch Example

// Load data when the page loads
document.addEventListener('DOMContentLoaded', function() {
    const dataContainer = document.getElementById('data-container');
    
    // Fetch data from our API endpoint
    fetch('/api/data')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            // Build HTML from the data
            let html = `
                ${data.name} v${data.version}
                
                    ${data.features.map(feature => `${feature}`).join('')}
                
            `;
            dataContainer.innerHTML = html;
        })
        .catch(error => {
            console.error('Error fetching data:', error);
            dataContainer.innerHTML = 'Error loading data.';
        });
    
    // Set up buttons to load individual items
    const buttons = document.querySelectorAll('.load-item-btn');
    const itemDetailContainer = document.getElementById('item-detail');
    
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            const itemId = this.getAttribute('data-item-id');
            
            fetch(`/api/items/${itemId}`)
                .then(response => response.json())
                .then(item => {
                    itemDetailContainer.innerHTML = `
                        ${item.name}
                        Price: $${item.price}
                    `;
                })
                .catch(error => {
                    console.error('Error:', error);
                    itemDetailContainer.innerHTML = 'Error loading item';
                });
        });
    });
});

Creating the Corresponding HTML

The HTML that works with this JavaScript:

<div class="container">
    <h1>AJAX Demo</h1>
    
    <div id="data-container">
        <p>Loading data...</p>
    </div>
    
    <div class="buttons">
        <button class="load-item-btn" data-item-id="1">Load Item 1</button>
        <button class="load-item-btn" data-item-id="2">Load Item 2</button>
        <button class="load-item-btn" data-item-id="3">Load Item 3</button>
    </div>
    
    <div id="item-detail">
        <p>Select an item to view details</p>
    </div>
</div>

Form Handling with JavaScript

AJAX Form Submission

Here's an example of submitting a form asynchronously:

<form id="contact-form">
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
    </div>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div class="form-group">
        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea>
    </div>
    <button type="submit">Send Message</button>
    <div id="form-status"></div>
</form>

<script>
    document.getElementById('contact-form').addEventListener('submit', function(e) {
        e.preventDefault(); // Prevent default form submission
        
        const formData = new FormData(this);
        const statusDiv = document.getElementById('form-status');
        
        statusDiv.textContent = 'Sending...';
        
        fetch('/api/contact', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                statusDiv.textContent = 'Message sent successfully!';
                this.reset(); // Clear the form
            } else {
                statusDiv.textContent = `Error: ${data.error}`;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            statusDiv.textContent = 'An error occurred. Please try again.';
        });
    });
</script>

The Corresponding Flask Route

@app.route('/api/contact', methods=['POST'])
def contact():
    try:
        name = request.form.get('name')
        email = request.form.get('email')
        message = request.form.get('message')
        
        # Validate inputs
        if not all([name, email, message]):
            return jsonify({'success': False, 'error': 'All fields are required'})
        
        # Here you would typically send an email or save to database
        # For example:
        # send_email(name, email, message)
        # or:
        # db.contacts.insert_one({'name': name, 'email': email, 'message': message})
        
        # For demonstration, we'll just log the message
        app.logger.info(f"Contact form submission: {name} ({email}): {message}")
        
        return jsonify({'success': True})
    except Exception as e:
        app.logger.error(f"Error in contact form: {str(e)}")
        return jsonify({'success': False, 'error': 'Server error, please try again'})

Using JavaScript Libraries with Flask

Modern web development often involves using JavaScript libraries and frameworks. Here's how to integrate them with Flask:

1. Using CDN Links

The simplest approach is to include libraries via CDN links:

<!-- In your base.html -->
<head>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- Bootstrap CSS and JS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Your custom scripts -->
    <script src="/static/js/script.js"></script>
</head>

2. Installing Libraries Locally

For more control or offline usage, download libraries to your static folder:

<!-- In your template -->
<script src="/static/js/lib/jquery-3.6.0.min.js"></script>
<script src="/static/js/lib/chart.min.js"></script>

3. Using npm and Build Tools

For larger projects, consider using npm with build tools like Webpack:

Set up a package.json file and install dependencies
Configure Webpack to bundle your JavaScript files
Set up a build process that outputs to Flask's static directory

This approach is more complex but offers benefits like code splitting, tree shaking, and module bundling.

Security Considerations

Risk	Prevention
Cross-Site Scripting (XSS)	Use the `\|tojson` filter when passing data to JavaScript. Always escape user input.
Cross-Site Request Forgery (CSRF)	Include CSRF tokens in your forms and AJAX requests using Flask-WTF.
Exposing Sensitive Data	Never pass sensitive data (API keys, credentials) to the client-side JavaScript.
Insecure Direct Object References	Always validate permissions on the server-side, not just in JavaScript.

Security Warning

Never trust data coming from the client. Always validate and sanitize user input on the server side.

← Back to Static Files in Flask