CSRF issue with ajax and no form in the template

Question

I am currently getting a permission denied when I try to use POST with ajax. I believe this is because of CSRF as my post works fine when I use the @csrf_exempt decorator on my view. I would appreciate it if someone could tell me what I might be doing wrong here.I tried this SO post however that does not help.I then attempted to follow the python documentation here regarding this issue however I am still getting the permission denied error. Here is my code

In the view I am doing something like this

@csrf_protect
def showMgmt(request):
    cntxt = {}
    .....
    .....
    response = render(request, 'management.html', cntxt)
    return response

@csrf_protect
def AjaxDestination(request):
    return response("...")

Now initially first the showMgmt function display the management.html which contains the following ajax request. This ajax request attempts to do a POST event on the other function AjaxDestination

page:management.html

<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));
}
function sameOrigin(url) {
    // test that a given url is a same-origin URL
    // url could be relative or scheme relative or absolute
    var host = document.location.host; // host + port
    var protocol = document.location.protocol;
    var sr_origin = '//' + host;
    var origin = protocol + sr_origin;
    // Allow absolute or scheme relative URLs to same origin
    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
        // or any other URL that isn't scheme relative or absolute i.e relative.
        !(/^(\/\/|http:|https:).*/.test(url));
}

$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
            // Send the token to same-origin, relative URLs only.
            // Send the token only if the method warrants CSRF protection
            // Using the CSRFToken value acquired earlier
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

function jsonResult_ajaxCall(url,data,callback){
              $.ajax({
                  type: 'POST',
                  url: url,
                  dataType: "text",
                  data : data,

                  success: function(response) {
                         var jresult = JSON.parse(response);
                            callback(jresult);
                        },
                  error: function(xhr) {
                            callback(false); 
                        }
         });
        }

The function jsonResult_ajaxCall basically calls the ajax function. Any suggestion on why I am still getting permission denied would be helpful. Thanks