-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex2.html
129 lines (124 loc) · 4.41 KB
/
index2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>APIテスト</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/loading.js"></script>
</head>
<body>
<div id="fade"></div>
<div id="wrap2">
<header id="top">
<h1>APIテスト</h1>
</header>
<div>
<p>RailsのAPIに接続し、Todoリストを更新する練習</p>
</div>
<div id="new_todo">
<form id="new_do">
<input id="auth_token" type="hidden" name="authenticity_token">
<input id="comment" name="todo[comment]" type="text">
<input name="todo[done]" type="hidden" value="0">
<input name="todo[done]" type="checkbox" value="1">
<input type="submit">
</form>
</div>
<div id="todos">
<div id="loader">現在サーバーがお休み中です<br>温かい目で見守ってください…</div>
</div>
<a href="https://mytodokato.herokuapp.com/todos/new" target="_blank"><div id="hensyu">スケジュールを編集する</div></a>
<footer>
<address>© kato.kaisya</address>
<p id="pagetop" class="btn01 cleafix"><a href="#top">∧ページの先頭へ∧</a></p>
<p id="pageback" class="btn01 cleafix"><a href="javascript:history.go(-1)"><<前ページに戻る</a></p>
</footer>
</div>
<script>
function postTodo() {
var formElement = document.getElementById("new_do");
var formData = new FormData(formElement);
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open("POST", "https://mytodokato.herokuapp.com/todos.json", true);
xhr.onload = function(e){
if (xhr.readyState === 4) {
if (xhr.status === 201) {
console.log(xhr.responseText);
var json_data = JSON.parse(xhr.responseText);
var ul_tag = document.getElementById("todos").firstChild;
var f_li = ul_tag.firstChild;
var li_tag = document.createElement("li");
li_tag.innerHTML = json_data["id"]+":"+json_data["comment"]+":"+json_data["done"];
ul_tag.insertBefore(li_tag,f_li);
var comment = document.getElementById("comment");
comment.value = "";
alert('追加しました-----(・∀・)-----!!!');
}
}
}
xhr.send(formData);
}
function getToken() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://mytodokato.herokuapp.com/todos/new.json", false);
xhr.withCredentials = true;
xhr.onload = function(e){
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
var json_data = JSON.parse(xhr.responseText);
document.getElementById("auth_token").value = json_data.token;
}
}
}
xhr.send(null);
}
function getAll() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://mytodokato.herokuapp.com/todos.json", true);
xhr.onload = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
var todos = document.getElementById("todos");
var json_data = JSON.parse(xhr.responseText);
//配列をソート
json_data.sort(
function(a,b){
var aId = a["id"];
var bId = b["id"];
if( aId < bId ) return 1;
if( aId > bId ) return -1;
return 0;
}
);
var ul_tag = document.createElement("ul");
for(i=0;i<json_data.length;i++){
var li_tag = document.createElement("li");
li_tag.innerHTML = json_data[i]["id"]+":"+json_data[i]["comment"]+":"+json_data[i]["done"];
ul_tag.appendChild(li_tag);
}
todos.appendChild(ul_tag);
}
}
};
xhr.send(null);
}
document.addEventListener("DOMContentLoaded", function(event){
var form = document.getElementById("new_do");
form.addEventListener("submit", function(event) {
console.log("dammy");
postTodo();
event.preventDefault();
});
getToken();
getAll();
});
</script>
<script src="https://use.typekit.net/nei6ruw.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</body>
</html>