django: update database upon onsubmit dropdown - django

Question

I am trying to create a ticketing system. What I want to do is when I change the Status dropdown list it should update the status of the ticket in the database. Also, I would like to update and view in the same page. Any insights if that would be possible?
forms.py
class ViewForm(forms.Form):
statuses = [
('In Progress', 'In Progress'),
('On Hold', 'On Hold'),
('Done', 'Done'),
('ForQA', 'ForQA'),
('QAPassed', 'QAPassed'),
('QARevs', 'QARevs'),
]
status = forms.ChoiceField(label='Status', required=True, choices=statuses, widget=forms.Select(attrs={'onchange': 'actionform.submit();'}))
views.py
def view_sheet(request, project_id):
project = Project.objects.get(pk=project_id)
tickets = Ticket.objects.filter(project=project_id)
form = ViewForm()
context = {
'project': project,
'tickets': tickets,
'form': form,
}
return render(request, 'project/sheet/view.html', context)
view.html
<div class="tracker-sheet">
<div class="project-name">
<h1>{{project.name}}</h1>
</div>
<div class="actions">
<a href="{% url 'add_ticket' project.id %}">
<button type="submit">New Ticket</button>
</a>
</div >
<div class="tracker-table">
<table>
<tr>
<th>Total Worked</th>
<th>Status</th>
<th>Status Date</th>
<th>Received</th>
<th>Due Date</th>
<th>Agent</th>
<th>Sub Type</th>
<th>CID</th>
<th>Link</th>
<th>Task Description</th>
<th>Server</th>
<th>Qty</th>
<th>Info</th>
</tr>
{% for ticket in tickets %}
<tr>
<td><span class="table-constant"></span></td>
{% for field in form %}
<td>{{field}}</td> <!-- Status dropdown list -->
{% endfor %}
<td><span class="table-constant">{{ticket.status_date}}</span></td>
</form>
<td><span class="table-constant">{{ticket.received}}</span></td>
<td><span class="table-constant">{{ticket.due_date}}</span></td>
<td><span class="table-constant"></span></td>
<td><span class="table-constant">{{ticket.sub_type}}</span></td>
<td><span class="table-vary"></span></td>
<td><span class="table-constant">{{ticket.link}}</span></td>
<td><input type="submit" value="{{ticket.task_description}}"</td>
<td><span class="table-constant"></span></td>
<td><span class="table-constant">{{ticket.qty}}</span></td>
<td></td>
</tr>
{% endfor %}
</table>
</div>

Answer 1

Something like this should do it:
views.py
def update_status(request, ticket_id):
ticket = get_object_or_404(Ticket, pk=ticket_id)
status = request.GET.get(status)
if status:
ticket.status = status
ticket.save()
else:
raise Http404
return HttpResponse({'ticket_id': ticket.id, 'status': ticket.status, content_type='application/json')
And in the template (or remote js file):
<script>
$(document).ready(function(){
$(".statuses").change(function(){
$.ajax({url: "update_status/" + $(this).data("ticket_id) + "/?status=" $(this).val(), success: function(result){
console.log(result);
}});
});
});
</script>
urls.py:
....
url(r'^update_status/(?P<ticket_id>[\d]+)$', update_status),
....
NOTE: You'l need a different ticket id for each of these trs, so I'd add a data-ticket_id = {{ ticket.id }} to each select. That means your {{ field }} is going to have to get more declarative.
Something like:
<select id="status_{{ticket.id}}" class="statuses" data-ticket_id="{{ ticket.id }}" />
{% for k, v in statuses %}
<option value="{{ k }}">{{ v }}</option>
{% endfor %}

Answer 2

What you are asking is totally possible.
The idea:
One way would be to use a javascript function call to update this field (AJAX GET or POST). This script will request a URL managed by the same view, or a new one.
The view would then process the request, return some data for you to parse and optionally confirm that the change what successful, or display an error.
In practice:
You can use for example a jQuery Post, with the URL parameter the one to your view_sheet (or like I said, a new view just for this purpose).
In your view you could play with request.is_ajax(), a test on the request that will be true when it comes from your jQuery post.

Answer 3

What I want to do is when I change the Status dropdown list it should
update the status of the ticket in the database
Instead of this :
status = forms.ChoiceField(label='Status', required=True, choices=statuses, widget=forms.Select(attrs={'onchange': 'actionform.submit();'}))
Try this :
status = forms.ChoiceField(label='Status', required=True, choices=statuses, widget=forms.Select(attrs={'onChange':'this.form.submit()'}))