Fix: Bootstrap modal stopped working - added data-bs attributes

vkleer · Sep 22, 2022 · ae6d3a6 · ae6d3a6
1 parent 992cfab
commit ae6d3a6
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/mealplanner/templates/meal_planner.html b/mealplanner/templates/meal_planner.html
@@ -80,7 +80,7 @@ <h4 class="text-center mt-2">Meal plan</h4>
                                 {% endfor %}
                                 {% csrf_token %}
                                 <input type="hidden" name="meal_plan_date" value="{{ day|date:'Y-m-d' }}">
-                                <a href="" class="btn btn-primary"></a>
+                                <a href="" class="btn btn-dark"></a>
                             </td>
                         {% endfor %}
                     </tr>   
@@ -100,7 +100,7 @@ <h4 class="text-center mt-2">Meal plan</h4>
                     </div>
                     <div class="modal-footer justify-content-center">
                         <button type="submit" class="btn btn-danger">Yes, delete meal plan</button>
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                     </div>
                 </div>
             </form>

diff --git a/static/js/meal-planner.js b/static/js/meal-planner.js
@@ -21,8 +21,8 @@ function getCalendarCells() {
             let deleteButton = document.createElement('button');
             deleteButton.classList.add('btn', 'btn-danger', 'btn-del');
             deleteButton.innerHTML = `<i class="far fa-trash-alt"></i>`;
-            deleteButton.setAttribute('data-toggle', 'modal');
-            deleteButton.setAttribute('data-target', '#deletionModal');
+            deleteButton.setAttribute('data-bs-toggle', 'modal');
+            deleteButton.setAttribute('data-bs-target', '#deletionModal');
             mealPlanButton.parentNode.insertBefore(deleteButton, mealPlanButton.nextSibling);
             cells[i].style.cssText = 'vertical-align:top';
             mealPlanButton.innerHTML = `<i class="fas fa-pen"></i>`;
@@ -33,8 +33,7 @@ function getCalendarCells() {
         }
         else {
             mealPlanDate = cells[i].querySelector('input[name=meal_plan_date]');
-            mealPlanButton.classList.remove('btn-primary');
-            mealPlanButton.classList.add('btn-success', 'btn-add');
+            mealPlanButton.classList.add('btn-add');
             mealPlanButton.href = `create_meal_plan/${mealPlanDate.value}`;
             cells[i].style.cssText = 'vertical-align:center';
             mealPlanButton.innerHTML = `<i class="fas fa-plus"></i>`;