回答編集履歴

8

テキスト追加

2015/07/28 19:09

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
 
38
38
 
39
- while の中で、たとえば
39
+ forループの中で、たとえば
40
40
 
41
41
   mark_question(id, answer, 1);
42
42
 

7

テキスト追加

2015/07/28 19:09

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -194,12 +194,18 @@
194
194
 
195
195
 
196
196
 
197
- 上記のq13514-improved.htmlを作成して以下に上げました。
197
+ 上記のq13514-improved.htmlとapi.phpを作成して以下に上げました。
198
+
199
+
198
200
 
199
201
  [http://www.gattolibero.sakura.ne.jp/teratail/q13514-improved.html](http://www.gattolibero.sakura.ne.jp/teratail/q13514-improved.html)
200
202
 
201
203
 
202
204
 
205
+ [http://www.gattolibero.sakura.ne.jp/teratail/api.php](http://www.gattolibero.sakura.ne.jp/teratail/api.php)
206
+
207
+
208
+
203
209
  click me ! をクリックすると、AJAXのレスポンスの順番が、
204
210
 
205
211
  ループの順にならなくても、リストの表示としては順番に

6

テキスト追加

2015/07/27 12:36

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -120,7 +120,7 @@
120
120
 
121
121
  console.log("ok:" + n );
122
122
 
123
- $('.result li:nth-child(' + n + ')').text(n);
123
+ $('.result li:nth-child(' + n + ')').text(n).css({display: 'block'});
124
124
 
125
125
  }
126
126
 
@@ -138,7 +138,7 @@
138
138
 
139
139
  for (var i = 1; i < 26; i ++) {
140
140
 
141
- $('.result').append($('<li>'));
141
+ $('.result').append($('<li>').css({display: 'none'}));
142
142
 
143
143
  }
144
144
 

5

テキスト追加

2015/07/27 12:34

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -76,7 +76,7 @@
76
76
 
77
77
 
78
78
 
79
- ・APIを呼び出す直前に、内容が空の25個の<li>を作成する。
79
+ ・APIを呼び出す直前に、内容が空の25個の<li>を作成する。
80
80
 
81
81
 
82
82
 

4

テキスト追加

2015/07/27 12:23

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  ---
28
28
 
29
- 追記1
29
+ **追記1**
30
30
 
31
31
 
32
32
 
@@ -64,7 +64,9 @@
64
64
 
65
65
  ---
66
66
 
67
- 追記2
67
+ **追記2**
68
+
69
+
68
70
 
69
71
 
70
72
 

3

テキスト追加

2015/07/27 12:21

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -26,7 +26,9 @@
26
26
 
27
27
  ---
28
28
 
29
- 追記
29
+ 追記1
30
+
31
+
30
32
 
31
33
 
32
34
 
@@ -60,4 +62,148 @@
60
62
 
61
63
 
62
64
 
63
-
65
+ ---
66
+
67
+ 追記2
68
+
69
+
70
+
71
+ ちょっと応急的な手法になるかと思いますが、
72
+
73
+ こんな方法を考えてみました。
74
+
75
+
76
+
77
+ ・APIのを呼び出す直前に、内容が空の25個の<li>を作成する。
78
+
79
+
80
+
81
+ ・その後、ループでAPIを呼び、呼び出し回数に応じた位置の<li>の内容を書き換える。
82
+
83
+
84
+
85
+ 以下サンプルコードになります。
86
+
87
+
88
+
89
+ **q13514-improved.html**:
90
+
91
+ ```javascript
92
+
93
+ <!DOCTYPE html>
94
+
95
+ <html>
96
+
97
+ <head>
98
+
99
+ <meta charset="UTF-8">
100
+
101
+ <title>teratail/q13514-improved</title>
102
+
103
+ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
104
+
105
+ <script>
106
+
107
+ function call_api(n) {
108
+
109
+ $.ajax({
110
+
111
+ type: 'GET',
112
+
113
+ url: 'api.php',
114
+
115
+ dataType: 'json',
116
+
117
+ success: function(json){
118
+
119
+ console.log("ok:" + n );
120
+
121
+ $('.result li:nth-child(' + n + ')').text(n);
122
+
123
+ }
124
+
125
+ });
126
+
127
+ }
128
+
129
+
130
+
131
+ function make_items()
132
+
133
+ {
134
+
135
+ // まず、内容が空のリストアイテムを25個作成
136
+
137
+ for (var i = 1; i < 26; i ++) {
138
+
139
+ $('.result').append($('<li>'));
140
+
141
+ }
142
+
143
+
144
+
145
+ // 25 回 AJAX を行い、回数に応じた位置の li の内容を書き換える。
146
+
147
+ for (var i = 1; i < 26; i ++) {
148
+
149
+ call_api(i);
150
+
151
+ }
152
+
153
+ }
154
+
155
+ </script>
156
+
157
+ </head>
158
+
159
+ <body>
160
+
161
+ <ul class="result"></ul>
162
+
163
+ <hr />
164
+
165
+ <a href="" onclick="make_items(); return(false);">click me !</a>
166
+
167
+ </body>
168
+
169
+ </html>
170
+
171
+ ```
172
+
173
+
174
+
175
+ api.php はとりあえず以下のように、空のJSONを返すだけのものです。
176
+
177
+
178
+
179
+ **api.php**:
180
+
181
+ ```php
182
+
183
+ <?php
184
+
185
+ header("Content-Type: application/json; charset=utf-8");
186
+
187
+
188
+
189
+ echo '{}';
190
+
191
+ ```
192
+
193
+
194
+
195
+ 上記のq13514-improved.htmlを作成して以下に上げました。
196
+
197
+ [http://www.gattolibero.sakura.ne.jp/teratail/q13514-improved.html](http://www.gattolibero.sakura.ne.jp/teratail/q13514-improved.html)
198
+
199
+
200
+
201
+ click me ! をクリックすると、AJAXのレスポンスの順番が、
202
+
203
+ ループの順にならなくても、リストの表示としては順番に
204
+
205
+ なります。
206
+
207
+
208
+
209
+

2

テキスト修正

2015/07/27 12:18

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -1,106 +1,14 @@
1
1
  こんにちは。
2
+
3
+
2
4
 
3
5
  検証のため、以下の2つのHTMLを作成しました。
4
6
 
5
7
 
6
8
 
7
- (1) **q13514-for.html**
8
-
9
- ```javascript
10
-
11
- <!DOCTYPE html>
12
-
13
- <html>
14
-
15
- <head>
16
-
17
- <meta charset="UTF-8">
18
-
19
- <title>teratail/q13514-for</title>
20
-
21
- <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
9
+ (1) [http://www.gattolibero.sakura.ne.jp/teratail/q13514-for.html](http://www.gattolibero.sakura.ne.jp/teratail/q13514-for.html)
22
-
23
- <script>
24
-
25
- $(function() {
26
-
27
- for (var i = 1; i < 26; i++) {
28
-
29
- $('.result').append('<li>' + i + '</li>');
30
-
31
- }
32
-
33
- });
34
-
35
- </script>
36
-
37
- </head>
38
-
39
- <body>
40
-
41
- <ul class="result"></ul>
42
-
43
- </body>
44
-
45
- </html>
46
-
47
- ```
48
10
 
49
11
 
50
-
51
- (2) **q13514-while.html**
52
-
53
- ```javascript
54
-
55
- <!DOCTYPE html>
56
-
57
- <html>
58
-
59
- <head>
60
-
61
- <meta charset="UTF-8">
62
-
63
- <title>teratail/q13514ーwhile</title>
64
-
65
- <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
66
-
67
- <script>
68
-
69
- $(function() {
70
-
71
- var i = 1;
72
-
73
- while (i < 26) {
74
-
75
- $('.result').append('<li>' + i + '</li>');
76
-
77
- i++;
78
-
79
- }
80
-
81
- });
82
-
83
- </script>
84
-
85
- </head>
86
-
87
- <body>
88
-
89
- <ul class="result"></ul>
90
-
91
- </body>
92
-
93
- </html>
94
-
95
- ```
96
-
97
-
98
-
99
- 次に、これらを以下のURLでアクセス可能なサーバーに上げました。
100
-
101
-
102
-
103
- (1) [http://www.gattolibero.sakura.ne.jp/teratail/q13514-for.html](http://www.gattolibero.sakura.ne.jp/teratail/q13514-for.html)
104
12
 
105
13
  (2) [http://www.gattolibero.sakura.ne.jp/teratail/q13514-while.html](http://www.gattolibero.sakura.ne.jp/teratail/q13514-while.html)
106
14
 

1

テキスト追加

2015/07/27 11:27

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -113,3 +113,43 @@
113
113
  なので、問題解決のために、ループの中のAJAXも含む、HTMLと
114
114
 
115
115
  javascriptのコード全体を追記して頂ければと思います。
116
+
117
+
118
+
119
+ ---
120
+
121
+ 追記
122
+
123
+
124
+
125
+ AJAXを行っているコードをざっと読みました。
126
+
127
+
128
+
129
+ while の中で、たとえば
130
+
131
+  mark_question(id, answer, 1);
132
+
133
+  mark_question(id, answer, 2);
134
+
135
+ の2つが、この順で呼ばれますが、それぞれの中で行っているAJAX通信での
136
+
137
+ レスポンスが、この順で返ってくるとは限りません。
138
+
139
+ したがって、
140
+
141
+  mark_question(id, answer, 2);
142
+
143
+ でのAJAXのレスポンスが先に返ってきて処理されたら、作られる
144
+
145
+ リストアイテムは
146
+
147
+  <li>2</li>
148
+
149
+  <li>1</li>
150
+
151
+ の順になります。
152
+
153
+
154
+
155
+