0

For the love of it, I read through many posts (1, 2 ...) and I could still not solve this simple problem:

I have a button, that opens a modal using htmx:

<button class="btn btn-primary" 
        id="createButton"
        hx-get="/create" 
        hx-target="#modals-here">create
</button>

My modal looks like this and opens and functions perfectly:

<div id="modal-backdrop" class="modal-backdrop fade show" style="display:block;"></div>
<div id="modalCreate" class="modal fade show" tabindex="-1" style="display:block;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                {% csrf_token %}
                {% crispy form %}
            </div>
        </div>
    </div>
</div>

and somewhere on my page I have a <div id="modals-here"></div>. And in this modal there are input fields I'd like to validate. For this purpose it would be extremely useful to know when the modal is opened. I tried:

$('#modalCreate').on('shown', function (event) {
//('#modalCreate').on('show.bs.modal', function (event) {
    console.log("hello");
});

This is my base.html (for the includes):

{% block javascript %}

    <!-- jQuery -->            
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="..." crossorigin="anonymous"></script>
       
    <!-- Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="..." crossorigin="anonymous"></script> 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="..." crossorigin="anonymous"></script>
        
    <!-- htmx -->
    <script src="{% static 'js/htmx.min.js' %}"></script>

    <!-- crispy validator -->
    <script src="{% static 'js/crispy_validator.js' %}"></script>

{% endblock javascript %}

I need a reliable way to determine if / which of my modal is active. The hello never appears in the console.

xtlc
  • 1,070
  • 1
  • 15
  • 41
  • 1
    So the event listener for the modal appearing is not working? I am unclear what your actual problem is. – epascarello Mar 17 '21 at 17:01
  • Edited. I never see the `console.log("hello")` (But if I make one before or after that just works fine, so does all the other JS on the page). – xtlc Mar 17 '21 at 17:12
  • 1
    Does `$('#modalCreate').` actually find an element? `console.log($('#modalCreate').length)` – epascarello Mar 17 '21 at 17:13
  • Result modal not open: 0 - result modal opened: 1 (in the browser console) – xtlc Mar 17 '21 at 17:15
  • 1
    So you are binding the event listener before the element exists on the page. – epascarello Mar 17 '21 at 17:19
  • sounds reasonable. Probably too much JS today. So ... is there a better way of doing this, than to create an interval where this is checked? Please post as answer, I will check and upvote. – xtlc Mar 17 '21 at 17:21
  • Probably can just use event delegation if you can not bind it when you add the modla to the page. – epascarello Mar 17 '21 at 20:40
  • . `$(document).on('shown', function (event) { .... })` – epascarello Mar 17 '21 at 21:10

0 Answers0