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
Source:stackexchange.com