[Answered ]-Combine Django and Bootstrap 5 Modal with Ajax

by

1👍

✅

You can pass arguments to your modal by using data-<something> as well as bootstrap does with data-bs-<something>.

<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#deletePost" data-object-id="{{ obj.id }}" onclick="DeletePost()">

Then with js, inside DeletePost you’ll need to extract the pk or any other argument you pass to it. Read more about dataset here.

Another option is to wrap your function with an anonymous function to pass arguments to an inner one and lastly, calling the outer (anonymous) function.

In this case, I use the arrow function syntax but is equivalent to the regular syntax for function definitions:

<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#deletePost"  onclick="(() => { DeletePost({{ obj.id }}) })()">

I would recommend the first option as (I think) it is more flexible for future uses when you require to pass more than one argument to a function but any of them should work.

Edit:
I forgot to mention this before. If you use the first option, make sure to pass the event when calling your function in the html element in order to obtain the click target element and the dataset attached to it.

Your element should look like this:
<a ... onclick="DeletePost(event)">.

Your js function will receive the event as an argument:

const DeletePost = (event) => {
  const btn = event.target; // the clicked button.
  const object_id = btn.dataset.objectId;
  console.log(object_id); // should display the right id.
}

Edit 2:

In order to be able to call your Django URL within the modal:

  1. Remove the href attribute in the <a> elements inside the for loop or replace the tag <a> for a <button> keeping the attributes that bootstrap needs to show your modal.
    This will prevent a premature call to your Django view without showing a modal first.
    Keep also the data-object-id attribute.

  2. In the modal code, replace your <button> elements in the footer with something like this:

<a id="delete-post-btn" class="rvg-button-small" href="{% 'DeletePost' %}">Delete</a>

Keep in mind that at this stage the href is not complete as is missing the object-id.

  1. Create an event listener for the modal, listening to the event ‘shown.bs.modal’ to know when the modal is open and extract the object id to complete the href attribute:
document
  .getElementById('deletePost')
  .addEventListener('shown.bs.modal', (event) => { 

    // The modal is open and the object-id can be extracted.
    event.preventDefault(); // this step may not be needed.
    const btn = event.relatedTarget; // this is the button that contains the data-<something> attrs
    const objectId = btn.dataset.objectId; 

    // Now we add the object-id value to the href.
    const modal_btn = document.getElementById('delete-post-btn');
    modal_btn.href += String(objectId);
  })

Now the href should be complete and the button should be able to call the Django view URL with the correct object-id.

👤pazitos10

Leave a comment