javascript/jquery notification after successful form submission in django

Question

i am new in javascript and its relative libraries and framework,i am just struggling to give notification when i have successfully complete any form submission.I have a project which is developed by Django and in this project i have an image upload form.Here is the views.py of the image upload form...

from django.shortcuts import render_to_response,RequestContext
from photo.models import Photo
from django.contrib.auth.decorators import login_required
from myprofile.forms import DocumentForm
from django.contrib.auth import authenticate, login, logout, REDIRECT_FIELD_NAME

def UserImageUpload(request):

    if request.method == 'POST':
         form = DocumentForm(request.POST,request.FILES)
         if form.is_valid():

             newdoc = Photo(photo = request.FILES['photo'],user = request.user)
             newdoc.save()


    else:
         form = DocumentForm()

    uploaded_image = Photo.objects.all()

    return render_to_response('myprofile/user_image_upload.html',{'uploaded_image':uploaded_image,'form':form},context_instance = RequestContext(request))

and this is the forms.py...

from django import forms

class DocumentForm(forms.Form):
     photo = forms.ImageField(
          label='Select a file'

     )

and this the template.. (upload_image.html)

 {% extends 'base.html'%}
 {% block title%}User Image Upload {% endblock %}
 {%block content%}
 <div class="container" style="margin-top:5%">
      <div class="col-md-4 col-md-offset-4">
          <div class="well">
      <form action="" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <p>{{ form.non_field_errors }}</p>
            <p>{{ form.photo.label_tag }} {{ form.photo.help_text }}</p>
            <p>
                {{ form.photo.errors }}
                {{ form.photo }}
            </p>

            <p><input type="submit" value="Upload" class="btn btn-success" /></p>


    </form>
    </div>
  </div>
 </div>

 {%endblock%}

now i want to give notification to user after he succesfully upload an image, or you can say, after the successful upload form submission . How can i do this with javascript/jquery?

Answer 1

Normally, you'd want to redirect after a successful form submission, ie:

 if form.is_valid():
      newdoc = Photo(photo = request.FILES['photo'],user = request.user)
      newdoc.save()
      return http.HttpResponseRedirect('....')

if you're doing ajax-y form submission, you'll need to return something that the ajax call understands as success, eg:

 if form.is_valid():
      newdoc = Photo(photo = request.FILES['photo'],user = request.user)
      newdoc.save()
      response = http.HttpResponse(json.dumps({"status": 'ok'}))
      response["Content-Type"] = 'application/json'
      return response