Discussion :

[eiffel-mtl]

Bonjour à tous,

J'ai un script AJAX qui me permet d'afficher un calendrier (les données provienne d'une bd géré par un autre fichier.. J'aimerais, lorsque l'utilisateur clique sur un événement, que le détail de l'événement s'affiche dans un popup style lightbox. Actuellement, lorsque l'utilisateur clique sur l'événement, celui-ci s'efface. Je suis nouveau avec AJAX, donc je ne sais pas trops comment faire.

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
  $(document).ready(function() {
 
  var date = new Date();
 
  var d = date.getDate();
 
  var m = date.getMonth();
 
  var y = date.getFullYear();
 
 
 
  var calendar = $('#calendar').fullCalendar({
 
   editable: false,
 
   header: {
 
    left: 'prev,next today',
 
    center: 'title',
 
    right: 'month,agendaWeek,agendaDay'
 
   },
 
 
 
   events: "events.php",
 
 
 
   eventRender: function(event, element, view) {
 
    if (event.allDay === 'true') {
 
     event.allDay = true;
 
    } else {
 
     event.allDay = false;
 
    }
 
   },
 
 
 
 
 
   editable: true,
 
 
   eventClick: function(event) {
 
 
	$.ajax({
 
		type: "POST",
 
		url: "event.php",
 
		data: "&id=" + event.id,
 
		 success: function(json) {
 
			 $('#calendar').fullCalendar('removeEvents', event.id);
 
			  alert("Updated Successfully");}
 
	});
 
 
  	}
 
 
 
  });
 
 
 
 });

Merci de votre aide

[eiffel-mtl]

À noter, ça pourrait être uniquement un <a href> À partir de là c'est facile d'afficher un lightbox

[Toufik83]

Bonjour,

L'événement s'efface parce que vous le supprimez avec cette ligne $('#calendar').fullCalendar('removeEvents', event.id);
Modifiez le rappel success et rajoutez aussi le rappel error pour gérer les erreurs comme suite :

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
success: function(response) {  // Renommé en 'response' pour plus de clarté
    // Créer ou afficher la lightbox
    let lightbox = $('#lightbox'); // Assurez-vous d'avoir un élément avec l'id "lightbox" dans votre HTML
 
    if (lightbox.length === 0) { // Si la lightbox n'existe pas, on la crée
            lightbox = $('<div id="lightbox"></div>');
            $('body').append(lightbox);
    }
 
    // Remplir le contenu de la lightbox avec les détails de l'événement
    lightbox.html(response); // 'response' contient le HTML ou les informations de l'événement
 
    // Afficher la lightbox (utilisez CSS pour la styliser)
    lightbox.show();
 
    // Gestionnaire pour fermer la lightbox (croix, clic en dehors, etc.)
    let closeButton = $('<span class="close-lightbox">&times;</span>'); // Stylez cette classe en CSS
    lightbox.prepend(closeButton); // Ajoute la croix de fermeture
 
    closeButton.click(function() {
       lightbox.hide();
       lightbox.empty(); // Optionnel : vider le contenu de la lightbox
    });
 
    lightbox.click(function(event) {
       if (event.target === lightbox[0]) { // Fermer si on clique sur le fond (pas le contenu)
              lightbox.hide();
              lightbox.empty(); // Optionnel
       }
    });
},
error: function(xhr, status, error) {
     console.error("Erreur AJAX:", status, error);
     alert("Une erreur s'est produite lors de la récupération des détails de l'événement.");
}

Puis le CSS de lightbox :

Code css :

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
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  display: none; /* Masquée par défaut */
  z-index: 1000; /* Pour être au-dessus du calendrier */
  overflow-y: auto; /* Pour le contenu long */
}
 
#lightbox > * { /* Style pour le contenu de la lightbox */
  background-color: white;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Ajustez la largeur */
  max-width: 600px; /* Largeur maximale */
  box-sizing: border-box;
}
 
.close-lightbox {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  color: #333;
}

[eiffel-mtl]

Merci, ça marche. Dernier point, j'ai un champ dans ma bd avec le code iframe de location Google Map. Par défaut ça affiche le texte, comment affiché la map au lieu du champ textarea?

Merci encore

[Toufik83]

Bonjour,

Supposons que vous avez une variable contenant le code iframe de la base de données

Code :

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

var iframeCode = '<iframe src="https://www.google.com/maps/embed?..." width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>';

Sélectionnez le div #map-container et insérez le code iframe à l'intérieur

Code :

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

$("#map-container").html(iframeCode);

[eiffel-mtl]

Le div #map-container? L'affichage du contenu s'affiche via un formulaire

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
<?php
include 'templates/header.php';
include 'templates/navbar.php';
include 'includes/functions.php';
?>
<div class="container mt-5">
    <h1>Event Calendar</h1>
    <div id="calendar"></div>
</div>
 
<!-- Modal for adding/editing events -->
<div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="eventForm">
                    <input type="hidden" id="eventId">
                    <div class="form-group">
                        <label for="eventTitle">Event Title</label>
                        <input type="text" class="form-control" id="eventTitle" required>
                    </div>
                    <div class="form-group">
                        <label for="startTime">Start Time</label>
                        <input type="text" class="form-control" id="startTime" required>
                    </div>
                    <div class="form-group">
                        <label for="endTime">End Time</label>
                        <input type="text" class="form-control" id="endTime" required>
                    </div>
                    <div class="form-group">
                        <label for="description">Description</label>
						<textarea class="form-control" id="description" required></textarea>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
 
<?php include 'templates/footer.php'; ?>