Mootools in Django Introduction

**************************************
MooTools
========
--------------------------example-1
window.addEvent('domready', function() {


});

* This is needed for the working of MooTool.

-------------------------- example -2

<script type="text/javascript" src="/media/js/mootools-1.2.4-core-nc.js"></script>

<script type="text/javascript">

window.addEvent('domready', function() {

$('timer').addEvent('click', function(){
alert('clicked!');
});

});
</script>

-------------------------- example -3
Timer Stopwatch using Mootool Django Ajax

<script type="text/javascript">

var timerFunction = function(){
console.log(this.hour, this.minute);
var second = this.second++;
if(this.second == 60) {
this.second=0;
this.minute++;
}
if(this.minute == 60) {
this.minute=0;
this.hour++;
}

var currentTime = this.hour+':'+this.minute+':'+this.second;
this.field.set('text', currentTime);
}




window.addEvent('domready', function() {




$$('.timer_start').addEvent('click', function(){

var task_id = this.getParent('.task').get('rel');
var time = this.getParent('.task').getElement('.actual_time span').get('text');

// var myRequest = new Request({url: '{% url timer %}'}).send();
// console.log('dddd',this,task_id,time);
var x = time.split(':');
var hour = x[0].toInt();
var minute = x[1].toInt();
console.log(hour,minute);
var currentCounter = new Hash({
second: 0,
minute: minute,
hour: hour,
field: this.getParent('.task').getElement('.actual_time span')
});
var simpleTimer = timerFunction.periodical(1000, currentCounter);
// $clear(simpleTimer);
return false;
});

});
</script>



{% block content %}

<h3> PROJECT DETAILS </h3>
<h4> Proje Name: {{ project.name }}</h4>
Estinated Time : {{ project.estimated_time}}
<p>
<a href="{% url task_add project.id %}"> Add Task </a>
</p>

<h3> TASKS </h3>

{% for task in project.tasks %}
<div class="task" rel="{{ task.id }}">
<h4> Task : {{ task.task_name}} </h4>
<p> Estimated time: {{ task.estimated_time }} </p>
<p class="actual_time"> Actual Time: <span>{{ task.actual_time }}</span></p>
<p>
<a href="{% url task_edit task.project_id task.id %}">Edit</a>
<a href="{% url task_delete task.project_id task.id %}"> Delete </a>
<input type="submit" value="Start" class="timer_start" />
</p>
</div>
{% endfor %}

{% endblock %}


--------------------------

**************************************
AJAX using Mootool Django
--------------------------------------
<script type="text/javascript">
window.addEvent('domready', function() {

$('timer_start').addEvent('click', function(){
var myRequest = new Request({url: '{% url timer %}'}).send('name=saju');
alert (myRequest);
return false;
});


$('timer_stop').addEvent('click', function(){

return false;
});

});
</script>



def timer(request):
print request.POST['name']
return HttpResponse('Timer test')


--------------------------------

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


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