[Answered ]-Django Detail View on Boostrap Modal?

1👍

First, you need to pass the ajax URL for loading the respective object details on the button in your list that opens the modal. This would be in the template code:

<ul>
    {% for obj in object_list %}
        <li>
            {{ obj.name }}
            <button
                    type="button"
                    class="btn btn-primary"
                    data-toggle="modal"
                    data-target="#exampleModal"
                    data-ajaxurl="{% url 'product_detail' obj.id obj.slug %}">
                    Open modal
            </button>
        </li>
    {% endfor %}
</ul>

Then you need an event handler in your main template (that also contains the modal) to load and update the modal when the button is clicked:

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var ajaxUrl = button.data('ajaxurl') // Extract info from data-* attributes
  
  $('#exampleModal-content').load(ajaxUrl)
})

References

Leave a comment