Having trouble loading table after ajax POST

Question

After I have done using an ajax POST to update a particular user in a table, I am trying to reload my table of users once a modal closes. I have utilised the jQuery load function to call my page again so that the page refreshes, but the page just looks like it is duplicating itself. I have supplied my code below. My Ajax POST function with success updating and re-loading 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); 
    } 
});

The table I am trying to reload on success of the 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>

And my Controller which gets all the users from the database:

@Secured("ROLE_ADMIN")
@RequestMapping("/users")
public String getUsers(Model model) {

    List<User> users = usersService.getUsers();
    model.addAttribute("users", users);

    return "users";

}

Any guidance will be appreciated. Thanks

Answer 1

Jquery load not good to use with ModelView ,however it returns new page map that expect page redirect ,the model will be close after response and in your case it waiting to free model !,for ajax you should use jquery ajax with ResponseBody and append in jquery

Answer 2

You need a container around the table:

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

Then your AJAX callback should do:

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

This is because .load() replaces the contents of the element you apply it to, it doesn't replace the element itself. So you were ending up with a table inside a table, as well as duplicate IDs.

Answer 3

Best solution is you can escape the nested <div>;

INSTEAD OF:

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

USE THIS RATHER:

$("#users_table_container").load("page.html #users_table_container > *");

This will cause your <div> not to duplicate.