Detail objet avec Controlleur Spring boot et boostrap modale
Bonjour ,
Je me vois bloque sur un detail : apres avoir afficher la liste des elements , voila une fentre modale qui doit s ouvrir et charger le detail d un element dans le modale .
Je suis toujours bloque apres avoir chercher des solution , donc votre aide pour que j'avance .
Voila le controleur :
Code:
1
2
3
4
5
6
| @RequestMapping(value = "/GetEvenDetailOnModal/{id}" , method = RequestMethod.GET)
public @ResponseBody Evenement GetEvenDetailOnModal(@PathVariable("id") long id) throws Exception {
System.out.println("ID EVENT RECUPERE:::::------:::::"+id);
Evenement evenementDetail = this.eventService.findById(id);
return evenementDetail;
} |
Voici la liste de l'info et le lien qui doit déclencher le modale, et le modale en bas
Code:
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
83
84
85
86
87
88
89
| <c:if test="${!empty listEvenements}">
<table id="listEvenementEvt" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead class=" ">
<th>NomEt</th>
<th>Date</th>
<th>NomNe</th>
<th>Genre</th>
<th>Im</th>
<th>Assure</th>
<th colspan="1" width="85">Gestion</th>
</tr>
</thead>
<tfoot class="TitreAcceul">
<tr>
<th>NomEt</th>
<th>Date</th>
<th>NomNe</th>
<th>Genre</th>
<th>Im</th>
<th>Assure</th>
<th colspan="1" width="85">Gestion </th>
</tr>
</tfoot>
<c:forEach items="${listEvenements}" var="event">
<tr class=" ">
<td>${event.nom}</td>
<td>${event.date}</td>
<td>${event.nomNa}</td>
<td>${event.genr.nomGe}</td>
<td>${event.imm}</td>
<td>${event.arra}</td>
<td>
<a href=" " class="infoEvenModale" data-toggle="modal" data-target="#validInvalidModal" data-idev='${event.id}'><span class="fas fa-edit" title="ValidationInvalidation"></span></a>
</td>
</tr>
<!-- VAlideInvalide Modal----------------------------------------------------------->
<div class="modal fade" id="validInvalidModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header btn btn-primary">
<h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-check"></i> Validation </h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><p>x</p></span>
</button>
</div>
<div class="modal-body">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-ship"></i> mis en entente de l'information : </h6>
</div>
<div class="card-body">
<c:url var="userCreate" value="${contextPath}/UserEyesCreate" ></c:url>
<form:form class="form-horizontal" method="POST" modelAttribute="eventViewMajEatInfoCco" action="${eventCreate}" >
<div class="form-group">
<label for="exampleFormControlInput1" class="control-label TitreAcceul">Etat validation agent : </label>
<form:input path="etatEvenement" type="text" class="form-control bg-light border-1 small TitreAcceul" id="etatEvenement" value=" " />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<p align="center" > <button type="submit" class="d-none d-sm-inline-block btn btn-sm-3 btn-primary shadow-sm"><span class="fas fa-check"></span> Validez</button>
<button class="btn btn-secondary" type="button" data-dismiss="modal">Fermer</button>
</form:form>
</div>
</div>
</div>
</div>
<!-- VAlideInvalide Modal--------------------------------------------------------------------------------------->
</c:forEach>
</table>
</c:if> |
Voici le ficher js
Code:
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
| $(document).ready(function () {
$("#validInvalidModal").on("show.bs.modal", function(e) {
var evid = $(this).attr('data-idev');
var parent = $(this).parent("td").parent("tr");
alert(evid);
$.ajax({
type: 'GET', // envoi des données en GET ou POST
contentType: "application/json",
url: '/GetEvenDetailOnModal/'+evid,
//data: JSON.stringify(json),
dataType: 'json',
cache: false,
timeout : 600000,
success: function (data) {
console.log("Success:",data);
//----------------------------------------------------
//$("#etatEvenement").val(data.etatEvenement);
$("#etatEvenement").html(data.etatEvenement);
//$("#validInvalidModal").modale("show");
//----------------------------------------------------
},
error: function(e){
console.log("err!:", +e);
}
});
//}
});
}); |
Merci Merci
