Djangoで Drag & drop
解決済
回答 10
2022/03/05 21:56
質問内容

実現したいこと

Djangoでタスクサイトを作っております。

ドラッグアンドドロップでタスクを移動させる時、

SQL Server のストアドプロシージャを呼び出して、DBに保存したいです。

発生している問題

データベースに保存できてない

具体的にエラーです。

System check identified no issues (0 silenced).
March 05, 2022 - 21:53:02
Django version 2.1.15, using settings 'pjmain.settings'
Starting development server at http://127.0.0.1:8000/  
Quit the server with CTRL-BREAK.
[05/Mar/2022 21:53:05] "GET /todo/mytaskview HTTP/1.1" 200 21840
[05/Mar/2022 21:53:05] "GET /static/Scripts/drag_drop.js?time=202201251100 HTTP/1.1" 304 0
[05/Mar/2022 21:53:06] "GET /static/Scripts/bootstrap.js.map HTTP/1.1" 200 254480
[05/Mar/2022 21:53:06] "GET /static/css/bootstrap.css.map HTTP/1.1" 200 511248
Internal Server Error: /todo/updateList
Traceback (most recent call last):
  File "C:\Users\nguyen\AppData\Local\Programs\Python\Python39\lib\site-packages\django\core\handlers\exception.py", line 34, in inner
    response = get_response(request)
  File "C:\Users\nguyen\AppData\Local\Programs\Python\Python39\lib\site-packages\django\utils\deprecation.py", line 90, in __call__
    response = self.process_request(request)
  File "C:\Users\nguyen\AppData\Local\Programs\Python\Python39\lib\site-packages\django\middleware\common.py", line 53, in process_request
    path = self.get_full_path_with_slash(request)
  File "C:\Users\nguyen\AppData\Local\Programs\Python\Python39\lib\site-packages\django\middleware\common.py", line 86, in get_full_path_with_slash
    raise RuntimeError(
RuntimeError: You called this URL via POST, but the URL doesn't end in a slash and you have APPEND_SLASH set. Django can't redirect to the slash URL while maintaining POST data. Change your form to point to 127.0.0.1:8000/todo/updateList/ (note the trailing slash), or set APPEND_SLASH=False in your Django settings.
[05/Mar/2022 21:53:07] "POST /todo/updateList HTTP/1.1" 500 21178

ソースコード

①DBテーブル構成

■DBタスク
CREATE TABLE [dbo].[DBタスク](
	[タスクID] [int] IDENTITY(1,1) NOT NULL,
	[重要事項] [bit] NOT NULL,
	[状態] [nvarchar](50) NULL,
	[タイトル] [nvarchar](100) NULL,
	[期限日時] [datetime2](7) NULL,
	[登録日時] [datetime2](7) NULL,
	[登録者CD] [nvarchar](20) NULL,
	[備考] [nvarchar](max) NULL,
PRIMARY KEY CLUSTERED 
(
	[タスクID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

■DBコラム
CREATE TABLE [dbo].[DBコラム](
	[コラムID] [int] IDENTITY(1,1) NOT NULL,
	[タイトル] [nvarchar](100) NULL,
	[タスク配列] [nvarchar](1000) NULL,
PRIMARY KEY CLUSTERED 
(
	[コラムID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO

②Django側

■html and ajax

{% block head %}
    <link href="{% static 'css/workflow.css' %}" rel="stylesheet" />
    <link href="{% static 'css/columns.css' %}" rel="stylesheet" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script language="JavaScript">
        $(document).ready(function(){  
            function slideout(){
                setTimeout(function(){
                        $("#response").slideUp("slow", function () {
                    });
                }, 2000);
            }
            
            $("#response").hide();
            $(function() {
                $("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
                var item_order = new Array();
                $('ul.reorder li').each(function() {
                    item_order.push($(this).attr("id"));
                }); 
                var order_string = 'order='+item_order;
                $.ajax({
                    method: "POST",
                    url: "/todo/updateList",
                    data: order_string,
                    cache: false,
                    success: function(data){    
                        $("#response").html(data);
                        $("#response").slideDown('slow');
                        slideout();
                    }
                });               
                }         
                });
                });
            
        });
    </script>
{% endblock %}
{% block contents %}

<form form method="post" id="frmApply">
    {% csrf_token %}
        <div style="width:300px;">
            <div id="list">
                <div id="response"></div>
                <ul class="reorder">
                    {% for row in list_リスト_コラム %}
                        <li id="{{row.id}}">{{row.タイトル}}
                        <div class="clear"></div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
</form>
{% endblock %}

■urls.py

from django.urls import path
from . import views_todo

app_name = 'todo'

urlpatterns = [
    path('mytaskview', views_todo.MyTaskView, name="MyTaskView"),
    path('todo/', views_todo.TaskAdd, name='ToDoRegist'),
    path('updateList/', views_todo.updateList, name="updateList"),
]

■view (※views_todo)

# Import
from ast import In
from distutils.util import strtobool
import os
import pyodbc
import json
import uuid

# From
from django.conf import settings
from django.contrib.auth.decorators import login_required
from django.shortcuts import render, redirect
from django.http import HttpResponse
from .views import *    # 2022/01/23 グエン Add
from datetime import date, datetime
from .models import sortables as Sortable
from django.views.generic import View

today_date = date.today()

def connect_db():
    strconn = 'Driver={ODBC Driver 17 for SQL Server};' + 'Server=momo19;' + 'Database=svn_todo;' + 'UID=sa;' + 'PWD=svn-256'
    # ---------------
    conn = pyodbc.connect(strconn, autocommit=True)
    return conn


@login_required
def MyTaskView(request):
    template_name = 'todo/index.html'

    list_作業者 = Exec_StoredProc_GetList('CAL_リスト_作業者', [request.user.username]) #sel_分類()
    list_リスト_コラム = Exec_StoredProc_GetList('CAL_リスト_コラム',[])

    param = {'list_作業者': list_作業者,
            'list_リスト_コラム': list_リスト_コラム,
            }

    return render(request, template_name, param)

@login_required
def updateList(request):
    conn = connect_db()
    cur = conn.cursor()
    if request.method == 'POST':
        cur.execute("SELECT * FROM DBコラム")    
        number_of_rows = cur.rowcount      
        getorder = request.form['order']    
        print(getorder)
        order = getorder.split(",", number_of_rows)
        print(order)
        count=0  
        for value in order:
            count +=1
            print(count)                       
            cur.execute("UPDATE DBコラム SET タスク配列 = %s WHERE id = %s ", [count, value])
            conn.commit()       
        cur.close()
        
    return HttpResponse("リダイレクト成功")

自分で試したこと

view or urls は何かエラーがあるようで ご確認よろしくお願い致します。

補足情報

参考にしたサイトです。

https://jqueryui.com/sortable/

回答 10
ベストアンサーを選択すると、解決済みとなります。
nodata
まだ回答がありません
回答
nodata
回答するにはログインが必要です