django、Ajaxを使って、順番を並び替えたい

Question

前提・実現したいこと

管理画面上で、店舗オーナーが店舗スタッフの順番を
ドラッグ&ドロップで簡単に並び替えられるようにしたいです。

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

ブラウザ上で並び替え自体はできるのですが、スタッフの順番データ（order）が更新されません。

該当のソースコード

urls.py

path('ajax/order_change/', ajax_order_change, name='ajax_order_change'),

path('owner<int:owner_id>/store<int:store_id>/staff/', StoreStaffView.as_view(), name='owner_store_staff'),

models.py

class Store(models.Model):
    name = models.CharField(verbose_name='店舗名', max_length=100)

class Staff(models.Model):
    name = models.CharField(verbose_name='名前', max_length=100)
    store_id = models.ForeignKey(
        Store, verbose_name='店舗ID', on_delete=models.CASCADE,)
    order = models.IntegerField(verbose_name='順序', blank=True, null=True)

views.py

def ajax_order_change(request, store_id):
    order = request.POST.get('order')
    staff_list = [{ 'pk':staff.pk, 'order': staff.order } for staff in Staff.objects.filter(store_id=store_id)]
    d = {
        'staff_list':staff_list
    }
    return JsonResponse(d)

class StoreStaffViewView(ListView):
    model = Staff
    template_name = 'myapp/owner_store_staff.html'
    pk_url_kwarg = 'store_id'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['store'] = Store.objects.get(pk=self.kwargs['store_id'])
        return context

owner_store_staff.html

{% block content %}
        <div id="sortable">
            {% for staff in store.staff_set.all %}
            <div>
                <p class="order">{{ staff.order }}</p>
                <p>{{ staff.name }}</p>
            </div>
            {% endfor %}
        </div>
{% endblock %}

{% block extrajs %}
<script>
    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));
    }

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

    //order並び替え------------------------------
    $('#sortable').sortable();
    $('#sortable').bind('sortstop', function (e, ui) {
        // ソートが完了したら実行される。
        var rows = $('#sortable .order');
        for (var i = 0, rowTotal = rows.length; i < rowTotal; i += 1) {
            $($('.order')[i]).text(i + 1);
        }
        $.ajax({
            'url': '{% url "myapp:ajax_order_change" %}',
            'type': 'POST',
            'data': {
                'order': $('.order').val(),
            },
            'dataType': 'json'
        });
    });
</script>

{% endblock %}

お分かりになる方、何卒宜しくお願い致します。

Answer 1

ざっと拝見したところでは、フロント側では #sortable 要素の sortstop イベントが起こったときに $('.order').val() の戻り値をポストしていて、バックエンド側では ajax_order_change() で更新処理を行う、というイメージとお見受けしました。

この理解が正しければ、

• フロント側では、 $('.order').val() の戻り値はお望みのものではないのではないかと思います。一度中身を確認してみてください。
• バックエンド側も、 ajax_order_change() には更新処理は書かれていないように見えます。

ですので、更新されないのはある意味当然かなという気がします。

「代わりにコードを書いて欲しい」ではなく、基本的に自力でやるつもりでサポートを求めていらっしゃるのであれば、まず、 Ajax でのデータ更新は一般にどのように書くものなのか、そして、今回の場合だとどのような処理をすればよいのか（フロントとバックエンドの間でどういうデータをやりとりすればいいのか、バックエンド側ではどういう処理をすればよいのか）をまず学習・整理して、擬似コードを書くところからチャレンジされてみてはいかがでしょうか。

jQuery UI Sortable を使われているのであれば次のページ等が参考になるものと思います。

• php - jQuery UI Sortable, then write order into a database - Stack Overflow

追記 2019/03/14

フロント側からのデータを取得できない理由を教えていただけますと幸いです。

CSRF 設定（ @csrf_exempt 等）は適切にされていて ajax_order_change() が実行されているのに print(staff_list) が空になる、ということですかね。

公式ドキュメントを読むと

If you need to access raw or non-form data posted in the request, access this through the HttpRequest.body attribute instead.

• Request and response objects | Django documentation | Django

とのことで、このケースでは request.POST は使えないようですね。次のような感じで取得する必要があるのだと思います。

import json
staff_list = json.loads(request.body).get('staff_list', [])

これ ↑ はあくまでも説明のための単純化したサンプルです。実際にはどのようなデータが来るかわからないという前提で、例外処理等は適切に行ってください。

以下参考です。

Stack Overflow の質問:

• Django & TastyPie: request.POST is empty - Stack Overflow

公式ドキュメント:

request.POST will no longer include data posted via HTTP requests with non form-specific content-types in the header. In prior versions, data posted with content-types other than multipart/form-data or application/x-www-form-urlencoded would still end up represented in the request.POST attribute. Developers wishing to access the raw POST data for these cases, should use the request.body attribute instead.

• Django 1.5 release notes | Django documentation | Django

コード:

• django/request.py at 2.1.7 · django/django · GitHub

追記 2019/03/15

staff_list = json.loads(request.body).get('staff_list', []) にすると、staff_listの中身が空ではなくなったのですが、JSONDecodeErrorになってしまいます。

...

度々恐縮ですが、アドバイスいただけますと幸いです。。

コメントでいただいた追加のご質問に回答します。

こちら検索してみたところ、 jQuery.ajax() は data パラメータが文字列ではない場合に自動的に query string に変換する挙動をするようです。そして、今回の場合のように、 data の値が object で、その要素に array または object が含まれる場合には注意が必要とのことです。

以下 jQuery 公式ドキュメントからの引用です（英語に抵抗があれば Google 翻訳等を使ってください）。

data

Type: PlainObject or String or Array

Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

• jQuery.ajax() | jQuery API Documentation

Note: Because some frameworks have limited ability to parse serialized arrays, developers should exercise caution when passing an obj argument that contains objects or arrays nested within another array.

Note: Because there is no universally agreed-upon specification for param strings, it is not possible to encode complex data structures using this method in a manner that works ideally across all languages supporting such input. Use JSON format as an alternative for encoding complex data instead.

• jQuery.param() | jQuery API Documentation

というわけで、フロント側とバックエンド側の両方で少し工夫が必要なようですね。すみません、私は jQuery で試していなかったので気が付きませんでした。

というわけで、具体的には、例えば JS 側を次のようにして

$.ajax({
  'url': '{% url "myapp:ajax_order_change" %}',
  'type': 'POST',
  'data': {
    'staff_list': JSON.stringify(staff_list),
  },
  'dataType': 'json'
  });
});

バックエンド側を次のようにすると値が取得できるのではないかと思います。

import json
from django.http import QueryDict

def ajax_order_change(request, store_id):
    # print() はデバッグが終われば削除してください
    print(request.body)
    params = QueryDict(request.body)
    print(params)
    staff_list = json.loads(params['order'])
    print(staff_list)
    // ...

request.body が query string になって渡されるので QueryDict に渡して使うとやりやすいと思います。

あくまでもサンプルなので、コピペせずアイデアのみ参考にしてください。また、繰り返しになりますが、どのようなデータが来るかわからないという前提で、例外処理等は適切に行ってくださいね :D

この点についてはこれで解決するのではないかと思います。

もし他にも問題が出てきましたら、一対一でサポートし続けるのは難しいので、別の質問を立ててみてくださいー

Comments

[hiranohirano]

ご回答いただきありがとうございます。色々調べてみて、スタッフID=1のみの順番（order）を更新できるようにはなりましたが、
フロント側で、辞書型のリストを渡そうとするところで少しつまづいています。

フロント側では、#sortable要素の sortstopイベントが起こったときに、staffIDと変更された順番（order）を辞書型リストとして残し、バックエンド側に渡したいと考えています。

htmlの
<p class="order">{{ staff.order }}</p>
だった部分にidをつけて以下のようにしました。
<p class="order" id="{{ staff.pk }}">{{ staff.order }}</p>

以下の部分で、idと順番を残したいと思っています。

$('#sortable').sortable();
$('#sortable').bind('sortstop', function (e, ui) {
// ソートが完了したら実行される。
var rows = $('#sortable .order');
var staff_list = {}; 　　//空の辞書型リストを用意
for (var i = 0, rowTotal = rows.length; i < rowTotal; i += 1) {
$($('.order')[i]).text(i + 1);
staff_id = $('#sortable .order').id;　　//スタッフidを取得
order = i+1;　　//orderの値を取得
staff_list.staff_id = order;　　//id:orderの形で辞書型リストに残す
}

期待しているのは、{'スタッフID': '順番', 'スタッフID': '順番', 'スタッフID': '順番', }のような辞書型リストですが、返ってくるのは、{staff_id: 5} というものになってしまいます。

フロント側でやろうとしていることの方向性があっているかと、合っている場合、期待通りにならない理由を教えていただけますと幸いです。

[gh640]

大きな方向性はよいのでないでしょうか（これはあくまで私の意見なので「合っているかどうか」での回答は避けておきます）。

お考えのとおり、ドラッグ & ドロップで場所が変わった要素だけでなく、影響を受けるすべての要素の order をバックエンドに投げる必要があると思います。

ご期待通りにならない理由は、オブジェクト `staff_list` の要素にアクセスするときのキーが `staff_id` になってしまっているからではないでしょうか。変数 `staff_id` に格納された値をキーとしたい場合は次のように変更すべきかなと思います。

- staff_list.staff_id = order;　　//id:orderの形で辞書型リストに残す
+ staff_list[staff_id] = order;　　//id:orderの形で辞書型リストに残す

ご質問への回答になっているでしょうか。がんばってください :D

[hiranohirano]

ご回答いただき、ありがとうございます。
すいません、バック側でもつまづいてしまいましたので、再度ご質問させてください。

フロント側では期待通りに動いていると思います。
console.log(staff_list)と書くと、
{5: 2, 11: 3, 18: 4, 19: 1}
のようになり、{スタッフID：順序}の辞書型リストができました。

$('#sortable').sortable();
$('#sortable').bind('sortstop', function (e, ui) {
// ソートが完了したら実行される。
var rows = $('#sortable .order');
staff_list = {};
for (var i = 0, rowTotal = rows.length; i < rowTotal; i += 1) {
$($('.order')[i]).text(i + 1);
staff_id = rows[i].id;
staff_id = Number(staff_id);　　
order = i+1;
staff_list[staff_id] = order;
}
console.log(staff_list);
$.ajax({
'url': '{% url "myapp:ajax_order_change" %}',
'type': 'POST',
'data': {
'staff_list': staff_list,
},
'dataType': 'json'
});
});

バック側では、フロント側からのstaff_listを取得して、データを更新させる処理を書いたつもりです。
しかし、print('staff_list')とやると、中身が空なので、おそらくここが間違っています。
フロント側では、staff_listの中に思った通りのものが入っていますが、バック側で取得できていません。

def ajax_order_change(request):
#フロント側からデータを取得する
staff_list = request.POST.getlist('staff_list')
print(staff_list) 　#これを確認すると、中身が空になってしまう。
#スタッフidを探して、orderを書き換える
for key, value in staff_list:
staff = Staff.objects.get(pk=key)
staff.order = value
staff.save()
d = {
'staff_list': staff_list
}
return JsonResponse(d)

フロント側からのデータを取得できない理由を教えていただけますと幸いです。
宜しくお願い致します。

[gh640]

「確かに送られているデータが Django の request.POST に入っていないのはなぜか？」というご質問への回答を解答欄に追記しました。ご覧になってみてください :D

[hiranohirano]

ご返信ありがとうございます。

csrf設定はowner_store_staff.htmlのfunction csrfSafeMethodのところでおそらく出来ているかと思います。

staff_list = json.loads(request.body).get('staff_list', [])
にすると、staff_listの中身が空ではなくなったのですが、JSONDecodeErrorになってしまいます。

json_txt = str(json_txt).replace("'", '"').replace('True', 'true').replace('False', 'false')
のようなことや
body_unicode = request.body.decode('utf-8')
staff_list = json.loads(body_unicode).get('staff_list',[])

などなど、色々と試してみましたが、解決策がわからず...

度々恐縮ですが、アドバイスいただけますと幸いです。。

[hiranohirano]

body_unicode = request.body.decode('utf-8')
staff_list = json.loads(body_unicode).get('staff_list',[])　のところで、

print(body_unicode)とすると、
おそらくデコードされたであるデータが返ってきます。
しかし、print(staff_list)としても、何も返ってきません。

[gh640]

`JSONDecodeError` が出てしまう件に関するご質問への回答を回答欄に追記しました。（リンク先も合わせて）ご覧になりお試しになってみてくださいー。

[hiranohirano]

ご返信ありがとうございます。
またつまづいてしまったのですが、頂いたアドバイスをもとに自力で頑張ってみます。
色々と丁寧に教えていただき、ありがとうございました！