回答編集履歴
3
コード追加
test
CHANGED
|
@@ -8,16 +8,38 @@
|
|
|
8
8
|
```javascript
|
|
9
9
|
$(function () {
|
|
10
10
|
$.ajax(
|
|
11
|
+
{ // remodal.js読み込み
|
|
12
|
+
url: './js/remodal.js',
|
|
13
|
+
dataType: 'script'
|
|
14
|
+
},
|
|
15
|
+
{ // datatables.min.js読み込み
|
|
16
|
+
url: './js/datatables.min.js',
|
|
17
|
+
dataType: 'script',
|
|
18
|
+
success: function () { $('#example').DataTable(); } // datatables.min.js読み込み成功時に実行
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
// または、
|
|
24
|
+
|
|
25
|
+
$(function () {
|
|
26
|
+
// remodal.js読み込み
|
|
27
|
+
$.ajax(
|
|
11
28
|
{
|
|
12
29
|
url: './js/remodal.js',
|
|
13
30
|
dataType: 'script'
|
|
14
31
|
},
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
// datatables.min.js読み込み
|
|
35
|
+
$.ajax(
|
|
15
36
|
{
|
|
16
37
|
url: './js/datatables.min.js',
|
|
17
38
|
dataType: 'script',
|
|
18
|
-
success: function () { $('#example').DataTable(); }
|
|
19
39
|
}
|
|
40
|
+
).done(function () { // datatables.min.js読み込み成功で実行
|
|
41
|
+
$('#example').DataTable();
|
|
20
|
-
)
|
|
42
|
+
})
|
|
21
43
|
});
|
|
22
44
|
```
|
|
23
45
|
|
|
@@ -46,9 +68,22 @@
|
|
|
46
68
|
{
|
|
47
69
|
url: 読み込みたいファイルのパス,
|
|
48
70
|
dataType: ファイルの種類,
|
|
49
|
-
success: 読み込み
|
|
71
|
+
success: 読み込み成功時に実行する処理
|
|
50
72
|
}
|
|
51
73
|
);
|
|
52
74
|
});
|
|
75
|
+
|
|
76
|
+
// または
|
|
77
|
+
|
|
78
|
+
$(function () {
|
|
79
|
+
$.ajax(
|
|
80
|
+
{
|
|
81
|
+
url: 読み込みたいファイルのパス,
|
|
82
|
+
dataType: ファイルの種類,
|
|
83
|
+
}
|
|
84
|
+
).done(function () {
|
|
85
|
+
// 読み込み成功時に実行する処理
|
|
86
|
+
})
|
|
87
|
+
});
|
|
53
88
|
```
|
|
54
89
|
↑のようにかくことで、読み込んだ後に処理ができるようです。
|
2
コード修正（document ready削除）
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
### コード例
|
|
8
8
|
```javascript
|
|
9
|
-
$(
|
|
9
|
+
$(function () {
|
|
10
10
|
$.ajax(
|
|
11
11
|
{
|
|
12
12
|
url: './js/remodal.js',
|
|
@@ -38,10 +38,10 @@
|
|
|
38
38
|
※remodalがエラーにならないのは、remodal.jsが読み込み完了してから、クリックボタンをおしているためです。
|
|
39
39
|
|
|
40
40
|
### 対策
|
|
41
|
-
「外部ファイルが読み込まれてから実
|
|
41
|
+
「外部ファイルが読み込まれてから実行する」ことができるのが非同期処理のajax()だそうです。
|
|
42
42
|
|
|
43
43
|
```javascript
|
|
44
|
-
$(
|
|
44
|
+
$(function () {
|
|
45
45
|
$.ajax(
|
|
46
46
|
{
|
|
47
47
|
url: 読み込みたいファイルのパス,
|
1
誤字修正
test
CHANGED
|
@@ -22,14 +22,14 @@
|
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
### 不具合の原因
|
|
25
|
-
コードやファイルは基本的に上から順番に読み込まれ実
|
|
25
|
+
コードやファイルは基本的に上から順番に読み込まれ実行されていきます。
|
|
26
26
|
質問者様の不具合コードの処理内容を見ますと、
|
|
27
27
|
|
|
28
|
-
- １）jQueryを読み込み、実
|
|
28
|
+
- １）jQueryを読み込み、実行する
|
|
29
|
-
- ２）script.jsを読み込み、実
|
|
29
|
+
- ２）script.jsを読み込み、実行する
|
|
30
|
-
- ２−１）headにremodal.jsとdatatables.min.jsのスクリプトタグを生成
|
|
30
|
+
- ２−１）headにremodal.jsとdatatables.min.jsのスクリプトタグを生成 ※生成しただけで読み込んではいない
|
|
31
|
-
- ２−２）`$('#example').DataTable()`を実行
|
|
31
|
+
- ２−２）`$('#example').DataTable()`を実行 ←エラー！
|
|
32
|
-
- ３）生成されたremodal.jsとdatatables.min.jsが読み込まれ、実
|
|
32
|
+
- ３）生成されたremodal.jsとdatatables.min.jsが読み込まれ、実行される
|
|
33
33
|
|
|
34
34
|
２−１の段階ではまだこれら外部ファイルは読み込まれておらず、２−２の段階でDataTables()なんてしりませんなにそれ！というエラーがでています。
|
|
35
35
|
|