CODEWITHSUNDEEP
jquerydjangoajaxbootstrap-modal
curtisp
curtisp

Reputation: 2325

Django Bootstrap modal is giving an error

I am using jQuery script excecuted on an on("click") event to do following:

  1. ajax call to Django url / view that populates a 'modal template'.
  2. modal template's HTML is then appended to an empty modal div.
  3. ajax success event then does show() modal div.

Everything appears to work successfully eg I get the modal to show, with populated modal template content, but I am also getting the following error:

Uncaught TypeError: Illegal invocation selector-engine.js:22 
at Object.findOne (selector-engine.js:22)
at De._showElement (modal.js:221)
at modal.js:143
at b (index.js:242)
at backdrop.js:53
at b (index.js:242)
at v (index.js:248)
at ke._emulateAnimation (backdrop.js:125)
at ke.show (backdrop.js:52)
at De._showBackdrop (modal.js:328)

Any ideas what is happening here?

Using Bootstrap 5, jquery-3.6

Empty modal div:

<div id="modal-div"></div>

Script:

var modalDiv = $("#modal-div");
$(".open-modal").on("click", function() {
    $.ajax({
        url: $(this).attr("data-url"),
        success: function(data) {
            modalDiv.html(data);
            $("#photo-modal").modal('show');
        },
    });
});

Edit to add: The script and empty modal div are both in the Django "base.html" file.

Modal template HTML:

<div id="photo-modal" class="modal-container">

    <p>{{ photo.id }}</p>

</div>

Upvotes: 0

Views: 1390

Answers (1)

curtisp
curtisp

Reputation: 2325

Turns out I needed to modify <div id="modal-div"></div> so it was <div class="modal" id="modal-div"></div>

Upvotes: 0

Related Questions