質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

1551閲覧

Ajax通信で同ページ内にiframe要素があると機能しなくなる現象について。Djangoにてアプリを作成中。

shuya-tamaru

総合スコア26

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2022/05/09 03:06

編集2022/05/10 12:25

前提

Djangoにて、ajax通信を用いてform内容を非同期でPOSTする機能を実装中。
実装は無事できまして、formに入力した内容を問題なくデータベースに登録することができました。

しかし、formを入力するページ内にiframe要素を入れると、ajax通信が機能しなくなる。
現状ではiframe要素には、ただ別のサイトを表示させているだけでそれ以外のことは何も行っておらず、iframe要素が同じページに存在しているだけで、ajax通信が機能しなくなってしまう原因がわからず苦戦しております。

プログラミング初心者です、基本的な内容で恐縮ですがご教授いただけますと幸いです。

実現したいこと

iframe要素が同ページ内にあっても非同期でPOSTできる様に実装したい。
何故iframe要素があるとajax通信が上手くいかないのかを理解したい。

発生している問題・エラーメッセージ

エラーは発生しませんが、Django内のファイルviews.pyでif request.is_ajax(): がfalseだと、formの内容をSAVEせずに、renderする様にしているので、renderされてします。

該当のソースコード

python:views.py

1from .forms import CommentCreateForm 2from .models import Comment 3from django.http import JsonResponse 4 5def photo_add_view(request): 6 form = CommentCreateForm(request.POST or None) 7 data = {} 8 if request.is_ajax():  #←iframe要素が同ページ内にあると、ここがfalseになってしまう。iframe要素がなければ問題なく実装できております。 9 if form.is_valid(): 10 form.save() 11 data['title']= form.cleaned_data.get('title') 12 data['status']= 'ok' 13 return JsonResponse(data) 14 context = { 15 'form': form, 16 } 17 return render(request, 'building/main.html', context) 18 19以下、当該機能と関係ないため省略 20・・・・・ 21

HTML:base.html

1{% load static %} 2 3<!doctype html> 4<html lang="ja"> 5 <head> 6 <title>モデルビューアー</title> 7 <!-- Required meta tags --> 8 <meta charset="utf-8"> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10 11 <!-- Bootstrap CSS --> 12 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 13 14 </head> 15 <body> 16 <div class='container mt-3'></div> 17 {% block content %} 18 {% endblock %} 19 20 <!-- Optional JavaScript --> 21 <script type="text/javascript" src="{% static 'javascript/comment.js' %}"></script> 22 23 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 24 <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> 25 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 26 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 27 </body> 28</html> 29

HTML:main.html

1{% extends 'building/base.html' %} 2{% load crispy_forms_tags %} 3 4{% block content %} 5 6<div class='mt-3'> 7 <div id='alert-box'></div> 8 <form id='p-form' autocomplete="off"> 9 {% csrf_token %} 10 {{form|crispy}} 11 <button type='submit' class='btn btn-primary'>Send</button> 12 </form> 13 <div> 14 <iframe id="viewer" 15 title="viewer" 16 width="100px" 17 height="100px" 18 src="適当なURL"> 19 </div> 20</div> 21{% endblock %}

Javascript:comment.js

1const alertBox = document.getElementById('alert-box'); 2const form = document.getElementById('p-form'); 3 4const title = document.getElementById('id_title'); 5const text = document.getElementById('id_text'); 6const cordinate = document.getElementById('id_cordinate'); 7const csrf = document.getElementsByName('csrfmiddlewaretoken'); 8const url = ''; 9 10const handleAlerts = (type,text) => { 11 alertBox.innerHTML = `<div class="alert alert-${type}" role="alert"> 12 ${text} 13 </div>` 14} 15 16form.addEventListener('submit',e=>{ 17 e.preventDefault() 18 const fd = new FormData(); 19 fd.append('csrfmiddlewaretoken', csrf[0].value); 20 fd.append('title', title.value); 21 fd.append('text', text.value); 22 fd.append('cordinate', cordinate.value); 23 24 $.ajax({ 25 type: 'POST', 26 enctype: 'multipart/form-data', 27 data: fd, 28 success: function(response){ 29 console.log(response); 30 const sText = `succeccfully saved ${response.title}` 31 handleAlerts('success', sText) 32 setTimeout(()=>{ 33 alertBox.innerHTML='' 34 title.value = '' 35 text.value = '' 36 cordinate.value = '' 37 },2000) 38 }, 39 error: function(error){ 40 handleAlerts('danger', 'upps..somthing went wrong') 41 }, 42 cache: false, 43 contentType: false, 44 processData: false, 45 }) 46});

試したこと

①CSRF関連の原因かと思い、調べてみたのですがそれっぽい情報を取得することができませんでした。
②iframeで表示しているサイト側の問題の可能性について。現状は自分自身がゲームエンジンで作成した物(静的なサイト)を表示していますが、iframe内のsrcを空にして、iframe要素のみを残した場合でも同様の現象が起こってしまった。

補足情報(FW/ツールのバージョンなど)

Django 3.2.7
Python 3.9.7

プログラミング初心者でして、基本的な内容で申し訳ありませんがご教授いただけますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

Ajaxが機能しないというより、Javascriptが読み込まれなくなってしまうことが原因でした。
以下で、Javascriptの読み込む位置やタイミングを変更することで、とりあえず目的とする機能は実装できました。
何故かははっきりと理解できていませんが、とりあえず原因は読み込む位置やタイミングだとわかったので、自分なりに検討してみようと思います。

HTML:base.html

1{% load static %} 2 3<!doctype html> 4<html lang="ja"> 5 <head> 6 <title>モデルビューアー</title> 7 <!-- Required meta tags --> 8 <meta charset="utf-8"> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10 <!-- jquery --> 11 <!-- <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> --> 12 <!-- Bootstrap CSS --> 13 <!-- Optional JavaScript --> 14####↓scriptタグをここに移動 15 <script type="text/javascript" src="{% static 'javascript/comment.js' %}"></script> 16 <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> 17####↑scriptタグをここに移動 18 19 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 20 </head> 21 <body> 22 <div class='container mt-3'></div> 23 {% block content %} 24 {% endblock %} 25 26 <!-- Optional JavaScript --> 27 <!-- <script type="text/javascript" src="{% static 'javascript/comment.js' %}"></script> --> 28 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 29 <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> --> 30 <!-- <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> --> 31 <!-- <script type="text/javascript" src="{% static 'javascript/comment.js' %}"></script> 32 <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> --> 33 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 34 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 35 </body> 36</html> 37

javascript:comment.js

1//↓DOMが読み込まれてから実行する処理を追加。 2window.addEventListener('DOMContentLoaded', function(){ 3 4 const alertBox = document.getElementById('alert-box'); 5 const form = document.getElementById('p-form'); 6 7 const title = document.getElementById('id_title'); 8 const text = document.getElementById('id_text'); 9 const cordinate = document.getElementById('id_cordinate'); 10 const csrf = document.getElementsByName('csrfmiddlewaretoken'); 11 const url = ''; 12 const handleAlerts = (type,text) => { 13 alertBox.innerHTML = `<div class="alert alert-${type}" role="alert"> 14 ${text} 15 </div>` 16 } 17 18 form.addEventListener('submit',e=>{ 19 e.preventDefault() 20 const fd = new FormData(); 21 fd.append('csrfmiddlewaretoken', csrf[0].value); 22 fd.append('title', title.value); 23 fd.append('text', text.value); 24 fd.append('cordinate', cordinate.value); 25 26 $.ajax({ 27 type: 'POST', 28 // url: url, 29 enctype: 'multipart/form-data', 30 data: fd, 31 success: function(response){ 32 console.log(response); 33 const sText = `succeccfully saved ${response.title}` 34 handleAlerts('success', sText) 35 setTimeout(()=>{ 36 alertBox.innerHTML='' 37 title.value = '' 38 text.value = '' 39 cordinate.value = '' 40 },2000) 41 }, 42 error: function(error){ 43 handleAlerts('danger', 'upps..somthing went wrong') 44 }, 45 cache: false, 46 contentType: false, 47 processData: false, 48 }) 49 }); 50}) 51

投稿2022/05/10 03:25

shuya-tamaru

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問