質問編集履歴
4
jqueryを$(function () {でラップ
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -37,11 +37,13 @@
|
|
|
37
37
|
<div id="form_title">モーダルの中身です。</div>
|
|
38
38
|
|
|
39
39
|
<script>
|
|
40
|
+
$(function () {
|
|
40
41
|
$('.open_modal').on('click', function () {
|
|
41
42
|
id = $(this).data('kind');
|
|
42
43
|
$('#overlay').fadeIn();
|
|
43
44
|
$('#form_' + id).fadeIn();
|
|
44
45
|
});
|
|
46
|
+
});
|
|
45
47
|
</script>
|
|
46
48
|
```
|
|
47
49
|
### 移動後
|
|
@@ -54,10 +56,12 @@
|
|
|
54
56
|
```
|
|
55
57
|
```js
|
|
56
58
|
//app/javascript/packs/application.js
|
|
59
|
+
$(function () {
|
|
57
|
-
$('.open_modal').on('click', function () {
|
|
60
|
+
$('.open_modal').on('click', function () {
|
|
58
|
-
|
|
61
|
+
id = $(this).data('kind');
|
|
59
|
-
|
|
62
|
+
$('#overlay').fadeIn();
|
|
60
|
-
|
|
63
|
+
$('#form_' + id).fadeIn();
|
|
64
|
+
});
|
|
61
65
|
});
|
|
62
66
|
```
|
|
63
67
|
|
3
jqueryの記述を修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -41,7 +41,6 @@
|
|
|
41
41
|
id = $(this).data('kind');
|
|
42
42
|
$('#overlay').fadeIn();
|
|
43
43
|
$('#form_' + id).fadeIn();
|
|
44
|
-
$('#form_' + id).find('textarea').focus();
|
|
45
44
|
});
|
|
46
45
|
</script>
|
|
47
46
|
```
|
|
@@ -59,7 +58,6 @@
|
|
|
59
58
|
id = $(this).data('kind');
|
|
60
59
|
$('#overlay').fadeIn();
|
|
61
60
|
$('#form_' + id).fadeIn();
|
|
62
|
-
$('#form_' + id).find('textarea').focus();
|
|
63
61
|
});
|
|
64
62
|
```
|
|
65
63
|
|
2
application.jsのパスを修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
## 発生している問題
|
|
2
|
-
erbファイル内の`<script>`タグ内に記述したJavaScriptを`app/javascript/application.js`に移動した時、一部のコードが動作しなくなる
|
|
2
|
+
erbファイル内の`<script>`タグ内に記述したJavaScriptを`app/javascript/packs/application.js`に移動した時、一部のコードが動作しなくなる
|
|
3
3
|
|
|
4
4
|
## 移動しても動作するパターン
|
|
5
5
|
### 移動前
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
</div>
|
|
22
22
|
```
|
|
23
23
|
```js
|
|
24
|
-
//app/javascript/application.js
|
|
24
|
+
//app/javascript/packs/application.js
|
|
25
25
|
$(function () {
|
|
26
26
|
$("#hoge").css("color", "blue");
|
|
27
27
|
});
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
<div id="form_title">モーダルの中身です。</div>
|
|
55
55
|
```
|
|
56
56
|
```js
|
|
57
|
-
//app/javascript/application.js
|
|
57
|
+
//app/javascript/packs/application.js
|
|
58
58
|
$('.open_modal').on('click', function () {
|
|
59
59
|
id = $(this).data('kind');
|
|
60
60
|
$('#overlay').fadeIn();
|
1
application.html.jsのheadタグの記述を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -66,4 +66,18 @@
|
|
|
66
66
|
どちらも同じようにコードをerbからjsに移動しているだけなのですが、なぜか片方が動いて片方が動きません。
|
|
67
67
|
何かアドバイスをいただけると嬉しいです。
|
|
68
68
|
|
|
69
|
-
どうぞよろしくお願いいたします。
|
|
69
|
+
どうぞよろしくお願いいたします。
|
|
70
|
+
|
|
71
|
+
## 追記
|
|
72
|
+
```erb
|
|
73
|
+
# app/views/layouts/application.html.erb
|
|
74
|
+
<head>
|
|
75
|
+
<title><%= full_title(yield(:title)) %></title>
|
|
76
|
+
<meta name="viewport" content="width=device-width">
|
|
77
|
+
<%= csrf_meta_tags %>
|
|
78
|
+
<%= csp_meta_tag %>
|
|
79
|
+
<%= favicon_link_tag('other/favicon_bgw.png') %>
|
|
80
|
+
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
|
|
81
|
+
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
|
|
82
|
+
</head>
|
|
83
|
+
```
|