Retrieving a Django form field value using AJAX - ajax

Question

For each fact in facts, there is a form where you can upvote or downvote the fact.
Further explanation is found below.
Template and Form code are listed below respectively:
template
<ul>
{% for fact in facts %}
<form method='POST' action="{% url 'facts:list' fact.pk %}" id="list_vote">
{% csrf_token %}
{{ form }}
<input type="submit" value="vote" />
</form>
{% endfor %}
</ul>
forms.py code:
VOTE_CHOICES = [
(1, 'upvote'),
(0, 'downvote')
]
class Vote(forms.Form):
vote = forms.ChoiceField(choices=VOTE_CHOICES,
widget=forms.RadioSelect(attrs={'class': 'vote'}))
For each fact in models.Fact.objects.all(), there is a form, which consists of radio buttons of 2 inputs (upvote, downvote), created for this specific fact. What I'm now doing is basically Django 101: getting the value of the fact that is being voted and update its model accordingly in the views.
What I want to do is retrieve the value of this specific fact using AJAX and update the model accordingly without leaving/refreshing the page

Answer 1

I think I can help you. I just went through a lot of learning on AJAX and how to connect to DJANGO templates. You'll need some javascript on your template to make the AJAX connection.
Below is a generic AJAX javascript connector function I abstracted from my recent work. It needs both prototype.js http://prototypejs.org/ and jquery.js https://jquery.com/download/ imported into your template to run. Also requires a jQuery noconflict statement to allow both to run at the same time.
Basically all you need to do is pass the AJAXconnector function I wrote your data in a {'myvariable' : 'myvalue', 'myvariable2' : 'myvalue2'} format and destination is the url (in string format) which points to your views.py processing function to handle the AJAX data and return a reply. Also its important to use a local (relative) link as your destination.
I did a little tutorial on my blog if you want to check it out too - it walks through the AJAX connection on the template (javascript side) and the server (python side) http://www.americantechnocracy.com/getArticle/4/
the code I'm posting below also has some more description at:
http://www.americantechnocracy.com/getArticle/9
Let me know if you have questions. Happy to answer.
// Requires prototype.js
// Requires jquery.js
// enable use of both prototype and jquery
var $j = jQuery.noConflict();
// get the CSRF Token
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
// function for AJAX communication of data from Template to View.py and back
function AJAXConnector(parameters, destination) {
// myParameters = {'targetPK': pk, };
myParameters = parameters;
csrfHeader = {'X-CSRFToken' : csrftoken};
// This is the start of my AJAX Function
new Ajax.Request(destination, {
method: 'post', parameters: myParameters, requestHeaders: csrfHeader,
onSuccess: function (transport) {
var response = transport.responseText || "no response text";
data = response.evalJSON();
},
onFailure: function () {
alert('Something went wrong...');
}
});
}