Bonjour,

Je suis sur un projet de site pour une sage-femme sur Synfony 4. Je rencontre un obstacle au niveau du formulaire de prise de rdv.
J'ai une entity Booking pour les rdv avec 4 champs (nom, prénom, type de consultation et date) et une autre entity Horaire en relation avec celle-ci ou sont enregistré tout les créneaux horaire disponible.
Dans le formulaire, l'utilisateur choisi dabord une date de rdv puis ensuite un horaire.
Ce que j'aimerai faire, c'est que suivant la date choisi, le champ horaire n'affiche que les heures disponible.
Peut-être avec un eventListener?

Merci d'avance.

6 réponses


salut
ou juste avec un peu d'ajax.
en fonction de la date du requêtes sur les heures disponibles et tu généres tes rdv par la suite dans ta

Merci pour ta reponse bidule.
J'avais vu que c'était possible en ajax effectivement mais j'ai jamais utilisé ce langage.
Tu aurai un exemple ou un lien qui conviendrai à ce cas de figure?
Merci.

c'est un exemple fait sur SF3 mais cela devrait fonctionner sur du SF4

Controller:

 /**
     * Add Package on detailVoyage entity.
     *
     * @Route("/siRetourExiste", name="siRetourExist")
     */
    public function siRetourExisteAction(Request $request)
    {

        if ($request->isMethod('POST') && $request->isXmlHttpRequest())
        {
            $content = $request->request;
            $em = $this->getDoctrine()->getManager();
            /* @var $emplacement Emplacement  */
            $retourExiste = $em->getRepository('AppBundle:GestionRetour')->siRetourExiste($content->get('retour'));

            return new JsonResponse($retourExiste);
        }
        return false;
    }

Dans ta vue dans ton script JS:
AJAX

$("#appbundle_gestionretour_numeroSage").focusout(function(e){
                e.preventDefault();
                var divSage = $("#divNumeroSage");
                var nameClicked = $('#appbundle_gestionretour_numeroSage').val();
                if ( (nameClicked !== null) && (nameClicked !== ''))
                {
                    $.ajax({
                        url: "{{ path('siRetourExist') }}",
                        type: "POST",
                        dataType: 'json',
                        data: {
                            "retour": nameClicked //les données que tu veux envoyer à ta requête
                        },
                        async: true,
                        success: function (data) //ici il n'y a que la gestion du success mais tu peux y ajouter d'autres comme "error" ou "complete"
                        { //a partir de là tu y applique ta logique en cas de retour
                            if(data === '1' )
                            {
                                divSage.removeClass('has-error').addClass('has-success');
                                $('#rechercher_colis').prop('disabled', false);
                            }
                            else
                            {
                                divSage.removeClass('has-success').addClass('has-error');
                            }
                        }
                    });
                }
            });

Après la fonction fetch est plus à jour en JS natif Grafikart à fait une très bonne vidéo dessus et je t'invite à la regarder.
video fetch

Super bidule merci beaucoup. je vais essayer ça ;)

J'ai essayé le script que tu m'a donné bidule et il ne se passe rien même pas un message d'erreur.
J'ai modifié mon entity booking. J'ai rajouté un champ heure et dans le formulaire le champ heure est un ChoiceType avec toute les heures possible. J'ai peut-être fait une erreur?

Le controller:

 /**
     * @Route("/notAvailableHours", name="notAvailableHours")
     */
    public function notAvailableHours(Request $request)
    {

        if ($request->isMethod('POST') && $request->isXmlHttpRequest())
        {
            $content = $request->request;
            $em = $this->getDoctrine()->getManager();
            $notAvailableHours = $em->getRepository(Booking::class)->notAvailableHours($content->get('heure'));

            return new JsonResponse($notAvailableHours);
        }
        return false;
    }

La vue:

{% block javascript %}
<script>

$(".dateChoice").focusout(function(e){
    e.preventDefault();
    var heureChoice = $(".heureChoice");
    var dateChoice = $('.dateChoice').val();
    if ( (dateChoice !== null) && (dateChoice !== ''))
    {
        $.ajax({
            url: "{{ path('notAvailableHours') }}",
            type: "POST",
            dataType: 'json',
            data: {
                "retour": dateChoice //les données que tu veux envoyer à ta requête
            },
            async: true,
            success: function (data) //ici il n'y a que la gestion du success mais tu peux y ajouter d'autres comme "error" ou "complete"
            { //a partir de là tu y applique ta logique en cas de retour
                if(data === '1' )
                {
                    heureChoice.removeClass('has-error').addClass('has-success');
                    $('.heureChoice').prop('disabled', true);
                }
                else
                {
                    heureChoice.removeClass('has-success').addClass('has-error');
                }
            }
        });
    }
});

</script>
{% endblock %}

Merci d'avance ;)

Hello,

Il te faut effectivement une petite couche js/ajax pour rendre ça dynamique, mais côté back end, la bonne pratique est effectivement de passer par un form event listener. La doc Symfony devrait pouvoir t'aider : https://symfony.com/doc/current/form/dynamic_form_modification.html#how-to-dynamically-generate-forms-based-on-user-data