回答編集履歴

2

コメント追加

2017/08/31 09:39

投稿

Tomak
Tomak

スコア1652

test CHANGED
@@ -86,13 +86,17 @@
86
86
 
87
87
 
88
88
 
89
+ // 画像・プルダウン追加
90
+
89
91
  $('#image-files ul')
90
92
 
91
93
  .append($img)
92
94
 
93
- .append(res.category).end()
95
+ .append(res.category);
94
96
 
95
97
 
98
+
99
+ // テキストエリア・削除ボタン追加
96
100
 
97
101
  $('#image-files div')
98
102
 

1

コード追加分による修正

2017/08/31 09:39

投稿

Tomak
Tomak

スコア1652

test CHANGED
@@ -18,97 +18,41 @@
18
18
 
19
19
 
20
20
 
21
- **■こんな感じの仕様にする**
22
-
23
-
24
-
25
- Ajax通信完了時のPHP側からの戻り値のJSONに、すべての情報を入れて返すようにする。
26
-
27
-
28
-
29
- - 画像パス
30
-
31
- - 画像ID
32
-
33
- - プルダウンオプション情報
34
-
35
-
36
-
37
- ```json
38
-
39
- {
40
-
41
- 'img' : 画像パス,
42
-
43
- 'img_id' : 画像ID,
44
-
45
- 'category' : プルダウンHTML
46
-
47
- }
48
-
49
- ```
50
-
51
-
52
-
53
- プルダウンをJavaScriptで生成したい場合は下記のようにします。
54
-
55
- どちらを採用するかの判断は、**メンテナンス性、拡張性**を考えて決めます。
56
-
57
-
58
-
59
- ```json
60
-
61
- {
62
-
63
- 'img' : 画像パス,
64
-
65
- 'img_id' : 画像ID,
66
-
67
- 'category' : [{'値':'ラベル'],,,]
68
-
69
- }
70
-
71
- ```
72
-
73
-
74
-
75
21
  Ajax通信の戻り値を返すPHPのアクションコントローラーは下記のようにします。
76
22
 
77
23
 
78
24
 
79
25
  ```php
80
26
 
81
- class Controller_XXX
27
+ // 画像を出力
82
28
 
83
- {
29
+ $json = array();
84
30
 
85
- public function get_ajax ()
31
+ $json['img'] = "data:" . $mimeTypeStr . ";base64," . $imageFile;
86
32
 
87
- {
88
-
89
- $resp = array(
90
-
91
- 'img' => '画像パス',
92
-
93
- 'img_id' => '画像ID',
33
+ $json['img_id'] = $piy_post->img_id;
94
-
95
- 'category' => \Form::select("category","",$channel_list),
96
-
97
- );
98
34
 
99
35
 
100
36
 
101
- return json_encode($resp);
37
+ // ↓ここ追加
102
38
 
103
- }
39
+ // プルダウンオプションタグ連想配列取得
104
40
 
41
+ $channel_list = なんかクラス::getChannelList();
42
+
43
+ $json['category'] = \Form::select("category","",$channel_list);
44
+
45
+
46
+
105
- }
47
+ // 画像を出力
48
+
49
+ echo json_encode($json,JSON_UNESCAPED_UNICODE);
106
50
 
107
51
  ```
108
52
 
109
53
 
110
54
 
111
- 続いて、JavaScriptは下記のように設定してデータタイプを`json`に設定しておきます。HTML構造がよくわかなかったので、`append()`の結果が違うかもしれません。違っていたら適宜変更してください。
55
+ 続いて、JavaScriptは下記のように設定して`dataType`を`json`に設定しておきます。HTML構造がよくわかなかったので、`append()`の結果が違うかもしれません。違っていたら適宜変更してください。
112
56
 
113
57
 
114
58
 
@@ -116,62 +60,60 @@
116
60
 
117
61
  $.ajax({
118
62
 
119
- url : '/XXX/ajax',
63
+ url: "/hogehoge/add",
120
64
 
121
- type : 'post',
65
+ type: 'POST',
122
66
 
123
- dataType : 'json',
67
+ dataType: 'json', //text → jsonに変更
124
68
 
125
- timeout : 60000
69
+ data: formData,
126
70
 
127
- })
71
+ cache: false,
128
72
 
129
- .done(function (res) {
73
+ contentType: false,
130
74
 
75
+ processData: false,
76
+
77
+ ...
78
+
131
- var $imgFiles = $('#image-files');
79
+ success: function(res) {
80
+
81
+ var $img = $('<img class="imgView" src="'+ res.img +'" data-imgid="'+ res.img_id +'" />');
82
+
83
+ var $txtArea = $('<textarea name="body['+ res.img_id +']" size="30" maxlength="140" data-imgid="'+ res.img_id +'">'+"\n"+'</textarea>');
84
+
85
+ var $delBtn = $('<input type="button" name="'+ res.img_id +'" value="削除" class="deleteBtn" data-imgid="'+ res.img_id +'"');
132
86
 
133
87
 
134
88
 
135
- var $img = $('<img class="imgView" src="'+ res.img +'" data-imgid="'+ res.img_id +'" />');
89
+ $('#image-files ul')
136
90
 
137
- var $txtArea = $('<textarea name="body['+ res.img_id +']" size="30" maxlength="140" data-imgid="'+ res.img_id +'">'+"\n"+'</textarea>');
91
+ .append($img)
138
92
 
139
- var $delBtn = $('<input type="button" name="'+ res.img_id +'" value="削除" class="deleteBtn" data-imgid="'+ res.img_id +'"');
93
+ .append(res.category).end()
140
94
 
141
95
 
142
96
 
143
- $('#image-files ul')
97
+ $('#image-files div')
144
98
 
145
- .append($img)
99
+ .append($txtArea)
146
100
 
147
- .append(res.category);
101
+ .append($delBtn);
148
102
 
149
103
 
150
104
 
151
- $('#image-files div')
105
+ $('#submitBtn').removeAttr('disabled');
152
-
153
- .append($txtArea)
154
-
155
- .append($delBtn);
156
106
 
157
107
 
158
108
 
159
- $('#submitBtn').removeAttr('disabled');
109
+ if ($("#image-files ul img").length > 10){
160
110
 
111
+ $('#submitBtn').prop('disabled', true);
161
112
 
113
+ }
162
114
 
163
- if ($("#image-files ul img").length > 10){
115
+ },
164
116
 
165
- $('#submitBtn').prop('disabled', true);
166
-
167
- }
168
-
169
- })
170
-
171
- .fail(function (xhr, status) {
172
-
173
- console.log(xhr, status);
174
-
175
- });
117
+ ...
176
118
 
177
119
  ```