DjangoとJqueryの使用

Question

この投稿に加えてhttps://stackoverflow.com/a/17732956 drag'n'dropでリストの順序を変更し、後でdjangoバックエンドで保存したいと思います。

http://jsfiddle.net/LvA2z/#&togetherjs=LvHpjIr7L0

と私自身のアクションのあるフォームのアクションを更新：私は、次のフィドルを使用していたテストの目的と理解のために

。だから、script.phpの代わりに、action = "{％url 'save_order'％}"を使用しました。

def save_order(request): 
    if (request.method == 'POST'): 
     list = request.POST['listCSV'] 
     print(list) 

基本的に私は、リストの要素の順序を変更し、ページを更新した後、保存された順序が指定され、その結果、その後、それを保存したい：

ビューでは、私の機能は次のようになります。しかし、私はjarryからdjangoのサイトにどのようにvarsを渡すのかわかりません。私が注文を変更すると、私は 'listCSV'にソートされたリストを持っています。この結果をdjangoサイトに渡してdbに保存するにはどうすればよいですか？

編集： // //（ "＃listsaveform"）の場合は、submit（）;

jqueryの-1.10.2.min.js：6 POST http://localhost:8000/overview/saveOrder/ 405（メソッドが許可されていません）

EDIT：

コメントアウトし、私は私のsave_order機能を参照し、この機能を解雇されていない、私はこのエラーを得ました

よろしくお願いします。私はAJAXで働いたことがないので、ちょっと立ち往生しています。 私は私のリストの構造を持っている：

{% if habits %} 
    <ul id="sortable"> 
     {% for habit in habits|dictsort:"priority" %} 
     <li class="ui-state-default">{{habit.title}}</li> 
     {% endfor %} 
    </ul> 
    {% endif %} 

、このリスト構築物は、コードのこの行でソート可能です：

$(function() { 
     $("#sortable").sortable(); 
    }); 

私のフォームを見てどのように？

Answer 1

ここに私の解決策はhttps://impythonist.wordpress.com/2015/06/16/django-with-ajax-a-modern-client-server-communication-practise/に基づいています。順序を変更する場合、データを送信するJS

// Sort & save order of habits 
 
$(function() { 
 
    $('.sort').sortable({ 
 
     handle: 'button', 
 
     cancel: '', 
 
     update: function(event, ui) { 
 
      var result = $(this).sortable("serialize", {key: event.target.id}); 
 
      // alert(result); 
 

 
      var csrftoken = getCookie('csrftoken'); 
 

 

 
      $.ajax({ 
 
        url : "/overview/saveOrder/", // the endpoint,commonly same url 
 
        type : "POST", // http method 
 
        data : { csrfmiddlewaretoken : csrftoken, 
 
        result : result, 
 
      }, // data sent with the post request 
 

 
      // handle a successful response 
 
      success : function(json) { 
 
       console.log(json); // another sanity check 
 
       //On success show the data posted to server as a message 
 

 
       // alert('Your list '+json['result']); 
 
      }, 
 

 
      // handle a non-successful response 
 
      error : function(xhr,errmsg,err) { 
 
      console.log("FAILURE"); 
 
      console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console 
 
      } 
 
      }); 
 

 

 

 
     } 
 
    }); 
 

 
    // var sorted = $(".selector").sortable("serialize", { key: "sort" }); 
 
    // console.log(sorted) 
 
}) 
 

 

 

 
//For getting CSRF token 
 
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; 
 
}

とDjango側

def save_habit(request): 
print('save_habit') 
if (request.method == 'POST'): 
    if request.is_ajax(): 

     habits = Habit.objects.filter(created_by=request.user.userprofile, is_active=True) 

     habit_title = request.POST.get('habit_title') 
     habit_trigger = request.POST.get('habit_trigger') 
     habit_routine = request.POST.get('habit_routine') 
     habit_targetbehavior = request.POST.get('habit_targetbehavior') 
     habit_image = request.POST.get('habit_image') 
     print(habit_image) 

     image = habit_image.split('http://localhost:8000/media') 
     print(image[1]) 
     # TODO: was, wenn routine noch gar nicht existiert? --> speichern 
     obj_routine = Existingroutine.objects.get(name=habit_routine) 
     obj_targetbehavior = Targetbehavior.objects.get(name=habit_targetbehavior) 

     for habit in habits: 
      habit.priority += 1; 
      # habit.save(); 

     habit = Habit(created_by=request.user.userprofile, is_active=True, 
     title=habit_title, trigger=habit_trigger, existingroutine=obj_routine, 
     targetbehavior=obj_targetbehavior, image=image[1]) 

     #habit.save() 

     data = {"habit_title":habit_title, 
       "habit_trigger":habit_trigger, 
       "habit_routine":habit_routine, 
       "habit_targetbehavior":habit_targetbehavior }; 
     return JsonResponse(data) 
return redirect('display_habits')