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

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

ただいまの
回答率

88.57%

Djangoでの部分ページレンダリングの手法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,566

raffcro

score 11

お世話になります。Djangoの学習を行っております。

Djangoで部分ページのレンダリングを行えるものかと
色々と調べたのですが今のところDjangoの機能だけで出来るような方法を
見つけることが出来ませんでした。ご存知の方がいらっしゃいましたらご教示頂けますと幸いです。
(django-render-partialをimportしたり、iFrameを使用すれば
出来そうな気はするのですが、セオリーの確認をさせて下さい。)

環境 バージョン
Python 3.6.6
Django 2.1.2

□実現したい事
以下のように1ページ内にテンプレートを組んだ場合に、
テンプレートA内に設置したボタンを押下し、テンプレートB部分のみ
HTMLのレンダリングを行いたい。
(<Form method="POST"><button submit>、またはajaxでも構いません)

[One Page]
・テンプレートA.html ボタンXを押下 -> テンプレートB部分のみレンダリング
・テンプレートB.html
(Extends テンプレート)

検証用ソースです。ご参考になれば。

# from django import views
from django.views.generic.base import View
from django.urls import include, path
from . import views


urlpatterns = [
    path('', views.index.as_view(), name='index'),
    path('base', views.base.as_view(), name='base'),
    path('mylist', views.mylist.as_view(), name='mylist'),
    path('mylist/ajax_refresh', views.ajax_refresh, name='ajax_refresh'),
]
from django.shortcuts import get_object_or_404, render
from django.views.generic.base import View
from django.http import JsonResponse, HttpResponse
from django.template import loader


class base(View):
    def post(self, request, *args, **kwargs):
        pass

    def get(self, request, *args, **kwargs):
        return render(request, 'base.html')


class index(View):

    def post(self, request, *args, **kwargs):
        pass

    def get(self, request, *args, **kwargs):
        data = {'testdata': '変更前テスト'}
        template = loader.get_template('display/index.html')
        return HttpResponse(template.render(data, request))


class mylist(View):

    def post(self, request, *args, **kwargs):
        return render(request, 'display/_mylist.html')

    def get(self, request, *args, **kwargs):
        return render(request, 'display/_mylist.html')


def ajax_refresh(request):
    data = {'testdata': '変更後テスト'}
    template = loader.get_template('display/index.html')
    return HttpResponse(template.render(data, request))
$(function() {

    $('#btninsert').click(function (e) {
        console.log('test1');
    });

    $('#btnupdate').click(function (e) {
        console.log('test2');
    });

    $('#btndelete').click(function (e) {
        console.log('test3');
    });

    // $('#btnrefresh').click(function (e) {
    //     $.ajax({
    //         url: list_template_name + '/ajax_refresh',
    //         type: 'POST',
    //         headers: csrftoken,
    //         data: {
    //             'userdictionary_seq': 'test',
    //         },
    //     }).done(function (r) {
    //         console.log('ok');
    //     }).fail(function (r) {
    //         console.log('no');
    //     });
    // });
});

$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
        var cookie = jQuery.trim(cookies[i]);
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) === (name + '=')) {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
        }
    }
}
return cookieValue;
}

var csrftoken = getCookie('csrftoken');

function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
{% load static %}
<html>

<header>
    <link rel="stylesheet" href="{% static 'css/lib/datatable/dataTables.bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">

    <body>
    <div style="display: block">

        <div>baseタイトル</div>

        <div>
            {% block content %}{% endblock%}
        </div>
    </div>

    <script src="{% static 'js/jquery/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'js/data-table/datatables.min.js' %}"></script>
    <script src="{% static 'js/data-table/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'js/example.js' %}"></script>
    <script>
        list_template_name="{% url 'mylist' %}"
    </script>
</body>

</html>
{% extends 'base.html' %}

{%block content%}
<button id="btninsert">add</button>
<button id="btndelete">delete</button>
<button id="btnupdate">update</button>

<input type="text">

{% include 'display/_mylist.html' %}

{% endblock %}
<form method="POST">{% csrf_token %}
    <button method="POST" id="btnrefresh">refresh</button>
</form>
<h4>あい{{ testdata }}</h4>

<table id="bootstrap-data-table" class="table table-striped table-bordered table-hover table-condensed datatable">
    <thead>
        <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
    </thead>
    <tdody>
        <tr>
            <td>Row 0 Data 1</td>
            <td>Row 0 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 3 Data 1</td>
            <td>Row 3 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 4 Data 1</td>
            <td>Row 4 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 5 Data 1</td>
            <td>Row 5 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 6 Data 1</td>
            <td>Row 6 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 7 Data 1</td>
            <td>Row 7 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 8 Data 1</td>
            <td>Row 8 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 9 Data 1</td>
            <td>Row 9 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row A Data 1</td>
            <td>Row A Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row B Data 1</td>
            <td>Row B Data 2</td>
            <td>etc</td>
        </tr>
    </tdody>
</table>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

デフォルトのDjangoには支援するような機能はないはず。
自分でやるときはユーザー操作で読み込ませたい部分は別URLで作って
ajaxとかで読み込ませてます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/26 16:05

    ご回答有難うございます。Djangoの標準でそのような機能が無さそうとのことなので、JQueryのDatatablesの場合はJSON等でオブジェクトの受け渡しで、それ以外の場合は場面毎に工夫が必要そうですね。参考にさせて頂きます。

    キャンセル

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

  • ただいまの回答率 88.57%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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