sharataka sharataka - 7 months ago 5
Javascript Question

How do I POST with jQuery/Ajax in Django?

I am trying to POST data using jQuery/AJAX in Django and am having trouble. When I run the code below and click on the 'test' button, the entire page re-loads again, which isn't what I want to happen (that's why I'm using AJAX). I'm also not able to confirm the ajax request is getting to the python view. Any advice?

edit



I've made the edits for return false and
event.preventDefault()
. A new page doesn't load, but I'm still not able to see the updated text in the div id = 'message' field. I'm not sure if the data is getting sent. I'm seeing in the console:

POST /edit_favorites/ HTTP/1.1" 403 2294


views.py



from django.shortcuts import render_to_response
from django.http import HttpResponse

def edit_favorites(request):
if request.is_ajax():
message = "Yes, AJAX!"
else:
message = "Not Ajax"
return HttpResponse(message)


urlconf:



url(r'^edit_favorites/', 'edit_favorites'),


html:



<form method='post' id ='test'>
<input type="hidden" value="video34" />
<input type='submit' value='Test button'/>

<div id = 'message'>Initial text</div>

</form>


javascript:



<script type="text/javascript">
$(document).ready(function() {
$("#test").submit(function(event){
event.preventDefault();
$.ajax({
type:"POST",
url:"/edit_favorites/",
data: {
'video': $('#test').val() // from form
},
success: function(){
$('#message').html("<h2>Contact Form Submitted!</h2>")
}
});
return false;
});

});
</script>

Answer

Misplaced return false;. It should be at the end of .submit() function. So move it one line upwards.

$(document).ready(function() {
       $("#test").submit(function(event){
            $.ajax({
                 type:"POST",
                 url:"/edit_favorites/",
                 data: {
                        'video': $('#test').val() // from form
                        },
                 success: function(){
                     $('#message').html("<h2>Contact Form Submitted!</h2>") 
                 }
            });
            return false; //<---- move it here
       });

});

UPDATE:

About the issue POST /edit_favorites/ HTTP/1.1" 403 2294. Check on this post which looks similar to your issue,

Django jQuery post request

Comments