The original post: /r/web_design by /u/020516e03 on 2025-01-19 11:02:13.

Hello Friends,

I am working on an app with flask, html, js, sqlite for data.

In the below page about event details, the whole autocomplete suggestions, the “place_changed” and choosing a place works fine outside the modal (on the event details display page), in below code.

However, once the autocomplete service is placed inside the editModal, the suggestions aren’t generated when the user types something for the location…

any insights/help appreciated…

{% extends "layout.html" %}

{% block content %}
    <div class="container" style="padding-top: 100px;">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow-lg">
                    <div class="card-header text-center bg-primary text-white">
                        <h1 class="h4">{{ event.title }}</h1>
                        <h2 class="h2">{{ event.event_type }}</h2>
                    </div>
                    <div class="card-body p-4">
                        {% if event.image_path %}
                            <img src="{{ url_for('static', filename=event.image_path.split('static/')[1]) }}" 
                                 alt="{{ event.title }}" 
                                 class="img-fluid mb-4" 
                                 style="max-height: 400px; object-fit: cover; width: 100%;">
                        {% endif %}
                        <p class="lead">{{ event.description }}</p>
                        <hr>
                        <p><strong>Date:</strong> {{ event.date.strftime('%d %B %Y') }}</p>
                        <p><strong>Location:</strong> {{ event.location }}</p>
                    </div>

                    
                    <div class="card-footer text-center">
                        <!-- Optional buttons or links could go here -->
                        <!-- Edit Button to Trigger Modal -->
                        {% if event in current_user.events_owned %}

                            <a href="{{ url_for('events.event_details', event_id=event.id, edit='true') }}" class="btn btn-warning">
                                Edit Event
                            </a>
                        {% endif %}
                        <a href="{{ url_for('events.home') }}" class="btn btn-secondary">Back to Events</a>
                        <a href="{{ url_for('events.register_for_event', event_id=event.id) }}" class="btn btn-secondary">Register</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for Editing Event -->
    <div class="modal fade" id="editEventModal" tabindex="-1" aria-labelledby="editEventModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editEventModalLabel">Edit Event</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ url_for('events.event_details', event_id=event.id) }}" method="POST" enctype="multipart/form-data">                   
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="title" class="form-label">Event Title</label>
                            <input type="text" class="form-control" id="title" name="title" value="{{ event.title }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="event_type" class="form-label">Event Type</label>

                            <select name="event_type" id="event_type", class="form-select">
                                <option value="VIRTUAL" {% if event.event_type == "VIRTUAL" %}selected{% endif %}>Virtual</option>
                                <option value="IN-PERSON"{% if event.event_type == "IN-PERSON" %}selected{% endif %}>In-person</option>
                            </select>                        
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">Event Description</label>
                            <textarea class="form-control" id="description" name="description" rows="4" required>{{ event.description }}</textarea>
                        </div>
                        <div class="mb-3">
                            <label for="date" class="form-label">Event Date</label>
                            <input type="datetime-local" class="form-control" id="date" name="date" value="{{ event.date.strftime('%Y-%m-%dT%H:%M') }}" required>
                        </div>

                        <div class="mb-3" >
                            <input id="latitude" style="width: 450px;" type="text" value="{{ event.location.latitude }}" required>
    
                            <input id="longitude" style="width: 450px;" type="text" value="{{ event.location.longitude }}" required>
    
                        </div>

                        <div class="mb-3">
                            <label for="autocomplete" class="form-label">Location</label><br>
                            <input id="autocomplete" style="width: 400px;" type="text" placeholder="Enter a Location">
    
                        </div>

                        <div id="map" class="mb-3" style="height: 400px; width: 100%;"></div>

                        <div class="mb-3">
                            <label for="image" class="form-label">Event Image</label>
                            <input type="file" class="form-control" id="image" name="image" accept="image/*">
                            {% if event.image_path %}
                                <small class="text-muted">Current Image: {{ event.image_path.split('static/')[1] }}</small>
                            {% endif %}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    

    {% if request.args.get('edit') == 'true' %}
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const editModal = new bootstrap.Modal(document.getElementById('editEventModal'));
                editModal.show();

            });

            
            let autocomplete;

            function initAutocomplete() {
                console.log("before assigning autocomplete")

                // Create the autocomplete object
                autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete"), {
                        types: ["establishment"],
                        componentRestrictions: {'country': ['US']},
                        fields: ["place_id", "name", "formatted_address", "geometry"],
                    }
                );

                autocomplete.addListener("place_changed", onPlaceChanged);

                console.log("after assigning autocomplete")

            }

            function onPlaceChanged() {
                console.log("place_changed event triggered")
            }

            
        </script>

        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY=places,marker&callback=initAutocomplete">
        </script>

    {% endif %}

{% endblock %}