Avoir du mal à charger la table après ajax POST

Après avoir utilisé un POST ajax pour mettre à jour un utilisateur particulier dans une table, j'essaie de recharger ma table d'utilisateurs une fois que le mode se ferme. J'ai utilisé la fonction de chargement de jQuery pour appeler ma page de nouveau afin que la page soit rafraîchie, mais la page semble se reproduire elle-même. J'ai fourni mon code ci-dessous. Ma fonction POST Ajax avec la mise à jour et le recadrage réussi de la page:

$.ajax({ type: "POST", url: "${pageContext.request.contextPath}/updateUser", data: $("#updateForm").serialize(), success: function(response) { $("#alert").show(); $("#users_table").load("${pageContext.request.contextPath}/users #users_table"); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("Status: " + textStatus); alert("Error: " + errorThrown); } }); 

Le tableau que je tente de recharger sur le succès de l'AJAX:

 <table id="users_table" class=" table table-hover table-bordered"> <tr> <th>User Id #</th> <th>Full Name</th> <th>Username</th> <th>Email</th> <th>Date of Birth</th> <th>User Authority</th> <th>Update </th> <th>Submitted Sightings</th> <th>Delete</th> </tr> <c:forEach var="user" items="${users}"> <tr> <td><c:out value="${user.id}" /></td> <td><c:out value="${user.name}"/></td> <td><c:out value="${user.username}"/></td> <td><c:out value="${user.email}"/></td> <td><c:out value="${user.dob}"/></td> <td><c:out value="${user.authority}"/></td> <td> <button data-togle="modal" href="#updateModal" class="updateUser btn btn-primary" value="${user.id}">Update</button> </td> <td> <button class="btn btn-success">Sightings</button> </td> <td> <a class="delete" href="<c:url value="/deleteUser"><c:param name="id" value="${user.id}"/></c:url>"><button class="btn btn-danger">Delete</button></a> </td> </tr> </c:forEach> </table> 

Et mon contrôleur qui obtient tous les utilisateurs de la base de données:

 @Secured("ROLE_ADMIN") @RequestMapping("/users") public String getUsers(Model model) { List<User> users = usersService.getUsers(); model.addAttribute("users", users); return "users"; } 

Toute indication sera appréciée. Merci

Vous avez besoin d'un conteneur autour de la table:

 <div id="users_table_container"> <table id="users_table"> ... </table> </div> 

Ensuite, votre rappel AJAX devrait faire:

 $("#users_table_container").load(...); 

C'est parce que .load() remplace le contenu de l'élément .load() vous l'appliquez, il ne remplace pas l'élément lui-même. Donc, vous vous retrouviez avec une table dans une table, ainsi que des ID en double.

Jquery charge pas bon à utiliser avec ModelView, mais il renvoie une nouvelle page qui s'attend à la redirection de la page, le modèle sera proche après la réponse et dans votre cas il attend le modèle gratuit! Pour ajax, vous devez utiliser jquery ajax avec ResponseBody et ajouter à Jquery