title: Updating tables with AJAX, Spring MVC, MySQL
body: <p>How to update my table with AJAX at foreach loop without page refreshing!
  Help pls!
  This is my jsp code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;%@ page language="java" contentType="text/html; charset=utf-8"
      pageEncoding="utf-8"%&gt;
  &lt;%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%&gt;
  &lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt;
  &lt;%@ taglib uri="http://www.springframework.org/security/tags" prefix="security" %&gt;
  &lt;%@page language="java" session="true" %&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  
  &lt;title&gt;Cообщения | Violence and Hate&lt;/title&gt;
  &lt;link href="&lt;c:url value="/resources/bootstrap/bootstrap.css"/&gt;"
   rel="stylesheet" type="text/css"&gt;
  &lt;link href="&lt;c:url value="/resources/bootstrap/bootswatch.less.css"/&gt;"
   rel="stylesheet" type="text/css"&gt;
  &lt;link href="&lt;c:url value="/resources/bootstrap/variables.less.css"/&gt;"
   rel="stylesheet" type="text/css"&gt;
  &lt;link href="&lt;c:url value="/resources/CSS/styles.css"/&gt;" rel="stylesheet"
   type="text/css"&gt;
  &lt;script src="&lt;c:url value="/resources/Jquery/jquery-2.1.4.min.js"/&gt;"
   type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
     &lt;div class="navbar-header"&gt;
      &lt;button type="button" class="navbar-toggle collapsed"
       data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
       &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt; &lt;span
        class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span
        class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class="navbar-brand" href="#"&gt;Violence and Hate&lt;/a&gt;
     &lt;/div&gt;
  
     &lt;div class="collapse navbar-collapse"
      id="bs-example-navbar-collapse-1"&gt;
      &lt;ul class="nav navbar-nav"&gt;
  
       &lt;li&gt;&lt;a href="/app/user"&gt;Профиль&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="/app/user/messages"&gt;Сообщения&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="/app/user/search"&gt;Поиск оппонента&lt;/a&gt;&lt;/li&gt;
       &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle"
        data-toggle="dropdown" role="button" aria-expanded="false"&gt;Информация&lt;span
         class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu" role="menu"&gt;
         &lt;li&gt;&lt;a href="/app/user/rules"&gt;Правила&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="/app/user/contacts"&gt;Наши контакты&lt;/a&gt;&lt;/li&gt;
         &lt;li class="divider"&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="/app/user/feedback"&gt;Написать администрации&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;&lt;/li&gt;
       &lt;security:authorize ifAnyGranted="ROLE_ADMIN"&gt;
        &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle"
         data-toggle="dropdown" role="button" aria-expanded="false"&gt;Администрирование&lt;span
          class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
         &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a href="/app/admin"&gt;Админка/Список пользователей&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/app/admin/feedbacklist"&gt;Отзывы/Вопросы/Предложения&lt;/a&gt;&lt;/li&gt;
  
         &lt;/ul&gt;&lt;/li&gt;
       &lt;/security:authorize&gt;
      &lt;/ul&gt;
  
      &lt;c:url var="logoutUrl" value="/j_spring_security_logout" /&gt;
      &lt;form class="navbar-form navbar-right" action="${logoutUrl}"
       method="post"&gt;
       &lt;button class="btn btn-default" type="submit"&gt;Выйти&lt;/button&gt;
       &lt;input type="hidden" name="${_csrf.parameterName}"
        value="${_csrf.token}" /&gt;
      &lt;/form&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/nav&gt;
   &lt;img class="img-responsive center-block"  src="&lt;c:url value="/resources/logo/logo.png"/&gt;" /&gt;
   &lt;h2 class="text-center"&gt;Личные сообщения&lt;/h2&gt;
  &lt;h5 class="text-center"&gt;Чтобы начать общение - выберите оппонента в поиске и отправьте ему сообщение&lt;/h5&gt;
  
     &lt;!-- tabs left --&gt;
     &lt;c:if test="${!empty listDialog}"&gt;
        &lt;div class="tabbable tabs-left"&gt;
  
          &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="active"&gt;&lt;a href="#start" data-toggle="tab"&gt;Инфо&lt;/a&gt;&lt;/li&gt;
        &lt;c:forEach items="${listDialog}" var="dialog"&gt; 
            &lt;li&gt;&lt;a href="#a" data-toggle="tab"&gt;${dialog.iddialog}&lt;/a&gt;&lt;/li&gt;
            &lt;/c:forEach&gt;      
          &lt;/ul&gt;
          
          &lt;div class="tab-content"&gt;
          &lt;!-- &lt;div class="tab-pane active" id="start"&gt;
          Напишите сообщение через поиск!
          &lt;/div&gt;
           &lt;div class="tab-pane"  id="a"&gt;Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. 
           Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.&lt;/div&gt;
          &lt;/div&gt;--&gt;
        &lt;/div&gt;
        &lt;!-- /tabs --&gt;
      &lt;/div&gt;
  &lt;/c:if&gt;
  &lt;/body&gt;
  &lt;script src="&lt;c:url value="/resources/Jquery/jquery-2.1.4.min.js"/&gt;"
   type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="&lt;c:url value="/resources/bootstrap/bootstrap.js"/&gt;"
   type="text/javascript"&gt;&lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my controller method where i'm getting list of dialogs from database</p>
  
  <pre><code>@RequestMapping(value = "/user/messages", method = RequestMethod.GET)
  public String messagesPage(Model model, Principal principal) {
      model.addAttribute("dialog", new Dialog());
      model.addAttribute("listDialog", dialogService.listDialog(principal.getName()));
      return "messages";
  
  }
  </code></pre>
  
  <p>Here is my DAO method where i'm using SQL query to get info from database</p>
  
  <pre><code>@SuppressWarnings("unchecked")
  @Override
  public List&lt;Dialog&gt; listDialog(String username) {
      String query = "select dialog.iddialog, dialog.username, dialog.reciever from dialog where dialog.username LIKE '%s' OR dialog.reciever LIKE '%s'";
      Session session = null;
      session = sessionFactory.openSession();
      List&lt;Dialog&gt; dialogList = session.createSQLQuery(String.format(query, username, username)).addEntity(Dialog.class).list();
      session.close();
      session = null;
      return dialogList;
  }
  </code></pre>
  
  <p>And here is my SQL code with users table and dialog table</p>
  
  <pre><code>    CREATE TABLE `users` ( 
  `username` varchar(45) CHARACTER SET utf8 NOT NULL, 
  `enabled` bit(1) NOT NULL,
  `password` varchar(60) CHARACTER SET utf8 NOT NULL, 
  `name` varchar(30) CHARACTER SET utf8 NOT NULL,
  `surname` varchar(30) CHARACTER SET utf8 NOT NULL,
  `email` varchar(50) CHARACTER SET utf8 NOT NULL,
  `gender` varchar(30) CHARACTER SET utf8 NOT NULL,
  `age` varchar(2) NOT NULL,
  `weight` varchar(2) NOT NULL,
  `height` varchar(3) NOT NULL,
  `sport` varchar(50) CHARACTER SET utf8 NOT NUlL,
  `place` varchar(400) CHARACTER SET utf8 NOT NULL,
  `photoa` varchar(100) NOT NULL,
  `photob` varchar(100) NOT NULL,
  PRIMARY KEY (`username`) 
  ) ENGINE=InnoDB DEFAULT CHARSET=UTF8; 
  
  CREATE TABLE `user_roles` ( 
  `user_role_id` int(11) NOT NULL auto_increment, 
  `role` varchar(45) NOT NULL, 
  `username` varchar(45) NOT NULL, 
  PRIMARY KEY (`user_role_id`), 
  KEY `FK_9ry105icat2dux14oyixybw9l` (`username`), 
  CONSTRAINT `FK_9ry105icat2dux14oyixybw9l` FOREIGN KEY (`username`) REFERENCES `users` (`username`) 
  ) ENGINE=InnoDB DEFAULT CHARSET=UTF8; 
  
  create table dialog
  (
  `iddialog` int NOT NULL auto_increment,
  `reciever` varchar(50) CHARACTER SET utf8 NOT NULL,
  `username`varchar(45) CHARACTER SET utf8 NOT NULL,
  PRIMARY KEY(`iddialog`),
  foreign key (`username`) references users(`username`)
  )ENGINE=InnoDB DEFAULT CHARSET=UTF8; 
  </code></pre>