Given this :
$(document).ready(
function() {
$(".js-up").click(function(){
//pass the username from index to the view, return the username from view, (silly - but ok for testing to see how it gets passed back and forth) then update the html? How?
$.ajax({
method: "POST",
url: addItem,
data:{'UserName' : user, 'csrfmiddlewaretoken': csrftoken},
success: function(data){
//labels = data.labels;
//defaultData = data.default;
console.log(data.UserName)
},
error: function(error_data){
console.log("error");
console.log(error_data)
},
});
})
$(".js-down").click(function(){
console.log('down')
//send information to database
})
}
);
Once the ajax function has successfully passed something to a view, the view has then done something with the model, what do I need to do in order to reflect the changes to the model in the front-end?
I keep seeing examples on stack-exchange where they edit the DOM by injecting new HTML, is that the only way to do it? It seems a bit hackey to me having the Ajax function manipulating HTML, seems like it hijacks the templates (which somebody might have spent time crafting)
My view for playing with - note it doesn’t actually update anything - but if it did?
class AddItem(View):
def post(self, request, *args, **kwargs):
#print('called view')
username = request.POST.get('UserName')
print(username)
data = {
'itemAdded': 'item was added', 'UserName' : username
}
return JsonResponse(data)
What about API calls – would they work better?
