AJAX Call to python function not happening from JavaScript function in Django

Question

This is a full flow which has to be taken care here. I am coding in Django/Python/Web Development.

I have an html page which has got a dummy button which is triggering all the functions that I want to perform now. Instead of the dummy button I want an uploadFunction() to perform the same actions. I googled and found that the best way to do this was by using AJAX, since the action to be performed requires to hit the server.

This is my uploadFunction() in jsfunctions.js file

    function upload() {
   //does some upload      
    alert('before dummy')
    ajaxCallFunction();
}

I am giving a call to a ajaxCallFunction() which I have in another separate file ajax.js. The ajaxCallFunction() is as follows:

 $(document).ready(function(){
   function ajaxCallFunction(){
    alert('right before ajax call')
     $.ajax({
        type: "POST",
        url: "/dummy/{{ frame.slug }}/",
        alert('AJAX CALL');
        data: {
        'snapshot' : $('#snapshot').val(),
        },
        success: dummy,
        dataType: 'html'
        alert('just finished')
        }
        headers:{
            'X-CSRFToken':csrftoken
        }
    });
}
});    

function dummySuccess(data, textStatus, jqXHR)
{
    $('#dummySuccess').html(data)
}

I want my the upload() to call the ajaxCallFunction() and redirect it to a method in views.py (which I have mapped in my urls.py). However, my code does not hit the ajaxCallFunction at all.(I cant see the alerts that I have put in the ajaxCallFunction). In my calling page I have all of these included.

<script language="javascript" type="text/css"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>        
<script language="javascript" src ="/static/js/jsfunctions.js"></script>
<script language="javascript" src ="/static/js/ajax.js"></script>

I have the the function which gets the CSRF Token too (since this is a post method) in my ajax.js. Am I missing something here? What else do I need to do to make this ajax call? Please help. Thanks in advance :)

kreld · Accepted Answer · 2014-07-22T14:26:15.907

In JavaScript the order in which you load the .js files matters. Have you tried loading ajax.js before jsfunctions.js?

Basically when jsfunctions.js is loaded in your browser the functions in ajax.js are undefined if the latter has not been loaded.

Also, make sure that there is a field called 'csrfmiddlewaretoken' present in the data in the ajax call. From a maintainability perspective, instead of handling the data directly you could keep it in a form and then serialize it when you send it to your back end. Like so:

<form id="my-form" method="POST" action="/dummy/{{ frame.slug }}/">
    {% csrf_token %}
    <input name="whatever" value="your_data_goes_here" />
</form>

Then in your ajax call:

var form = $('#my-form');
$.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    data: form.serialize(),
    success: function() {
        alert("Huzzah!");
    },
    error: function() {
        alert("Oh no!");
    }
});

And finally in your views.py, you can address your data:

if "whatever" in request.POST:
    my_data = request.POST.get("whatever")

Hi, I am able to make a call alright. Thanks! Now, I want to pass a user-uploaded image as the data. `mypic = request.GET.get("snapshot") print type(mypic)` is the code I have in my `views.py` function. but the type gives me a unicode instead of an image object. How do I pass the image from the HTML to the view function using the AJAX call? — naiveDeveloper, Jul 29 '14 at 07:00
You should check out the answer at http://stackoverflow.com/questions/5871730/need-a-minimal-django-file-upload-example There's a very good explanation there as to how to upload files, plus a working example. Best of luck! — kreld, Jul 29 '14 at 08:58

AJAX Call to python function not happening from JavaScript function in Django

1 Answers1