I am trying to create a collapsible form using Bootstrap 5’s collapse feature. Initially, the collapse functionality worked correctly, but after dynamically loading HTML content into the collapse using AJAX, the collapse button no longer closes the form.
Here’s my setup:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<h1 class="text-center">Add Product</h1>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#create-product-collapse" aria-expanded="false" aria-controls="create-product-collapse">
Button with data-bs-target
</button>
<div class="container d-flex justify-content-center align-items-center">
<div class="collapse" id="create-product-collapse">
<h2 class="text-center">Add Product</h2>
<form action="/create_product" method="POST">
<button type="submit" class="btn btn-primary">Kaydet</button>
</form>
<div id="product_image_content"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: '/list_image',
type: 'GET',
success: function(response) {
$('#product_image_content').html(response);
},
error: function(xhr) {
console.error('Error fetching images:', xhr);
}
});
});
</script>
</body>
</html>
Flask Route:
@app.route('/list_image', methods=['GET'])
@login_required
def list_image():
images = Image.objects(userId=session['username'])
rendered_html = render_template('image_items.html', images=images)
return rendered_html
Jinja2 Template (image_items.html):
{% for image in images %}
<div class="image-item">
<img src="{{ image.url }}" alt="{{ image.description }}" class="img-fluid">
</div>
{% endfor %}
Issue:
The collapse initially works as expected. However, after the AJAX request loads the image HTML into the #product_image_content div, the collapse button no longer functions correctly—it opens the collapse but won’t close it.
What I’ve Tried:
- Ensuring Bootstrap and jQuery are correctly included.
- Checking the console for JavaScript errors (none found).
- Manually toggling the collapse state using Bootstrap’s JavaScript API.
Desired Outcome:
I want the collapse to function properly, opening and closing when the button is clicked, even after loading content via AJAX.
Question:
How can I ensure the collapse button works correctly after dynamically loading content with AJAX? Is there a specific way to reinitialize or update Bootstrap’s collapse component after content is injected?
Fuat Büyük is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.