質問編集履歴
3
タイトルにDjangoを入れ忘れていました
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Ajax通信でブラウザの一部を更新しようとしたら、JSONの生データが表示される
|
|
1
|
+
Django+Ajax通信でブラウザの一部を更新しようとしたら、JSONの生データが表示される
|
test
CHANGED
|
File without changes
|
2
ajaxで使用するURLとmethodの変数を間違えていたため修正したところ、生データと一緒にエラーが表示されるようになりました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
Ajaxでデータを送ってDjangoで処理したあとに、ページの一部（includeタグで取り込んだテンプレート）を更新したいのですが、とりあえずコンソールに送られてきたデータを表示させようと思っていました。
|
|
5
5
|
しかし、ブラウザには元のページではなく送られてきたJSONの生データが表示されてしまいます。
|
|
6
|
-
エラーがある場合はコンソールにエラーを表示させるようにしているのですが、コンソールにはエラー等は表示されません。
|
|
6
|
+
~~エラーがある場合はコンソールにエラーを表示させるようにしているのですが、コンソールにはエラー等は表示されません。~~
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
JSONの`error:false`は、Djangoに送られたデータにバリデーションエラーがある場合には`error:true`を表示させるようにしているため。
|
|
@@ -19,7 +19,9 @@
|
|
|
19
19
|
|
|
20
20
|
### 発生している問題・エラーメッセージ
|
|
21
21
|
|
|
22
|
-
エラーは表示されていません。
|
|
22
|
+
~~エラーは表示されていません。~~
|
|
23
|
+
jqXHR : {"readyState":0,"status":0,"statusText":"error"}
|
|
24
|
+
errorThrown : undefined
|
|
23
25
|
|
|
24
26
|
### 該当のソースコード
|
|
25
27
|
```models.py
|
|
@@ -129,6 +131,9 @@
|
|
|
129
131
|
<li class="nav-item">
|
|
130
132
|
<a href="#tab_today" id="a_tab_today" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="true">当日来店情報</a>
|
|
131
133
|
</li>
|
|
134
|
+
<li class="nav-item">
|
|
135
|
+
<a href="#tab_today" id="a_tab_today" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="true">過去の来店情報</a>
|
|
136
|
+
</li>
|
|
132
137
|
</ul>
|
|
133
138
|
<!-- タブの中身 -->
|
|
134
139
|
<div id ="tab_contents" class="tab-content">
|
|
@@ -144,6 +149,12 @@
|
|
|
144
149
|
{% include "app_records/tab_record_create.html" %}
|
|
145
150
|
</div>
|
|
146
151
|
</div>
|
|
152
|
+
<!--過去の来店情報-->
|
|
153
|
+
<div id="tab_post" class="tab-pane" role="tabpanel" aria-labelledby="a_tab_post">
|
|
154
|
+
<div class="container">
|
|
155
|
+
{% include "app_records/tab_post_record.html" %}
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
147
158
|
</div>
|
|
148
159
|
</main>
|
|
149
160
|
</div>
|
|
@@ -158,56 +169,10 @@
|
|
|
158
169
|
~省略~
|
|
159
170
|
|
|
160
171
|
//過去の来店情報の参照機能
|
|
161
|
-
//タブを閉じるボタン設定
|
|
162
|
-
var j = 0;
|
|
163
|
-
$(function () {
|
|
164
|
-
$(document).on("click", ".btn_del", function () {
|
|
165
|
-
console.log("テスト")
|
|
166
|
-
|
|
167
|
-
var id = $(this).parent().attr("id");
|
|
168
|
-
var cut_id = id.substr(id.indexOf('_') + 1);
|
|
169
|
-
var outer_id = "#tab" + cut_id;
|
|
170
|
-
var inner_id = "#tab_" + cut_id;
|
|
171
|
-
$(outer_id).removeClass("active"),
|
|
172
|
-
$(inner_id).removeClass("active"),
|
|
173
|
-
$(outer_id).remove(),
|
|
174
|
-
$(inner_id).remove(),
|
|
175
|
-
$("#a_tab_info").addClass("active"),
|
|
176
|
-
$("#tab_info").addClass("active");
|
|
177
|
-
j--;
|
|
178
|
-
});
|
|
179
|
-
});
|
|
180
|
-
|
|
181
172
|
//日付を取得しajaxでviews.pyに送って処理する
|
|
182
173
|
//返ってきた値を参照して動的にタブを追加する（タブは5つまで追加可能）
|
|
183
174
|
$(function () {
|
|
184
175
|
$("#add_tabs").on("click", function () {
|
|
185
|
-
if (j < 5) {
|
|
186
|
-
j++;
|
|
187
|
-
var visitedDate = $("#txt_visitedDate").val(); // テキストボックスのvalue値を取得
|
|
188
|
-
// console.log(visitedDate);
|
|
189
|
-
//新しいタブを開く
|
|
190
|
-
$("#tab_elements").append(
|
|
191
|
-
$($("<li/>").attr("class", "nav-item")).append(
|
|
192
|
-
$("<a>"+visitedDate+"</a>").each(function(){
|
|
193
|
-
$(this).attr("href", "#tab_"+j);
|
|
194
|
-
$(this).attr("id", "tab"+j);
|
|
195
|
-
$(this).attr("class", "nav-link");
|
|
196
|
-
$(this).attr("role", "tab");
|
|
197
|
-
$(this).attr("data-bs-toggle", "tab");
|
|
198
|
-
$(this).attr("aria-selected", "true");
|
|
199
|
-
})
|
|
200
|
-
)),
|
|
201
|
-
|
|
202
|
-
$('#tab_contents').append(
|
|
203
|
-
$($("<div/>").each(function(){
|
|
204
|
-
$(this).attr("id", "tab_"+j);
|
|
205
|
-
$(this).attr("class", "tab-pane");
|
|
206
|
-
$(this).attr("role", "tabpanel");
|
|
207
|
-
$(this).attr("aria-labelledby", "tab"+j);
|
|
208
|
-
})).append(`<div class="content_area">{% include "app_records/tab_post_record.html" %}</div>`, '<input type="text" name="content"/><input type="submit" class="btn_del" value="タブを閉じる">')
|
|
209
|
-
);
|
|
210
|
-
|
|
211
176
|
$.ajaxSetup({
|
|
212
177
|
~省略~
|
|
213
178
|
});
|
|
@@ -235,10 +200,13 @@
|
|
|
235
200
|
//$("#content_area").html(data.content);
|
|
236
201
|
console.log(data.content)
|
|
237
202
|
}
|
|
238
|
-
}).fail(function(
|
|
203
|
+
}).fail( function(jqXHR, textStatus, errorThrown) {
|
|
204
|
+
console.log("ajax通信に失敗しました");
|
|
205
|
+
console.log("jqXHR : " + JSON.stringify(jqXHR));
|
|
206
|
+
console.log("textStatus : " + textStatus); // タイムアウト、パースエラー
|
|
207
|
+
console.log("errorThrown : " + errorThrown.message);
|
|
239
|
-
console.log(
|
|
208
|
+
console.log("URL : " + url);
|
|
240
209
|
});
|
|
241
|
-
};
|
|
242
210
|
};
|
|
243
211
|
});
|
|
244
212
|
});
|
|
@@ -251,45 +219,45 @@
|
|
|
251
219
|
<!--初診情報と来院情報-->
|
|
252
220
|
<div class="row">
|
|
253
221
|
|
|
254
|
-
|
|
222
|
+
<!--左側-->
|
|
255
|
-
|
|
223
|
+
<div class="col">
|
|
256
|
-
|
|
224
|
+
<div class="card border-0">
|
|
257
|
-
|
|
225
|
+
<div class="card-body">
|
|
258
|
-
|
|
226
|
+
<div class="row">
|
|
259
|
-
|
|
227
|
+
<div class="col-4">
|
|
260
|
-
|
|
228
|
+
<div class="form-floating mb-3">
|
|
261
|
-
|
|
229
|
+
<input type="text" class="form-control" readonly="readonly" id="zip" value="{{ object.name|default:'-' }}">
|
|
262
|
-
|
|
230
|
+
<label for="zip">氏名</label>
|
|
263
|
-
|
|
231
|
+
</div>
|
|
264
|
-
|
|
232
|
+
</div>
|
|
265
|
-
|
|
233
|
+
<div class="col-8">
|
|
266
|
-
|
|
234
|
+
<div class="form-floating mb-3">
|
|
267
|
-
|
|
235
|
+
<input type="text" class="form-control" readonly="readonly" id="address" value="{{ object.name_kana|default:'-' }}">
|
|
268
|
-
|
|
236
|
+
<label for="address">シメイ</label>
|
|
269
|
-
|
|
237
|
+
</div>
|
|
270
|
-
|
|
238
|
+
</div>
|
|
271
|
-
</div>
|
|
272
|
-
</div>
|
|
273
239
|
</div>
|
|
240
|
+
</div>
|
|
274
241
|
</div>
|
|
275
|
-
|
|
242
|
+
</div>
|
|
243
|
+
|
|
276
|
-
|
|
244
|
+
<!--右側-->
|
|
277
|
-
|
|
245
|
+
<div class="col">
|
|
278
|
-
|
|
246
|
+
<div class="card border-0">
|
|
279
|
-
|
|
247
|
+
<div class="card-body">
|
|
280
|
-
|
|
248
|
+
<div class="card border-0 mb-3">
|
|
281
|
-
|
|
249
|
+
<p>来店履歴</p>
|
|
282
|
-
|
|
250
|
+
<div class="mb-2" id="datepicker_post_record"></div>
|
|
283
|
-
|
|
251
|
+
<form id="form_visitedDate" action="" method="POST">
|
|
284
|
-
|
|
252
|
+
{% csrf_token %}
|
|
285
|
-
|
|
253
|
+
<input type="text" name="Visited_date" class="form-control col-4 mb-2" id="txt_visitedDate" readonly="readonly" required="">
|
|
286
|
-
|
|
254
|
+
<!--クリックでJquery-->
|
|
287
|
-
|
|
255
|
+
<input class="col-4" type="submit" id="add_tabs" name="add_tabs" value="過去の来店情報を開く">
|
|
288
|
-
|
|
256
|
+
</form>
|
|
289
|
-
|
|
257
|
+
</div>
|
|
290
|
-
|
|
258
|
+
</div>
|
|
291
|
-
|
|
259
|
+
</div>
|
|
292
|
-
|
|
260
|
+
</div>
|
|
293
261
|
|
|
294
262
|
</div>
|
|
295
263
|
```
|
1
ajaxで使用するurlとmethodの変数を間違えていました。しかし、修正後にも症状は変わらずで、ステータス0を表示しています。cookieを削除してみましたが変わりませんでした。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -216,8 +216,8 @@
|
|
|
216
216
|
function post_date() {
|
|
217
217
|
const form_element = "#form_visitedDate";
|
|
218
218
|
const data = new FormData( $(form_element).get(0) )
|
|
219
|
-
const url = $(form_elem).prop("action");
|
|
219
|
+
const url = $(form_element ).prop("action");
|
|
220
|
-
const method = $(form_elem).prop("method")
|
|
220
|
+
const method = $(form_element ).prop("method")
|
|
221
221
|
|
|
222
222
|
$.ajax({
|
|
223
223
|
url: url,
|
|
@@ -297,8 +297,8 @@
|
|
|
297
297
|
|
|
298
298
|
### 試したこと
|
|
299
299
|
|
|
300
|
-
|
|
300
|
+
恐らくページ全体の更新が入ってるのかなと考えています。
|
|
301
|
-
Ajaxの`URL`が違うのかと思い、
|
|
301
|
+
Ajaxの`URL`が違うのかと思い、他のhtmlファイルや一応`view.py`を指定してみたがダメ。
|
|
302
302
|
|
|
303
303
|
参考にしたサイト
|
|
304
304
|
https://noauto-nolife.com/post/django-ajax/
|