Django Detail View on Boostrap Modal?

Question

Am in the process of building an Ecomerce app with django and although am comming along just fine, I can't seem to be able to render the details of a specific object on a bootstrap modal.

This is a screenshot of what am trying to get rendered on the modal

This is the modal being display but no image or data being passed to it

I went around searching and saw that modals can be rendered with Ajax but haven't found any solid article so far. I would appreciate if anyone could provide a source or a quick sample on how to pull this off.

NOTE: I am able to render the detail view as a standalone view as you can see in the image that will follow:Detail View

My views:

def product_list(request, category_slug=None):
    # category_slug parameter gives us the ability to optionally filter 
    # product by a given category
    category = None
    categories = Category.objects.all()

    # Available=True to filter only the available products
    products = Product.objects.filter(available=True)
    if category_slug:
        category = get_object_or_404(Category, slug=category_slug)
        products = products.filter(category=category)

    paginator = Paginator(products, 9)  # Show 9 products per page.
    page_number = request.GET.get('page')

    page_obj = paginator.get_page(page_number)

    # -> Adds the "add to cart" form to list view
    cart_product_form = CartAddProductForm()
    context = {
        'category': category,
        'categories': categories,
        'products': products,
        'cart_product_form': cart_product_form,
        "page_obj": page_obj,

    }
    return render(request, 'shop/product/list.html', context)



def product_detail(request, id, slug):
    # id and slug parameters in order to retrieve a product instance
    # Slug parameter added to make the SEO-friendly URLs for products
    product = get_object_or_404(Product,
                                id=id,
                                slug=slug,
                                available=True)

    # -> Adds the "add" to cart form to detail view
    cart_product_form = CartAddProductForm()
    return render(request,
                  'shop/product/detail.html',
                  {'product': product, 'cart_product_form': cart_product_form})

My App Urls:

urlpatterns =[
path('', views.index, name='index'),
path('product/', views.product_list, name='product_list'),
path('<slug:category_slug>/', views.product_list, name='product_list_by_category'),
path('<int:id>/<slug:slug>/', views.product_detail, name='product_detail'),

]

Answer 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

• Bootstrap Modals: https://getbootstrap.com/docs/4.6/components/modal/#varying-modal-content
• Working project example: https://gitlab.com/ErikKalkoken/aa-memberaudit/-/blob/master/memberaudit/templates/memberaudit/character_viewer.html#L346