X-editable inline editing in Django - how to get CSRF protection?

ajax, django, x-editable

Solution

Wow, I spent so much time on this problem!

The shortlist version would be:

<a href="#" id="projectname{{project.id}}" data-type="text" data-pk="{{project.id}}" data-title="Enter project name" data-url="{% url 'updateproject' project.id %}" data-params="{csrfmiddlewaretoken:'{{csrf_token}}'}">{{ project.name }}</a>

And then, call

$('#projectname{{project.id}}').editable();

Problem

I am trying to get X-Editable inline editing of a model in Django. I am simply trying to change attributes of a model instance (in this case, the name of a Dataset object). I am not sure how to write the view so that it correctly captures the information from the ajax request: ``` POST /datasets/9/update_name/ { pk: 3 //primary key (record id) value: 'The Updated Name' //new value } ``` Then save the new name to the Dataset object. urls.py ``` # ex: /datasets/3/update_name url(r'^(?P<pk>\d+)/update_name/$', update_name , name='update_name'), ``` detail.html ``` <h1 class="page-title center"> <a href="#" id="datasetName">{{ dataset.name }}</a> </h1> <script> $('#datasetName').editable({ type: 'text', pk: {{ dataset.pk }}, url: '{% url 'datasets:update_name' dataset.pk %}', title: 'Edit dataset name' params: { csrf: '{% csrf_token %}'} # // This isn't working }); </script> ``` views.py ``` def update_name(request, dataset_id): # ... Update Dataset object ... json = simplejson.dumps(request.POST) return HttpResponse(json, mimetype='application/json') ``` EDIT: I believe the problem is that there is no CSRF protection. How can I add this in the X-editable form? ** EDIT 2: I have also tried this, as per the docs: ``` <h1 class="page-title center"> <a href="#" id="datasetName">{{ dataset.name }}</a> </h1> <script> // using jQuery 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 csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function(xhr, settings) { 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; } if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) { // Only send the token to relative URLs i.e. locally. xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); } } }); $('#datasetName').editable({ type: 'text', pk: {{ dataset.pk }}, url: '{% url 'datasets:update_name' dataset.pk %}', title: 'Edit dataset name', }); </script> ```

Original source