Saving edited data back to database using django and knockout - django

Question

I am trying to figure out how to save edited data back to the database using django forms and knockout. The edit.html file has been changed to use knockout to display and edit information on the edit page. I need to figure out how to change the views.py file to save the information. The page seems to be behaving how I want it to (I think...), but I don't know how to update the information back to the database once editing has occurred since I am not using django fields in the .html file.
I have read this thread: using knockout.js with django forms?, but that is using fields in the html file instead of the knockout code. I'm not opposed to going that route if that is a better method, but was struggling a little with the implementation of that idea when I tried it.
The relevant info from the views.py file:
#render_to('phones/edit.html')
def EditPhone(request, number):
p_number = PhoneTable.objects.get(number=number)
customer_list = list(Customer.objects.values('customer_id'))
JSON_customer_list = json.dumps(customer_list)
if not request.POST:
return dict(
form=PhoneForm(instance=p_number),
CallType=p_number.call_type,
number=number,
Customer=p_number.customer_id,
extension=p_number.profile.extension,
department=p_number.profile.department,
JSON_customer_list=JSON_customer_list
)
form = PhoneForm(request.POST, instance=p_number)
if not form.is_valid():
return dict(form=form)
form.save()
messages.success(request, 'Phone Number updated')
return redirect('phones:available_phones', number=p_number.number)
class PhoneForm(ModelForm):
class Meta:
model = PhoneTable
This is the html file:
{% block pagetitle %}Edit Phone Number: {{ number }}{% endblock %}
{% block content %}
<div class="row">
<div class="span2">
<div class="pull-right">Call Type:</div>
</div>
<div class="span6">
<select data-bind="options: callTypes, value: callType"></select>
</div>
</div>
<div class="row">
<!-- ko if: callType() === "Direct" -->
<div class="span2">
<div class="pull-right">Extension:</div>
</div>
<div class="span6">
<input type="text" data-bind="value: editExtension" />
</div>
<!-- /ko -->
</div>
<div class="row">
<!-- ko if: callType() === "Sales" -->
<div class="span2">
<div class="pull-right">Customer:</div>
</div>
<div class="span6">
<select data-bind="options: customerDisplays, value: selectedCustomer"></select>
</div>
<!-- /ko -->
</div>
<div class="row">
<!-- ko if: callType() === "Service" -->
<div class="span2">
<div class="pull-right">Service Profile:</div>
</div>
<div class="span6">
<select data-bind="options: servProfiles, value: servProfile"></select>
</div>
<!-- /ko -->
</div>
<div class="form-actions">
<input type="submit" class='btn btn-primary' value="Update" />
<a class="btn" href="{% url phones:available_phones %}">Cancel</a>
</div>
{% endblock %}
{% block javascript_compress %}
<script type='text/javascript' src="{% static 'js/knockout/knockout.js' %}"></script>
<script type="text/javascript">
$(function(){
customerListFromServer = {{ JSON_customer_list|safe }};
var PhoneViewModel = function() {
var self = this;
customerList = [];
for (var key in customerListFromServer) {
customerList.push(customerListFromServer[key].customer_id);
}
self.callTypes = ko.observableArray(['Free', 'Direct', 'Sales', 'Service']);
self.callType = ko.observable("{{ CallType }}");
self.editExtension = ko.observable("");
self.servProfiles = ko.observableArray(["{{ extension }}", "{{ department }}"]);
self.servProfile = ko.observable();
self.customerDisplays = ko.observableArray(customerList);
self.selectedCustomer = ko.observable();
}
ko.applyBindings(new PhoneViewModel());
});
</script>
{% endblock %}
Any suggestions? If I am missing something, please let me know. Thank you.

Answer 1

I figured this out, so I will post how if it can help anyone else.
I added a form id and post method along with a hidden field to the html file. As Kevin suggested, I used a data-bind on the submit button and added a submit function to the ko viewModel. Then I changed the views.py file to get the json data and to save the edited values.
#render_to('phones/edit.html')
def EditPhone(request, number):
p_number = PhoneTable.objects.get(number=number)
customer_list = list(Customer.objects.values('customer_id'))
JSON_customer_list = json.dumps(customer_list)
if not request.POST:
return dict(
form=PhoneForm(instance=p_number),
CallType=p_number.call_type,
number=number,
Customer=p_number.customer_id,
extension=p_number.profile.extension,
department=p_number.profile.department,
JSON_customer_list=JSON_customer_list
)
json_data = request.POST.get('json_blob')
obj = loads(json_data)
p_number.call_type = obj.get("callType")
p_number.customer_id = obj.get("selectedCustomer")
p_number.profile.extension = obj.get("editExtension")
p_number.profile.department = obj.get("servProfile")
p_number.save()
messages.success(request, 'Phone Number updated')
return redirect('phones:available_phones')
class PhoneForm(ModelForm):
class Meta:
model = PhoneTable
The html file:
{% block pagetitle %}Edit Phone Number: {{ number }}{% endblock %}
{% block content %}
<form id="phone_form" method="post">
{% csrf_token %}
<input type="hidden" id="json_blob" value="" />
<fieldset>
<div class="row">
<div class="span2">
<div class="pull-right">Call Type:</div>
</div>
<div class="span6">
<select data-bind="options: callTypes, value: callType"></select>
</div>
</div>
<div class="row">
<!-- ko if: callType() === "Direct" -->
<div class="span2">
<div class="pull-right">Extension:</div>
</div>
<div class="span6">
<input type="text" data-bind="value: editExtension" />
</div>
<!-- /ko -->
</div>
<div class="row">
<!-- ko if: callType() === "Sales" -->
<div class="span2">
<div class="pull-right">Customer:</div>
</div>
<div class="span6">
<select data-bind="options: customerDisplays, value: selectedCustomer"></select>
</div>
<!-- /ko -->
</div>
<div class="row">
<!-- ko if: callType() === "Service" -->
<div class="span2">
<div class="pull-right">Service Profile:</div>
</div>
<div class="span6">
<select data-bind="options: servProfiles, value: servProfile"></select>
</div>
<!-- /ko -->
</div>
<div class="form-actions">
<input type="submit" class='btn btn-primary' value="Update" data-bind="click: submitForm" />
<a class="btn" href="{% url phones:available_phones %}">Cancel</a>
</div>
{% endblock %}
{% block javascript_compress %}
<script type='text/javascript' src="{% static 'js/knockout/knockout.js' %}"></script>
<script type="text/javascript">
$(function(){
customerListFromServer = {{ JSON_customer_list|safe }};
var PhoneViewModel = function() {
var self = this;
customerList = [];
for (var key in customerListFromServer) {
customerList.push(customerListFromServer[key].customer_id);
}
self.callTypes = ko.observableArray(['Free', 'Direct', 'Sales', 'Service']);
self.callType = ko.observable("{{ CallType }}");
self.editExtension = ko.observable("");
self.servProfiles = ko.observableArray(["{{ extension }}", "{{ department }}"]);
self.servProfile = ko.observable();
self.customerDisplays = ko.observableArray(customerList);
self.selectedCustomer = ko.observable();
self.submitForm = function() {
$("#json_blob").val(ko.toJSON(self));
$("#phone_form").submit();
}
}
ko.applyBindings(new PhoneViewModel());
});
</script>
{% endblock %}

Answer 2

With knockout, i typically like to control as much as possible through the view model, including saving information back to the server. in your case, i would have the submit button execute a save function inside the view model like so:
html:
<input type="submit" class='btn btn-primary' value="Update" data-bind="click: submitForm" />
in your knockout view model, there are a couple of ways you can save the data:
self.submitForm = function () {
// save via postback
ko.utils.postJson('/EditPhone', ko.toJSON(self));
// save via ajax
$.ajax({
type: 'POST',
data: ko.toJSON(self),
url: '/EditPhone',
success: function () {
alert("saved");
},
error: function () {
alert("no worky");
}
})
}
unfortunately, i have no experience with django so im not sure exactly how you need to set that up in order to accept the json data coming back to the server