Discussion :

[ilias916]

Bonjour, j'essaie de modifier et d'envoyer mes donnée en BD mais le javascript me l’empêche pourtant en faisant F12 rien n’apparaît comme erreur.

voici mes pages html,js et ma page restController.

ticketRestController :

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
package com.acton.geco.controller;
 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;
 
import javax.validation.Valid;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RestController;
 
import com.acton.geco.model.Dossier;
import com.acton.geco.model.Ticket;
import com.acton.geco.model.json.DossierJsonResponse;
import com.acton.geco.model.json.TicketJsonResponse;
import com.acton.geco.model.modelDTO.DossierDTO;
import com.acton.geco.model.modelDTO.DossierList;
import com.acton.geco.model.modelDTO.TicketDTO;
import com.acton.geco.model.modelDTO.TicketList;
import com.acton.geco.model.util.EnumLoader;
import com.acton.geco.model.util.StatutTicket;
import com.acton.geco.model.util.TypeTicket;
import com.acton.geco.service.DossierService;
import com.acton.geco.service.TicketService;
 
@RestController
public class TicketRestController {
	// mon dossier services attribut
	@Autowired
	private DossierService dossierService;
	// attibut ticketServices
	@Autowired
	private TicketService ticketService;
 
	//// en termes simples, l'annotation est utilisée pour mapper les demandes Web aux méthodes Spring Controller
	@GetMapping("/ticket/all")
	public List<TicketList> listTicket() {
	//	List<String> arrayList = new ArrayList<String>();
		return ticketService.listTicket();
	}
 
	@PostMapping("/ticket/save")
	public TicketJsonResponse saveTicket(@ModelAttribute("ticket") @Valid TicketDTO ticketDTO, BindingResult result) {
		TicketJsonResponse ticketJsonResponse = new TicketJsonResponse();
		if(result.hasErrors()) {
			Map<String, String> errors = result.getFieldErrors().stream()
					.collect(Collectors.toMap(FieldError::getField, FieldError::getDefaultMessage));
			ticketJsonResponse.setValidation(false);
			ticketJsonResponse.setErrorMessages(errors);
		}else {
			Ticket ticket = TicketDTO.convertToTicket(ticketDTO);
			ticketService.saveTicket(ticket);
			ticketJsonResponse.setValidation(true);
		}
		return ticketJsonResponse;
	}
 
	@PutMapping("/ticket/update")
	public TicketJsonResponse updateTicket(@ModelAttribute("ticket") @Valid TicketDTO ticketDTO, BindingResult result) {
		TicketJsonResponse ticketJsonResponse = new TicketJsonResponse();
		if(result.hasErrors()) {
			Map<String, String> errors = result.getFieldErrors().stream()
					.collect(Collectors.toMap(FieldError::getField, FieldError::getDefaultMessage));
			ticketJsonResponse.setValidation(false);
			ticketJsonResponse.setErrorMessages(errors);
		}else {
			Ticket ticket = TicketDTO.convertToTicket(ticketDTO);
			ticketService.updateTicket(ticket);
			ticketJsonResponse.setValidation(true);
		}
		return ticketJsonResponse;
	}
 
 
	@GetMapping("/ticket/statut")
	public Map<String, Integer> getStatutsTicket(){
		Map<String, StatutTicket> map  = EnumLoader.mapStatutTicket;
		Map<String, Integer> mapStatut = new HashMap<>();
		map.forEach((x,y) -> {
			mapStatut.put(x, y.getValue());
		});
		return mapStatut;
	}
 
	@GetMapping("/ticket/type")
	public Map<String, Integer> getTypesTicket(){
		Map<String, TypeTicket> map  = EnumLoader.mapTypeTicket;
		Map<String, Integer> mapType = new HashMap<>();
		map.forEach((x,y) -> {
			mapType.put(x, y.getValue());
		});
		return mapType;
	}
 
	@GetMapping("/ticket/{id}")
	public TicketList getTicket(@PathVariable("id") Long id) {
		return ticketService.getTicketById(id);
	}
 
	@GetMapping("/ticket/delete/{id}")
	public void deleteTicket(@PathVariable("id") Long id) {
		ticketService.deleteTicket(id);
	}
 
}

ticket.js

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
/**
 * @author zkarahacane
 * 
 * Cette page permet de gérer les différentes actions possible sur la page dossier et effectue les appels serveurs
 * 
 */
 
 
 
 
// Initialisation des variables tableaux
var table;
var tableFormUpdate;
var tableFormCreate;
 
// Equivalent d'une fonction main gère le lancement des fonctions sur les dossiers 
$(document).ready( function () {
	initDataTable();
 
	//Clique bouton enregistrer modal création : Lance procédure de création d'un dossier
    $("#ticketSave").click( function() {
		saveTicket();
    } );
 
    // Clique bouton suppression : lance suppression d'un dossier
	$("#tableTicket").on('click','#deleteTicketLink', function(){
		var row = table.row($(this).parents('tr'));
		deleteTicket(row);
	});
 
	// Clique bouton update : lance la procédure d'update 
	$("#tableTicket").on('click', '#modalUpdateLink', function(){
		var row = table.row($(this).parents('tr'));
		getTicketForUpdate(row);
	});
 
	// Evenement lorsque l'on clique sur le bouton d'envois du formulaire
	$('#ticketUpdateButton').click(function () {
	    updateTicket();
	});
});
 
// Initialise dataTable sur toute les tables de la page
// init dataTable ==> table.DataTable();
function initDataTable(){
	table = getAllTicket();
	tableFormUpdate = $('#ticketFormUpdate').DataTable();
    tableFormCreate = $('#ticketForm').DataTable();
}
 
 
// Récupère les données du dossier à modifier en fonction de la ligne
function getTicketForUpdate(row){
	var ticket = new Object();
	var id = row.data().id; // on récupère l'id du dossier
	$.ajax({ // appel au serveur pour récupéré les données du dossier
		url:"/ticket/" + id,
		type:"GET",
		success: function(data){	// Lancement de l'alimentation du formulaire
			buildUpdateForm(data);
		}
	});
 
}
 
//Récupère les données du dossier à modifier en fonction de la ligne
function getDossierForUpdate(row){
	var dossier = new Object();
	var id = row.data().id; // on récupère l'id du dossier
	$.ajax({ // appel au serveur pour récupéré les données du dossier
		url:"/ticket/" + id,
		type:"GET",
		success: function(data){	// Lancement de l'alimentation du formulaire
			buildUpdateForm(data);
		}
	});
 
// Alimente les input du formulaire de modification
function buildUpdateForm(ticket){
	// Affecte la valeur de l'id du dossier à la case du formulaire correspondant à l'id
	$("#ticketFormUpdate #id").val(ticket.id);
	$("#ticketFormUpdate #ticket").val(ticket.ticket);
	$("#ticketFormUpdate #nom").val(ticket.nom);
	$("#ticketFormUpdate #libelle").val(ticket.libelle);
	$("#ticketFormUpdate #typeTicket").val(ticket.typeTicket);
	$("#ticketFormUpdate #statutTicket").val(ticket.statutTicket);
 
}
 
// Renvoit une liste de dossier
function getAllTicket(){
	var table = $("#tableTicket").DataTable({
		ajax: {url:'/ticket/all', dataSrc:''}, // appel du serveur pour récuperer les données
		columns : [ // Définition des colonnes du tableau {title:"",data:"", name:""}
			{title:"Id",data:"id", name:"id"},
			{title:"codeTicket",data:"codeTicket", name:"codeTicket"},
			{title:"Nom",data:"", name:"nom"},
			{title:"statutTicket",data:"statutTicket", name:"statutTicket"},
			{title:"typeTicket",data:"typeTicket", name:"typeTicket"},
			{title:"Libelle",width:"100%",data:"libelle", name:"libelle"}, // dernière ligne différente pour y ajouter les actions
			{title:"",width:"100%",defaultContent:'<a href="#updateTicketModal" data-toggle="modal" data-target="#updateTicketModal" id="modalUpdateLink">Modifier</a> | <a href="javascript:void(0)" id="deleteTicketLink">Supprimer</a>'}
			]		
	});
	return table;
}
 
// Supprime un ticket en fonction de sa ligne
function deleteTicket(row){
	var id = row.data().id;
	$.ajax({ // Suppression du ticket sur le serveur
		url:"/ticket/delete/" + id,
		type:"GET",
		success: function(){
			// Suppression de la ligne sur la page
			table.row(row).remove().draw(false);
		}
	});
}
 
 
// Fonction a appeler pour créer un dossier 
function saveTicket() {
    var data = tableFormCreate.$('input, select').serialize(); // on récupère les données du formulaire dans un JSON
    $.ajax({ // on envoit le dossier format JSON au serveur
        url: "ticket/save",
        type: 'POST',
        data: data,
        dataType: 'JSON',
        success: function (response) {
            if (response.validation) {
            	// TODO Gestion de confirmation création dossier
                console.log("gooooooood");
            } else {
            	// Affichage des erreurs si il y en a
            	$.each(response.errorMessages, function (key, value) {
                    $('input[name="' + key + '"]').after('<span class="erreur">' + value + '<br /></span>');
            		});
            	}
    }
    });
    return false;
}
 
// Fonction de modification d'un dossier 
function updateTicket(){
	var ticket = new Object();
	// Récupération des input du formulaire
	ticket.id = $("#ticketFormUpdate #id").val();
	ticket.nom = $("#ticketFormUpdate #nom").val();
	ticket.ticket = $("#ticketFormUpdate #ticket").val();
	ticket.libelle = $("#ticketFormUpdate #libelle").val();
	ticket.statutTicket=$("#ticketFormUpdate #statutTicket").val();
	ticket.typeTicket=$("#ticketFormUpdate #typeTicket").val();
	$.ajax({ // Envoi des données récupérées sur le serveur au format JSON
        url: "/ticket/update",
        type: 'PUT',
        data: ticket,
        dataType: 'JSON',
        success: function (response) {
            if (response.validation) {
                // TODO : gestion de la confirmation d'update d'un Ticket
            } else {
 
              $.each(response.errorMessages, function (key, value) {
            	  if(key.includes("nom"))
                  $('input[name="' + key + '"]').after('<span class="erreur">' + value + '<br /></span>');
          		});
            }
        }
    });
}

.html :

Code HTML :

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:th="http://www.thymeleaf.org" 
 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
 xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
 layout:decorate="~{layout}"
 layout:decorator="layout">
<head>
<title>Ticket</title>
</head>
<body>
 <div layout:fragment="content">
	<div id="tableTicket">
	</div>
	<div id="ticketFormWrapper">
	<div id="retourTicket">
		<h2 class='success'></h2>
	</div>
	<form id="ticketForm" method="post" th:object="${ticket}">
	<input type="text" id="codeTicket" name = "codeTicket"/>
	<span class="erreur"></span>
	<select id="type" name = "type"></select>
	<span class="erreur"></span>
	<select id="statut" name = "statut"></select>
	<span class="erreur"></span>
	<input type="text" id="libelle" name="libelle"/>
	<button type="button" id="sendTicket">Enregistrer</button>
	</form>
 </div>
 </div>
 <div layout:fragment="content">
 <!--/* Déclaration du tableau listant les dossier (alimenté dans le js) /*/-->
	<table id="tableTicket"  class="table table-striped table-bordered" >	
	</table>
		<!--/* Bouton ouvrant modal de création /*/-->	
	<button type="button" class="btn btn-primary" data-toggle="modal"
			data-target=".bd-example-modal-lg">Nouveau ticket</button>
 
	<!--/* Modal contenant le formulaire de création d'un dossier /*/-->	
    <div class="modal fade bd-example-modal-lg" tabindex="-1" id="ticketCreateModal" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg" style="width:100%;">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="exampleModalLongTitle">Créer Ticket</h5>
							<button type="button" class="close" data-dismiss="modal"
								aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
							<!--/* Tableau contenant le formulaire de création dans ses td /*/-->	
     							<table class="table table-striped table-bordered" id="ticketForm">
     								<thead>
     								<tr>
     									<th>Nom</th>
     									<th>Libelle</th>
     								</tr>
     								</thead>
     								<tbody>
     								<tr>
     									<td><input name="nom" id="nom" type="text"/></td>
     									<td><input name="libelle" id="libelle" type="text"/></td>
     								</tr>
     								</tbody>
 
     							</table>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary"
								data-dismiss="modal">Close</button>
							<button type="button" id="ticketSave"  class="btn btn-primary">Save
								changes</button>
						</div>
					</div>
				</div>
			</div>
<!--/* Modal contenant le formulaire de modification d'un dossier /*/-->				
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="updateTicketModal"aria-hidden="true">
	<div class="modal-dialog modal-lg" style="width:100%;">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLongTitle">Modifier Ticket</h5>
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						</div>
 
						<div class="modal-body">
								<!--/* Tableau contenant le formulaire dans ses td /*/-->
     							<table class="table table-striped table-bordered" id="ticketFormUpdate">
     								<thead>
     								<tr>
     									<th>Id</th>
     									<th>Ticket</th>
     									<th>Nom</th>
     									<th>Libelle</th>
     								</tr>
     								</thead>
     								<tbody>
     								<tr>
     								<!--/* Formulaire de modification /*/-->
     								    <td><input name="id" id="id" type="text" disabled size="1"/></td>
     								    <td><input name="ticket" id="ticket" type="text"/></td>
     									<td><input name="nom" id="nom" type="text"/></td>
     									<td><input name="libelle" id="libelle" type="text"/></td>
     								</tr>
     								</tbody>
 
     							</table>
						</div>
 
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary"
								data-dismiss="modal">Close</button>
							<button type="button" id="ticketUpdateButton"  class="btn btn-primary"> Save changes</button>
						</div>
					</div>
				</div>
			</div>
</div>
 
 
 <th:block layout:fragment="script">
 <script type="text/javascript" th:src="@{'/assets/js/ticket.js'}"></script>
</th:block>
</body>
</html>

Merci
IH