teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

ajaxについて追記

2017/06/03 01:45

投稿

mingos
mingos

スコア4314

answer CHANGED
@@ -1,8 +1,27 @@
1
1
  rubyの値が有効なのは、最初の表示だけです。
2
2
  何かをクリックした後に表示を動的に変えたい場合は、JavaScriptの担当になります。
3
3
 
4
+ ### 追記
5
+ データベースの値を更新するには、ajaxで値をrailsに渡す必要があります。
6
+ コントローラの詳細が分からないので、仮に POST /topic/:id/update_num というnumの値を+1するアクションがあるとします。
7
+
8
+ #### Controller
9
+ ```ruby
10
+ def update_num
11
+ @topic = Topic.find(params[:id])
12
+ @topic.num + 1
13
+ @topic.save!
14
+
15
+ result = {
16
+ num: @topic.num
17
+ }
18
+ render json: result
19
+ end
20
+ ```
21
+
22
+ #### View
4
23
  ```html
5
- <div id="poll1"><%= @topic.num %></div></p>
24
+ <div id="poll1" data-id="<%= @topic.id %>"><%= @topic.num %></div></p>
6
25
 
7
26
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
8
27
  <script>
@@ -10,10 +29,21 @@
10
29
  // click
11
30
  // mouseover, mouseout, mousemove
12
31
  $('#poll1').click(function() {
13
- var currentVal = parseInt($(this).text(), 10);
32
+ var id = $(this).attr('data-id');
33
+ var url = '/topic/' + id + '/update_num';
14
- var newVal = currentVal + 1;
34
+ var params = {};
35
+ $.ajax({
36
+ type: 'POST',
37
+ dataType: 'json',
38
+ url: url,
39
+ data: params,
40
+ timeout: 5000
41
+ }).done(function(data, textStatus, jqXHR) {
15
- $(this).text(newVal);
42
+ $(this).text(data.num);
43
+ }).fail(function(jqXHR, textStatus, errorThrown) {
44
+ alert('エラーが発生しました');
45
+ });
16
46
  });
17
47
  });
18
48
  </script>
19
- ```
49
+ ```