Django Mootool Ajax 1

***********************************************
Django Mootool Ajax 1

========================================== js

var Milestone = new Class({
initialize: function(el) { <---------- constructor
this.element = $(el); <----------
// console.log(this.element)
this.checkbox = this.element.getElement('.is-completed');
this.checkbox.addEvent('click',this.submit.bindWithEvent(this));
this.url = this.element.getElement('a').get('href');
// console.log('href', this.url)
this.request = new Request({ url: this.url}); <----------
this.request.addEvent('success', this.success.bind(this)); <----------
},

submit: function(ev) {
ev.stop(); <----------
this.element.getElement('.request-progress').setStyle('display',''); <----------
this.request.post({value:this.checkbox.checked}); <----------
console.log('clicked')
},

success: function(response) {
// console.log('success');
if (this.checkbox.checked == true) {
this.checkbox.checked = false;
}else {
this.checkbox.checked = true;
}
this.element.getElement('.request-progress').setStyle('display','none'); <----------

var d = new Element('div', { 'html': response });
var l = d.getElement('.late-block');
var u = d.getElement('.upcoming-block');
var c = d.getElement('.completed-block');
var late = l.getElement('.inner-block');
var upcoming = u.getElement('.inner-block');
var completed = c.getElement('.inner-block');

completed.inject(document.getElement('.completed-block')); <---------- inject
document.getElement('.completed-block').getElement('.inner-block').dispose(); <---------- dispose
late.inject(document.getElement('.late-block'));
document.getElement('.late-block').getElement('.inner-block').dispose();
upcoming.inject(document.getElement('.upcoming-block'));
document.getElement('.upcoming-block').getElement('.inner-block').dispose();

$$('.milestone',d).each(function(el) {
var x = new Milestone(el);
});
}

});

window.addEvent('domready', function() { <----------
$$('.milestone').each(function(el) {
var x = new Milestone(el);
});
// console.log('ok')
});

======================================== milestone_fragment.html

<div class="milestone">
<input type="checkbox" class="is-completed" name="is_completed" {% if milestone.is_completed %} checked=true {%endif%}>
<a href="{% url set_completed project.id milestone.id %}" style="display:none"></a>
<span class="title">{{ milestone.title|capfirst }}</span>
<img src="/media/graphics/ajax_loader.gif" id="request-progress" class="request-progress" style="display:none;" />
<ul class="todolist">
{% for todolist in milestone.todolists %}
<li>{{ todolist.name }}</li>
{% endfor %}
</ul>
</div>

======================================== milestone_list.htlm

{% extends "siren/base_project.html" %}
{% load siren %}
{% load humanize %}

{% block title %}List Milestone{% endblock %}

{% block extrahead %}
<link rel="stylesheet" type="text/css" href="/media/css/milestone.css" />
<script type="text/javascript" src="/media/js/milestone.js"></script>
{% endblock %}

{% block content %}
<div class="title-block">
<h1>Milestones</h1><span class="date">(Today is {% now "jS F" %})</span>
<a href="{% url milestone_add project.id %}">New Milestone</a>
<br class="clear"/>
</div>

<div class="late-block">
<h4>Late Milestones</h4>
<div class="inner-block">
{% for milestone in late_milestones %}
{% include "siren/milestone/milestone_fragment.html" %}
{% endfor %}
</div>
</div>


<div class="upcoming-block">
<h4>Upcoming Milestones</h4>
<div class="inner-block">
{% for milestone in milestones %}
{% include "siren/milestone/milestone_fragment.html" %}
{% endfor %}
</div>
</div>


<div class="completed-block">
<h4>Completed Milestones</h4>
<div class="inner-block">
{% for milestone in completed_milestones %}
{% include "siren/milestone/milestone_fragment.html" %}
{% endfor %}
</div>
</div>

{% endblock %}

{% block rightsidebar %}
{% endblock %}

================================= views.py (for handle Ajax request)

@login_required
def set_completed(request, project_id, milestone_id):
project = get_object_or_404(Project, pk=project_id)
milestone = get_object_or_404(Milestone, pk=milestone_id)
if request.is_ajax(): <---------------------
print "-->", request.POST
if request.POST['value'] == 'true':
status = True
else:
status = False
milestone.is_completed = status
milestone.save()
milestones = project.milestone_set.filter(is_completed=False, due_date__gt=datetime.datetime.today())
late_milestones = Milestone.objects.filter(
is_completed=False,
due_date__lt=datetime.datetime.today(),
project__projectmember__user=request.user,
project=project
)
completed_milestones = Milestone.objects.filter(
is_completed=True,
project__projectmember__user=request.user,
project=project
)
return render_to_response('siren/milestone/milestone_list.html', {
'milestones':milestones,
'late_milestones':late_milestones,
'completed_milestones':completed_milestones,
'project':project
}, context_instance=RequestContext(request))


=============================== views.py (for first list display)

@login_required
def milestone_list(request, project_id):
project = get_object_or_404(Project, pk=project_id)
if request.method == 'GET':
milestones = project.milestone_set.filter(is_completed=False, due_date__gt=datetime.datetime.today())
late_milestones = Milestone.objects.filter(
is_completed=False,
due_date__lt=datetime.datetime.today(),
project__projectmember__user=request.user,
project=project
)
completed_milestones = Milestone.objects.filter(
is_completed=True,
project__projectmember__user=request.user,
project=project
)
return render_to_response('siren/milestone/milestone_list.html', {
'milestones':milestones,
'late_milestones':late_milestones,
'completed_milestones':completed_milestones,
'project':project
}, context_instance=RequestContext(request))

===============================

**********************************************