No {% csrf_token %} value?

Question

JavaScript

Hello! Please help fix the error.

There is a page where a list of objects is displayed (in my case, a list of tasks). I'm using AJAX to add and then update this list. I see the following error in the console when I try to add a new entry:

UserWarning: A {% csrf_token %} was used in a template, but the context did not provide the value. This is usually caused by not using RequestContext.

views.py:

def task_add(request, project_code):
    data = dict()
    project = get_object_or_404(Project, pk=project_code)
    if request.method == 'POST':
        task_form = TaskAddForm(request.POST)
        if task_form.is_valid():
            name = task_form.cleaned_data['name']
            if Task.objects.filter(project=project_code, name=name).exists():
                task_form.add_error('name', _('Task with the same name is already exist!'))
            else:
                task = task_form.save(commit=False)
                task.project = project
                task.save()
                data['form_is_valid'] = True
                tasks = Task.objects.filter(project=project_code)
                data['html_task'] = render_to_string('project/task_list.html', {'project': project, 'task': task, 'tasks': 'tasks'})
        else:
            data['form_is_valid'] = False
    else:
        task_form = TaskAddForm()
    context = {'project': project, 'task_form': task_form}
    data['html_task_form'] = render_to_string('project/task_add.html', context, request=request)
    return JsonResponse(data)

JS:

//TASK
$(function () {
    var loadForm = function () {
        var btn = $(this);
        $.ajax({
            url: btn.attr("data-url"),
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
                $("#modal").modal("show");
            },
            success: function (data) {
                $("#modal .modal-content").html(data.html_task_form);
            }
        });
    };

    var saveForm = function () {
        var form = $(this);
        $.ajax({
            url: form.attr("action"),
            data: form.serialize(),
            type: form.attr("method"),
            dataType: 'json',
            success: function (data) {
                if (data.form_is_valid) {
                    $("#task-list").html(data.html_task);
                    $("#modal").modal("hide");
                }
                else {
                    $("#modal .modal-content").html(data.html_task_form);
                }
            }
        });
        return false;
    };
    // Create Task
    $("#task-add-button").click(loadForm);
    $("#modal").on("submit", ".js-task-add-form", saveForm);
    // Update Task
    $("#task-list").on("click", "#js-edit-task-button", loadForm);
    $("#modal").on("submit", ".js-task-edit-form", saveForm);
});

Answer 1

Because nobody uses render_to_string. Use render, or even better CBV