2013-10-11 7 views
0

После того, как я выполнил использование ajax POST для обновления определенного пользователя в таблице, я пытаюсь перезагрузить таблицу пользователей после закрытия модального файла. Я использовал функцию загрузки jQuery, чтобы снова вызвать мою страницу, чтобы страница обновилась, но страница выглядит просто как она дублирует себя. Я поставил свой код ниже. Моя функция Ajax POST с успехом обновляя и повторной загрузки страницы:Не удалось загрузить таблицу после ajax POST

$.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); 
    } 
}); 

В таблице Я пытаюсь перезарядить на успех 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> 

И мой контроллер, который получает все пользователи из в базе данных:

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

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

    return "users"; 

} 

Любые указания будут оценены. Благодаря

ответ

1

Вам нужен контейнер вокруг стола:

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

Тогда ваш AJAX обратного вызова должен делать:

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

Это происходит потому, что .load() заменяет содержимое элемента вы применяете его, он не заменяет сам элемент. Таким образом, вы столкнулись с таблицей внутри таблицы, а также с дублирующимися идентификаторами.

+0

Отлично! Спасибо за это, именно то, что я искал. Приветствует еще раз. Это сейчас работает, но когда я закрываю свой модальный после обновления, когда я пытаюсь открыть другой модальный, он не позволяет мне. Есть идеи? – Maff

0

Jquery load не подходит для использования с ModelView, однако он возвращает новую карту страницы, ожидающую перенаправления страницы, модель будет близка после ответа, а в вашем случае она ждет свободной модели !, для ajax вы должны использовать jquery ajax с ResponseBody и добавление в jQuery

Смежные вопросы