CODEWITHSUNDEEP
javascriptjqueryajaxdjango
ohjuny
ohjuny

Reputation: 481

(CSRF token missing or incorrect.) using AJAX in Django

So I am trying to create some basic search functionality to my Django project using Ajax. However, I keep getting an error about the CSRF token. Here is the javascript in my template:

<script type='text/javascript'>
var csrftoken = Cookies.get('csrftoken');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});


$('#search').keyup(function () {
    var search_text = $(this).val();
    console.log(search_text);

    $.ajax({
        type: "POST",
        url: "/search/",
        data: {
            'search_text': search_text,
        },
        success: function (data) {
            console.log('it worked');
        },
    });
});

</script>

Any ideas why this isn't working?

Upvotes: 1

Views: 1760

Answers (1)

wtreston
wtreston

Reputation: 1061

Try putting it in $(document).ready(function(){})

So like this:

$(document).ready(function(){
    var csrftoken = Cookies.get('csrftoken');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});


$('#search').keyup(function () {
    var search_text = $(this).val();
    console.log(search_text);

    $.ajax({
        type: "POST",
        url: "/search/",
        data: {
            'search_text': search_text,
        },
        success: function (data) {
            console.log('it worked');
        },
    });
});
)}

Upvotes: 1

Related Questions