Discussion :

[petitDev]

Salut les développeurs,

Le contexte: l'utilisateur arrive sur la page d'accueil du site (site de réservation d'appartement). Dans la page, il y a un formulaire ou il peut entrer une date d'entrée et une date de sortie. Quand il clique sur le bouton "voir les disponibilités", il lui est retourné la liste des appartements disponibles en fonction des dates qu'il à fournit, et tout ça sans que ça ai changé de page, fluide et simple pour l'utilisateur.

Ma demande: Je sais que je dois utiliser ajax pour faire en sorte que la requête se fasse et retourne une réponse sans changer de page, mais j'ai un peu du mal à comprendre comment ca fonctionne, malgré tout ce que j'ai vu sur les internets.

En ayant suivi des forums, j'en suis là:

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
21
<script>
		$(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
}
});
 
 
});
	</script>

Dans mon controller, j'ai placé l'appel de la fonction qui fait la recherche des appartements disponible dans une fonction pour qu'elle puisse être appelé via l'annotation @Route.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
/**
     * @Route("/availableRooms", name="availableRooms")
     */
    public function showAvailableRoom($start, $leave)
    {
        $rooms = $roomRepository->notBookedRooms($start, $leave);
    }

Il me semble logique que je doive ensuite l'appeler dans la fonction qui me génère la page:

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
public function homepage(EntityManagerInterface $em, BookingRepository $calendar, RoomRepository $roomRepository, Request $request,  CategoryRepository $categoryRepository): Response
    {
        //AFFICHER LES DONNEES DANS LE CALENDRIER
        $events = $calendar->findAll();
        $booking = [];
        foreach ($events as $event) {
            $booking[] = [
                'id' => $event->getId(),
                'start' => $event->getStartDate()->format('Y-m-d'),
                'end' => $event->getLeaveDate()->format('Y-m-d'),
                'defaultAllDay' => true,
                'display' => 'background',
                'backgroundColor' => 'red'
 
            ];
        }
        $data = json_encode($booking);
 
 
 
        //CREATION FORMULAIRE DE RESERVATION     
        $availableForm = $this->createForm(chekingAvailabilityType::class);     
 
        $availableForm->handleRequest($request);
 
        $start = $availableForm['startDate']->getData();
        $leave = $availableForm['leaveDate']->getData();        
 
        if ($availableForm->isSubmitted()) {
 
            $this->showAvailableRoom($start, $leave);
 
        }
 
        $availableFormView = $availableForm->createView();              
 
        return $this->render('page/homepage/homepage.html.twig',  [              
 
            'availableFormView' => $availableFormView,            
 
        ]);
    }

mon 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
<div class="container">
	<div class="row">
		<div class="col">
			<div class="row">
				{{ form_start(availableFormView) }}
				<div class="col">{{ form_row(availableFormView.startDate) }}</div>
				<div class="col">{{ form_row(availableFormView.leaveDate) }}</div>
				<a data-ajax-load={{path('rooms')}} class="btn btn-primary">Voir les disponibilités</a>
				{{ form_end(availableFormView) }}
			</div>
		</div>
		<div id="container" class="col">
			{% for room in rooms %}
				{{room.name}}
			{% endfor %}
		</div>
 
	</div>
 
</div>

Actuellement je suis en entorse du cerveau car je me retrouve face à un cas.
Pour appeler la fonction $roomRepository->notBookedRooms($start, $leave);, j'ai besoin du RoomRepository dans le paramètre de la fonction showAvailableRoom($start, $leave). Sauf que si je le rajoute, quand j'appel cette fonction dans homepage() il me demande un troisième paramètre.

Alors soit j'ai pas compris soi je sais pas mais si vous pouvez m'aiguiller a ce sujet vraiment ce serait top! merci à tous.