Discussion :

[Draren]

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,
        ]);
    }
}

[PhiMau]

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.

[Draren]

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 !

[Draren]

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 !