i making list of models want able drag around, save order new ordering in database based off ordering value attached. right have code html:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script src="https://code.jquery.com/ui/3.2.1/jquery-ui.js"></script> <script src="{% static 'draggable.js' %}"></script> <script type="text/javascript"> $(document).ready(function() { $("#test").submit(function(event){ $.ajax({ type:"post", url:"{% url 'editpage' bid=book.id pid=page.page_num %}", data: { 'order': 1 // insert ordering here }, success: function(){ } }); return false; }); }); </script> </head> <body> <h1>{{page.page_title}}</h1> <ul id="sortable"> {% section in sections.all %} <li style="background:blue">{{section.section_title}}</li> {% endfor %} </ul> <form method='post' id ='test'> <input type='submit' value='test button'/> </form>
the problem having trying sortable work. insert script (#sortable).sortable() work when page loads , on press, post view parsing.
my view if helps:
@ensure_csrf_cookie def editpage(request, bid = -1, pid = 1): ret = {} b = textbook.objects.get(id = int(bid)) page = b.pages.get(page_num = int(pid)) ret = { 'book':b, 'page':page, 'sections':page.sections, } if request.method == 'post': print(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>" + request.post.get('order')) return render(request,"content/editpage.html", ret) a part of test code trying work on small scale before full implementation. 2 major questions have insert sortable code , how save info post on button press.
here example of javascript can use.
working example: https://jsfiddle.net/twisty/h15mv6cr/
html
<h1>page title</h1> <ul id="sortable"> <li style="background:blue" id="model-1">section title 1</li> <li style="background:blue" id="model-2">section title 2</li> <li style="background:blue" id="model-3">section title 3</li> <li style="background:blue" id="model-4">section title 4</li> <li style="background:blue" id="model-5">section title 5</li> </ul> <a id="test" href="#">test button</a> css
#sortable { margin: 1px; border: 1px solid #eee; padding: 2px; list-style: none; width: 210px; background: #fff; } #sortable li { padding: 3px; padding-left: 5px; margin: 2px; width: 200px; border-radius: 4px; color: #fff; } javascript
$(function() { $("#test").button().click(function(e) { e.preventdefault(); var serialorder = $("#sortable").sortable("serialize"); var arrayorder = $("#sortable").sortable("toarray"); $.ajax({ type: "post", // used example url: "/echo/json/", datatype: "json", data: { json: json.stringify(arrayorder) }, success: function(data) { // data console.log(data); } }); }); $("#sortable").sortable(); }); your code different. close example based on might populated in page.
you had nothing in form collect order or data sortable list. done using either serialize or toarray methods. see more: http://api.jqueryui.com/sortable/
hope helps.
Comments
Post a Comment