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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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アプリケーションを実現することができます。

解決済

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

shuya-tamaru
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アプリケーションを実現することができます。

1回答

0評価

0クリップ

355閲覧

投稿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

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

HTML:base.html

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

HTML:main.html

{% extends 'building/base.html' %} {% load crispy_forms_tags %} {% block content %} <div class='mt-3'> <div id='alert-box'></div> <form id='p-form' autocomplete="off"> {% csrf_token %} {{form|crispy}} <button type='submit' class='btn btn-primary'>Send</button> </form> <div> <iframe id="viewer" title="viewer" width="100px" height="100px" src="適当なURL"> </div> </div> {% endblock %}

Javascript:comment.js

const alertBox = document.getElementById('alert-box'); const form = document.getElementById('p-form'); const title = document.getElementById('id_title'); const text = document.getElementById('id_text'); const cordinate = document.getElementById('id_cordinate'); const csrf = document.getElementsByName('csrfmiddlewaretoken'); const url = ''; const handleAlerts = (type,text) => { alertBox.innerHTML = `<div class="alert alert-${type}" role="alert"> ${text} </div>` } form.addEventListener('submit',e=>{ e.preventDefault() const fd = new FormData(); fd.append('csrfmiddlewaretoken', csrf[0].value); fd.append('title', title.value); fd.append('text', text.value); fd.append('cordinate', cordinate.value); $.ajax({ type: 'POST', enctype: 'multipart/form-data', data: fd, success: function(response){ console.log(response); const sText = `succeccfully saved ${response.title}` handleAlerts('success', sText) setTimeout(()=>{ alertBox.innerHTML='' title.value = '' text.value = '' cordinate.value = '' },2000) }, error: function(error){ handleAlerts('danger', 'upps..somthing went wrong') }, cache: false, contentType: false, processData: false, }) });

試したこと

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

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

Django 3.2.7
Python 3.9.7

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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アプリケーションを実現することができます。