9月1日

jQueryとAJAXでTODO項目を更新する。

jQueryライブラリを追加する。

<!DOCTYPE html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ToDoアプリ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>ToDo項目</h1>

<form method="post" action="input">
<input type="text" name="item">
<input type="submit" value="登録">
</form>

<c:if test="${list != null}">
  <form method="post" action="check">
    <c:forEach var="t" items="${list}">
      <input type="checkbox" name="item" value="${t.id}" />${t.item}<br />
    </c:forEach>
  </form>
</c:if>



</body>
</html>

jQueryでチェックボックスのイベントを取得するためのコードを追加する。

<!DOCTYPE html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ToDoアプリ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('input[name="item"]').change(function(){
		console.log("change");
	});
})
</script>
</head>
(略)

チェックボックスをクリックすると、JavaScriptコンソールに change が出力されるのが確認できる。

次に、チェックボックスをクリックしたときに、完了済みのエリアにチェックボックスを移動するように処理を追加する。
そのために、完了済みのチェックボックスを配置するための場所を用意する。

<!DOCTYPE html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ToDoアプリ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('input[name="item"]').change(function(){
		console.log("change");
	});
})
</script>
</head>
<body>
<h1>ToDo項目</h1>

<form method="post" action="input">
<input type="text" name="item">
<input type="submit" value="登録">
</form>

<c:if test="${list != null}">
  <form method="post" action="check">
    <c:forEach var="t" items="${list}">
      <input type="checkbox" id="check${t.id}" name="item" value="${t.id}" />${t.item}<br />
    </c:forEach>
  </form>
</c:if>

<hr />
<h3>完了済み</h3>
<div id="done"></div>

</body>
</html>

実際にチェックボックスをクリックしてみると、□だけが移動してしまう。
文字も移動させるために、div要素でまとめる。

<c:if test="${list != null}">
  <form method="post" action="check">
    <c:forEach var="t" items="${list}">
      <div id="check${t.id}">
      	<input type="checkbox" name="item" value="${t.id}" />${t.item}
      </div>
    </c:forEach>
  </form>
</c:if>

チェックボックスがクリックされたイベントが発生したら、完了済みに移動する。

<!DOCTYPE html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ToDoアプリ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('input[name="item"]').change(function(){
		console.log($(this).parent());
		$('#done').append($(this).parent());
	});
})
</script>
</head>

コントローラに、完了を受け取るためのメソッドを用意する。
パラメータを受け取れたかどうかを確認するためのコードを書いておく。

	@RequestMapping(value = "/done", method = RequestMethod.POST)
	public void done(@RequestParam(value = "id") String id, Model model) {
		System.out.println(id);
	}

ブラウザでチェックボックスをチェックすると、そのIDがサーバー側のコンソールに表示されることがわかる。

ToDoエンティティを更新できるようにする。

ToDoDaoにメソッドを追加する。

package jp.abc;

import java.util.List;

public interface ToDoDao<T> {
	public List<T> getAll();
	public void add(T item);
	public T findById(long id);
	public void update(T item);
}

ToDoDaoImplに実装を追加する。

package jp.abc;

import java.util.List;

import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import javax.persistence.EntityTransaction;
import javax.persistence.Persistence;
import javax.persistence.Query;
import javax.persistence.criteria.CriteriaBuilder;
import javax.persistence.criteria.CriteriaQuery;
import javax.persistence.criteria.Root;

public class ToDoDaoImpl implements ToDoDao<ToDo> {
	private static EntityManagerFactory factory =
			Persistence.createEntityManagerFactory("persistenceUnit");

	public List<ToDo> getAll() {
		EntityManager manager = factory.createEntityManager();
		List<ToDo> list = null;
		CriteriaBuilder builder = manager.getCriteriaBuilder();
		CriteriaQuery<ToDo> q = builder.createQuery(ToDo.class);
		Root<ToDo> r = q.from(ToDo.class);
		q.select(r);
		list = (List<ToDo>)manager.createQuery(q).getResultList();
		manager.close();
		return list;
	}

	public void add(ToDo item) {
		EntityManager manager = factory.createEntityManager();
		EntityTransaction tx = manager.getTransaction();
		tx.begin();
		manager.persist(item);
		tx.commit();
		manager.close();
	}

	public ToDo findById(long id) {
		EntityManager manager = factory.createEntityManager();
		Query q = manager.createQuery("from ToDo where id = " + id);
		return (ToDo)q.getSingleResult();
	}

	public void update(ToDo item) {
		EntityManager manager = factory.createEntityManager();
		EntityTransaction tx = manager.getTransaction();
		tx.begin();
		manager.merge(item);
		tx.commit();
		manager.close();
	}

}

コントローラでToDoエンティティを更新するコードを追加する。

	@RequestMapping(value = "/done", method = RequestMethod.POST)
	public void done(@RequestParam(value = "id") String id, Model model) {
		ToDoDao<ToDo> dao = new ToDoDaoImpl();
		ToDo todo = dao.findById(Long.parseLong(id));
		todo.setDone(new Date());
		dao.update(todo);
	}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です