Fatal编程技术网
  • jquery/
  • Jquery 在Django中使用和发布可排序的结果

Jquery 在Django中使用和发布可排序的结果

jquery django jquery-ui

Jquery 在Django中使用和发布可排序的结果,jquery,django,jquery-ui,django-views,Jquery,Django,Jquery Ui,Django Views,我正在制作一个模型列表，我希望能够拖动这些模型，然后根据附加的排序值将订单保存为数据库中的新订单。 现在，我有以下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="{% st

我正在制作一个模型列表，我希望能够拖动这些模型，然后根据附加的排序值将订单保存为数据库中的新订单。 现在，我有以下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">
    {% for 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>
这其中很好的一部分是测试代码，但我正试图在完全实现之前让它在小范围内工作。我面临的两个主要问题是，在哪里插入可排序代码，以及如何保存这些信息以在按下按钮时发布

下面是一个可以使用的JavaScript示例

工作示例：

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>
JavaScript

$(function() {
  $("#test").button().click(function(e) {
    e.preventDefault();
    var serialOrder = $("#sortable").sortable("serialize");
    var arrayOrder = $("#sortable").sortable("toArray");
    $.ajax({
      type: "POST",
      // used for this example
      url: "/echo/json/",
      dataType: "json",
      data: {
        json: JSON.stringify(arrayOrder)
      },
      success: function(data) {
        // Do something with the data
        console.log(data);
      }
    });
  });
  $("#sortable").sortable();
});
您的代码将不同。这只是一个基于页面中可能填充的内容的接近示例

您的表单中没有任何内容可以从可排序列表中收集订单或数据。这可以使用
序列化
或
toArray
方法来完成。请参阅更多：

希望对您有所帮助。

这里是一个可以使用的JavaScript示例

工作示例：

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>
JavaScript

$(function() {
  $("#test").button().click(function(e) {
    e.preventDefault();
    var serialOrder = $("#sortable").sortable("serialize");
    var arrayOrder = $("#sortable").sortable("toArray");
    $.ajax({
      type: "POST",
      // used for this example
      url: "/echo/json/",
      dataType: "json",
      data: {
        json: JSON.stringify(arrayOrder)
      },
      success: function(data) {
        // Do something with the data
        console.log(data);
      }
    });
  });
  $("#sortable").sortable();
});
您的代码将不同。这只是一个基于页面中可能填充的内容的接近示例

您的表单中没有任何内容可以从可排序列表中收集订单或数据。这可以使用
序列化
或
toArray
方法来完成。请参阅更多：

希望这能有所帮助。

你不是把它放在onload函数中，以便它在页面加载时工作吗？您希望向视图发送什么？在你看来，你想用它做什么？有很多方法可以做到这一点。如果要确保它在所有其他元素之后加载，可以在页面末尾添加一个
部分。您还可以使用
onload
，
$（document）.ready（function（）{}）
，或者现在更常用的
$（function（）{}）
部分。您还可以使用
onload
，
$（document）.ready（function（）{}）
，或者现在更常用的
$（function（）{}）数据
应该类似于：
数据：serialOrder
，以便您以适当的方法发布数据数组。我的例子中的AJAX是特定于jsfiddles AJAX Echo特性的，当使用javascript时，我会出现crsf错误，列表仍然无法拖动。我刚刚用你的js替换了我的js，然后将其更改为与我的VAR匹配。我是否需要导入或包含文件以使其正常工作？您是否看到我对您的jQuery UI 3.2.1调用的评论？该文件不存在。确保您使用了正确的URL：我知道了，我已经修复了。没有更多的错误，所有都正常工作，但post操作不会在我的终端中发生。按钮起作用但不执行。不要使用我的AJAX代码。你会想让它回到你的需要。根据您的浏览器，您将在控制台的“网络”部分下看到AJAX详细信息。例如，
数据
应该类似于：
数据：serialOrder
，以便您以适当的方法发布数据数组。我的示例中的AJAX是特定于jsfiddles AJAX Echo特性的。