Django:将动画添加到“任务" divs，并且在一些CSS上也遇到麻烦 [英] Django: Add animation to "task" divs, and also trouble with some CSS
问题描述
关于使用服务器和jQuery，我是Web开发的新手.在完成我的大型就业项目之前，我要创建一个学习Django的作业，只是修改我在工作培训期间拥有的网站，在该网站中，我们必须实现带有功能的待办事项"列表以添加任务.原始站点涉及使用HTML，CSS和jQuery，并且能够在每次通过左侧的复选框选中任务时为淡入动画并清除文本.
I'm a newbie to web development with regards to using a server and jQuery. What I'm creating as an assignment to learning Django before I do my big employment project is simply modifying a web site I had during my job training where we had to implement a "To Do" list with the feature to add tasks. The original site involved using HTML, CSS, and jQuery, with the ability to animate fade-ins and cross out the text whenever I check-marked a task by the checkbox on the left side.
这一次，我想将输入的所有任务保存到Django开发服务器，然后将数据保存到Django开发服务器后再发送回给我.这也是我第一次学习如何在网站上进行后端开发.但是，我在用jQuery创建动画中的隐藏和淡入时遇到了麻烦.
This time, I want to save all the tasks I’m inputting to my Django development server, and then have it send the data back to me once it’s saved there. This was also the first time where I learned on how to do backend development in a website. However, I'm having trouble with creating the hide and fade in animations with jQuery.
你能帮我两个忙吗?
让我告诉您代码(如果代码格式不正确，请原谅):
Let me show you the code (Please excuse me if the code may not be formatted properly):
ToDoList.html:
ToDoList.html:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>Gregory Desrosiers (uWaterloo) - To Do List</title>
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/stylesheet.css">
<script src="static/javascript/jquery-1.11.3.min.js"></script>
<script src="static/javascript/ToDoList.js"></script>
</head>
<body>
<h1>To Do List</h1>
<form action="" method="post">
<div class="form-group">
<label for="taskInputTextField">Enter a task:</label><br/>
<input id="taskInputTextField" type="text" class="form-control" value="What task do you have?"><br/>
<div id="#buttonBlock">
<button type="button" id="addTaskButton" class="btn btn-success">Add Task</button>
<button type="button" id="removeAllTasksButton" class="btn btn-danger">Delete All Tasks</button>
</div>
</div>
</form>
<div id="listOfThingsToDo">
{% include "ListOfTasks.html" %}
</div>
</body>
<footer>© 2015 Gregory Desrosiers / University of Waterloo.</footer>
</html>
ListOfTasks.html:
ListOfTasks.html:
{% for task in task_list %}
<div class="checkbox-task"><label><input class="task" type="checkbox" {% if task.task_check_marked %} checked="checked" {% endif %}> {{ task.task_to_do }}</label></div>
{% endfor %}
stylesheet.css:
stylesheet.css:
h1, footer, button {
text-align: center;
}
body {
padding: 0px 30% 0px 30%;
}
#listOfThingsToDo{
overflow-x: auto;
}
.checkbox-task {
border: 2px dotted blue;
padding: 0px 3px 0px 3px;
margin-top: 3px;
margin-bottom: 3px;
}
#buttonBlock {
display: block;
text-align: center;
}
#removeAllTasksButton {
float: right;
}
ToDoList.js:
ToDoList.js:
$(function(){
$("#addTaskButton").click(function(){
var taskInput = $("#taskInputTextField").val();
if (taskInput.length === 0)
{
alert("There is nothing entered in the Task input field. Please enter a task before clicking on the \"Add Task\" button.");
return false;
}
$.post("process-request", {new_task: taskInput}, function(html){
$("#listOfThingsToDo").load(document.URL + ' #listOfThingsToDo');
$(".checkbox-task:last").hide();
$(".checkbox-task:last").fadeIn(500);
});
});
$("#removeAllTasksButton").click(function() {
$.post("remove-all-tasks", null, function(html) {
$("#listOfThingsToDo").load(document.URL + ' #listOfThingsToDo');
});
});
});
之前，我确实对"checkbox-task"类中的最后一个元素做了一个隐藏和淡入的语句，但是当我单击"Add Task"按钮时，它所做的全部就是隐藏它，然后几乎再次出现瞬间，就像闪烁一样. hide语句有效，但是fading-in语句无效.
Before, I did had a hide and fade-in statements for the last element that's part the "checkbox-task" class, but all it does when I click on the "Add Task" button is hide it then appears again almost instantaneously, sort of like a flicker. The hide statement works, but the fade-in statement doesn't.
我还尝试使用while语句来保持jQuery的运行，并在通过添加新任务值的比较来添加新任务后立即执行hide和fain-in语句，但这导致了无限循环.
I also tried using a while statement to keep the jQuery running and execute the hide and fade-in statements as soon as the new task is added by using a comparison for the new task's value, but that resulted in an infinite loop.
如果删除语句，我得到的只是添加带有新任务的div，该新任务是网站的原始机制.但是我仍然想通过动画来增强它.
If I remove the statements, all I get is adding in a div with the new task, which is the raw mechanic of the site. But I still want to enhance it with animation.
views.py:
from django.shortcuts import render_to_response
from ToDoList.models import ToDoChecklistTask
from django.http import HttpResponse
from django.template import RequestContext
from django.views.decorators.csrf import csrf_exempt
from django.core import serializers
def getSiteTemplate(request):
return render_to_response("ToDoList.html", {});
"""def hello(request):
newObject = ToDoChecklistTask(task_to_do = "Hmm", task_check_marked = True)
return HttpResponse("<p>" + newObject.__str__() + "</p>");"""
@csrf_exempt
def process_request(request):
newTask = ToDoChecklistTask(task_to_do = request.POST["new_task"], task_check_marked = False)
newTask.save();
task_list = ToDoChecklistTask.objects.all()
data_to_return = serializers.serialize('json', task_list);
return HttpResponse(data_to_return, 'application/json')
# return renderAddedTasks(request);
"""def index(request):
latest_question_list = Question.objects.order_by('-pub_date')[:5]
template = loader.get_template('polls/index.html')
context = RequestContext(request, {
'latest_question_list': latest_question_list,
})
return HttpResponse(template.render(context))"""
def renderAddedTasks(request):
task_list = ToDoChecklistTask.objects.all()
return render_to_response("ToDoList.html",{'task_list': task_list}, context_instance = RequestContext(request));
@csrf_exempt
def remove_all_tasks(request):
task_list = ToDoChecklistTask.objects.all()
task_list.delete()
data_to_return = serializers.serialize('json', task_list);
return HttpResponse(data_to_return, 'application/json')
# return render_to_response("ToDoList.html",{'task_list': task_list}, context_instance = RequestContext(request));
我绝对有比这更多的代码，但是我想先从您的角度看这是否足够的信息，然后再编辑此问题并从其他Django文件添加代码.但是，我认为我真的没有必要发布它们，因为它们与我有关动画的问题或我是否能正确处理请求没有真正的联系.
I absolutely do have more code than just this, but I want to see if this is enough information from your perspective first before I edit this question and add the code from my other Django files. However, I don’t think it’s really necessary for me to post them because they aren’t really related to my question about animation or whether or not I’m handling the requests properly.
下次，我应该考虑从人们那里接受一些培训，因为到目前为止，大多数培训只是来自阅读如此多的网站.
Next time, I should consider getting some training from people, because so far most of the training for this only came from reading so many websites.
推荐答案
要理解的是，作为Ajax调用的load是异步.这意味着在发出请求的同时，JavaScript会继续执行.为了在调用完成后执行某些操作，您将回调函数作为参数传递给load. jQuery在Ajax完成加载后自动调用该函数.
The thing to understand is that load, which is an Ajax call, is asynchronous. That means that the Javascript continues executing while the request is being made. In order to do something when the call completes, you pass a callback function as a parameter to load. jQuery automatically calls that function when the Ajax is finished loading.
$("#listOfThingsToDo").load(document.URL + ' #listOfThingsToDo', function() {
$(".checkbox-task:last").hide();
$(".checkbox-task:last").fadeIn(500);
});
您可以看到hide和fadeIn调用在匿名函数中，因此它们仅在Ajax请求完成时执行.
You can see that the hide and fadeIn calls are within the anonymous function, so they will only be executed when the Ajax request is complete.
这篇关于Django:将动画添加到“任务" divs，并且在一些CSS上也遇到麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
