Can't dismiss message from SuccessMessageMixin in UpdateView

Question

Update: Problem was more wide ranging in that no JS was working - see my own answer below.

I have an UpdateView where I am using the SuccessMessageMixin to display an "updated" message. This works fine, but I can't seem to dismiss the message - clicking the 'x' does nothing.

views.py

class LocationChangeView(LoginRequiredMixin, SuccessMessageMixin, UpdateView):
    model = Location
    template_name = "adventures/location.html"
    form_class = LocationChangeForm
    success_message = _("Location successfully updated")

From the template

[...]
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <!-- Awesome fonts -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
        integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

[...]

<div class="container-fluid">
    {% if messages %}
    {% for message in messages %}
    <!-- <div class="alert {{ message.tags }} alert-dismissable" role="alert"> -->
    <div class="alert alert-info alert-dismissable" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times</span>
        </button>
        {{ message }}
    </div>
    {% endfor %}
    {% endif %}
</div>

[...]

As I understand it, the close method is defined in the bootstrap.js (closer examination seems to verify this - I find the close, data-dismiss etc.) though I confess, I'm not a JS expert (that's kind of next on the list ...)

My understanding was that this setup for displaying and dismissing messages should pretty much work "out of the box", so what am I missing?

Answer 1

I realised that this issue was larger than I thought (and simpler!), as my JS in general wasn't working (realised this when a navbar dropdown wasn't working).

In the end, it turned out that the .js scripts being loaded were in the wrong order. Once these were rearranged so that the order was:

1. jquery-3.3.1.slim.min.js
2. popper.min.js
3. bootstrap.min.js

Everything started working again. Thought I'd add this answer in case anybody stumbles across similar issues.