Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Symfony PHP Discussion :

Changer le mois du calendrier sans recharger la page


Sujet :

Symfony PHP

  1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2020
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : janvier 2020
    Messages : 3
    Points : 3
    Points
    3
    Par défaut Changer le mois du calendrier sans recharger la page
    Bonjour tout le monde. Je travail actuellement sur un calendrier de réservation pour deux appartements. Le calendrier fonctionne correctement et affiche bien les réservations.

    Mon problème est que l'intégralité de ma page recharge lorsque je passe au mois précédent/suivant. Rien de plus normal vu que mes boutons mois précédent/suivant sont des liens qui renvoient au controller les nouvelles variables mois et année afin de recréer une vue du calendrier et effectuer une requête afin de récupérer les réservations du mois affiché.

    Je suppose que pour palier au problème, il faut que j'utilise AJAX. Je suis totalement perdu car que je n'ai jamais utilisé conjointement AJAX avec Symfony.

    Dois-je effectuer l'intégralité du traitement de mon controller dans la requête ajax ? Comment procéder ?

    Le but final étant d'intégrer ce calendrier de réservation sur un site qui est sous symfony.
    Merci d'avance.

    index.html.twig:

    Code twig : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    {% extends 'base.html.twig' %}
     
    {% block body %}  
     
    <div class="d-flex flex-row align-items-center justify-content-between mx-sm-3">
        <h1>{{ calendar.toString }}</h1> //Affiche Le mois et l'année
        <div> //Boutons pour passer au mois précédent/suivant
            <a href="{{ path('calendar', { 'month': calendar.previousMonth.month, 'year': calendar.previousMonth.year }) }}" class="btn btn-primary">&lt;</a>
            <a href="{{ path('calendar', { 'month': calendar.nextMonth.month, 'year': calendar.nextMonth.year }) }}" class="btn btn-primary">&gt;</a>
        </div>
    </div>
     
    <table class="calendar_table">
     
        <tr>
            {% for day in calendar.days %}
            <th>
                <div class="calendar__weekday">{{ day }}</div> //Affiche sur la première ligne du calendrier les jours de la semaine en toute lettre
            </th>
            {% endfor %}
        </tr>
     
        {% for i in range(0, weeks) %} //Pour chaque semaines du mois
        <tr>
            {% for day in calendar.days %} //Pour chaque jours de la semaine
     
                {% set date = startingDay|date_modify("+" ~ (loop.index0 + i * 7) ~ "days" ) %}
                <td {% if not calendar.withinMonth(date) %} class="calendar__othermonth" {% endif %}> //Grise les jours qui n'appartiennet pas au mois sélectionné
                <div class="calendar__day //Ajoute une classe si le jours est réservé pour l'appartement 8 ou/et 9
                    {% for reservation8 in reservationsView_8 %}
                        {% if date|date('Y-m-d') >= reservation8.start|date('Y-m-d') and date|date('Y-m-d') <= reservation8.end|date('Y-m-d') %}
                            reservation_8
                        {% endif %}
                    {% endfor %}
                    {% for reservation9 in reservationsView_9 %}
                        {% if date|date('Y-m-d') >= reservation9.start|date('Y-m-d') and date|date('Y-m-d') <= reservation9.end|date('Y-m-d') %}
                            reservation_9
                        {% endif %}
                    {% endfor %}
                ">{{ date|date("d") }}</div> //Nombre du jour
            </td>
            {% endfor %}
        </tr>
        {% endfor %}
    </table>
     
    {% endblock %}

    CalendarController.php:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <?php
     
    namespace App\Controller;
     
    use App\Calendar\Calendar;
    use App\Entity\Appartement;
     
    use App\Entity\Reservation;
    use Symfony\Component\HttpFoundation\Request;
    use Symfony\Component\Routing\Annotation\Route;
    use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
     
     
    class CalendarController extends AbstractController
    {
        /**
         * @Route("/calendar", name="calendar")
         */
        public function index(Request $request)
        {
            $getMonth = $request->query->get('month'); //Récupère le mois et l'année passés en $_post via les liens mois précédent/suivant
            $getYear = $request->query->get('year');
     
            $calendar = new Calendar($getMonth ?? null, $getYear ?? null); //Créer une vue du mois sélectionné. Si le controller n'a pas reçu de mois/année en paramètre, il prend le mois actuel.
     
            $weeks = $calendar->getWeeks(); //Nombre de semaines dans le mois
     
            $startingDay = $calendar->getStartingDay(); //Premier jour de la vue du mois.
            $startingDay = $startingDay->format('N') === '1' ? $startingDay : $calendar->getStartingDay()->modify('last monday'); //Si le premier jours de la vue du mois n'est pas le 1er, prend le lundi de la semaine précédente.
     
            $endingDay = (clone $startingDay)->modify('+' . (6 + 7 * ($weeks - 1)) . ' days'); //Dernier jours de la vue du mois
     
            $em = $this->getDoctrine()->getManager();
            $connection = $em->getConnection();
     
            $start = $startingDay->format('Y-m-d');
            $end = $endingDay->format('Y-m-d');
     
            $query1 = $connection->prepare("SELECT * FROM reservation r WHERE r.appartement_id = 1 AND r.start BETWEEN '$start' AND '$end'");
            $query1->execute();
            $query2 = $connection->prepare("SELECT * FROM reservation r WHERE r.appartement_id = 2 AND r.start BETWEEN '$start' AND '$end'");
            $query2->execute();
            $reservationsView_8 = $query1->fetchAll();
            $reservationsView_9 = $query2->fetchAll();
     
            return $this->render('calendar/index.html.twig', [
                'calendar'=> $calendar,
                'startingDay' => $startingDay,
                'weeks' => $weeks,
                'reservationsView_8' => $reservationsView_8,
                'reservationsView_9' => $reservationsView_9,
            ]);
        }
    }

  2. #2
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2019
    Messages
    40
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : octobre 2019
    Messages : 40
    Points : 34
    Points
    34
    Par défaut
    Salut,

    Il suffit que tu appelle la bonne route via Ajax.

    Au lieu de faire un simple lien classique :
    Code twig : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="{{ path('calendar', { 'month': calendar.previousMonth.month, 'year': calendar.previousMonth.year }) }}" class="btn btn-primary">&lt;</a>

    Tu peux faire en sorte d'appeler une fonction AJAX qui va se charger d'appeler la page :
    Code twig : Sélectionner tout - Visualiser dans une fenêtre à part
    <a data-ajax-load="{{ path('calendar', { 'month': calendar.previousMonth.month, 'year': calendar.previousMonth.year }) }}" class="btn btn-primary">&lt;</a>

    Il faut évidemment créer cette fonction (voici un exemple avec Jquery car j'ai la flemme) :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    $(document).on('click', "[data-ajax-load]", function(e) {
     
        e.preventDefault();
     
       // Récupération du lien a appeler
        let link= $(this).attr('data-ajax-load');
     
       $.ajax({
            url: link,
            type: "GET",
            success: function(data) {
                $("#container").html(data); // Charger le contenu de la nouvelle page récupérer via AJAX dans la DIV de ton choix (ici le contenu sera chargé dans la DIV avec l'id container
            },
            error : function() {
                // traitement de l'erreur
            }
        });
     
     
    });

    Par contre il manque un truc, car en faisant ça l'intégralité de ta page sera chargée avec le HEAD / BODY etc.

    Donc tu dois créer une alternative à ton template 'base.html.twig', mais qui sera complètement vide (pas de DOM complet) :

    exemple "base_ajax.html.twig" :
    Code twig : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    {% block body %}
    {% endblock %}

    Et dernière chose, dans tes VUES qui seront susceptibles d'être chargées via AJAX, tu dois préciser :
    Code twig : Sélectionner tout - Visualiser dans une fenêtre à part
    {% extends app.request.isXmlHttpRequest ? "base_ajax.html.twig" : "base.html.twig" %}

    Comme ça tu es sur que la bonne sera chargée selon qu'il s'agisse d'une requete Ajax ou d'un chargement classique.

  3. #3
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2020
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : janvier 2020
    Messages : 3
    Points : 3
    Points
    3
    Par défaut
    Merci pour ta réponse rapide et détaillée. Je vais tester ça mais je pense avoir compris comment procéder grace à tes indications précises. Je te tiens au courant de mon avancement !

  4. #4
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2020
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : janvier 2020
    Messages : 3
    Points : 3
    Points
    3
    Par défaut
    Bon j'ai testé et cela marche parfaitement.
    Merci encore d'avoir pris la peine de lire mon problème et de m'avoir donné de ton temps !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Changer contenu sans recharger la page
    Par krustypop dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 22/06/2009, 16h50
  2. [MySQL] Changer contenu sans recharger la page
    Par krustypop dans le forum PHP & Base de données
    Réponses: 4
    Dernier message: 22/06/2009, 14h11
  3. Changer une image sans recharger la page
    Par stiiX13 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 03/05/2009, 22h21
  4. Changer du texte sans recharger la page
    Par glloq8 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 01/02/2007, 13h18
  5. Changer la police avec un select, sans recharger la page
    Par Netoman dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 30/12/2004, 19h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo