nk20/apps/food/templates/food/use_recipe_form.html

{% extends "base.html" %}
{% comment %}
Copyright (C) 2018-2025 by BDE ENS Paris-Saclay
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n crispy_forms_tags %}

{% block content %}
<div class="card bg-white mb-3">
  <h3 class="card-header text-center">
    {{ title }} {{ object.name }}
  </h3>
  <div class="card-body" id="form">
    <form method="post">
      {% csrf_token %}
      {{ form | crispy }}
      <button class="btn btn-primary" type="submit">{% trans "Submit"%}</button>
    </form>
  </div>
</div>
{% endblock %}

{% block extrajavascript %}
<script>
$(document).ready(function () {
    function refreshIngredients() {
        // 1️⃣ on récupère l'id de la recette sélectionnée
        let recipe_id = $("#id_recipe").val() || $("input[name='recipe']:checked").val();

        if (!recipe_id) {
            // 2️⃣ rien sélectionné → on vide la zone d'ingrédients
            $("#div_id_ingredients > div").empty().html("<em>Aucune recette sélectionnée</em>");
            return;
        }

        // 3️⃣ on interroge le serveur
        $.getJSON("{% url 'food:get_ingredients' %}", { recipe_id: recipe_id })
            .done(function (data) {

                // 4️⃣ on cible le bon conteneur
                const $container = $("#div_id_ingredients > div");
                $container.empty();

                if (data.ingredients && data.ingredients.length > 0) {
                    // 5️⃣ on crée les cases à cocher
                    data.ingredients.forEach(function (ing, i) {
                        const html = `
                            <div class="form-check">
                                <input type="checkbox"
                                       name="ingredients"
                                       value="${ing.id}"
                                       id="id_ingredients_${i}"
                                       class="form-check-input"
                                       checked>
                                <label class="form-check-label" for="id_ingredients_${i}">
                                    ${ing.name} (${ing.qr_code_numbers})
                                </label>
                            </div>
                        `;
                        $container.append(html);
                    });
                } else {
                    $container.html("<em>Aucun ingrédient trouvé</em>");
                }
            })
            .fail(function (xhr) {
                console.error("Erreur AJAX:", xhr);
                $("#div_id_ingredients > div").html("<em>Erreur de chargement des ingrédients</em>");
            });
    }

    // 6️⃣ déclenche quand la recette change
    $("#id_recipe, input[name='recipe']").change(refreshIngredients);

    // 7️⃣ initial
    refreshIngredients();
});
</script>

{% endblock %}