CODEWITHSUNDEEP
jquerypythondjango
zogo
zogo

Reputation: 515

javascript notification in django

i am relatively new in web application,i am using django in one of my project.Here i have a upload page.i want to add javacript/jquery notification in my upload page,that is ,after uploading a content,a message will be shown in top of my page where the message will be something like that.. "your file upload has been done" and this message will appear for some seconds and then it will be dissappear automatically.now this is my upload view...

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
from django.contrib.auth.forms import PasswordChangeForm
from django.contrib.auth.decorators import login_required
from django.contrib.auth.views import logout as Signout
from django.contrib.auth.models import User




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 is the upload.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 how can i do this?

Upvotes: 1

Views: 1221

Answers (2)

user2647646
user2647646

Reputation: 101

You can set cookies in response, when photo saved, and write some jquery code to get and show it, code like this:

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

response.set_cookie('message', "your file upload has been done") 
return response

Jquery code to get this message from cookies with plugin https://github.com/carhartl/jquery-cookie, and show on page:

msg = $.cookie("message")
if (msg)
    alert(msg);

And you can choice a jquery notification plugin(such as http://ned.im/noty/) to replace "alert(msg)".

Upvotes: 2

skzryzg
skzryzg

Reputation: 1159

A simple example accepting an ajax request might look something like this:

First modify your view to only accept ajax requests and send back a basic http response, otherwise refuse access. You dont need to render a full response.

def UserImageUpload(request):
    if request.method == 'POST' and request.is_ajax():
        ...
        [your form validation code]
        ...
        return HttpResponse('ok')
    else:
        return HttpResponseNotAllowed(['POST'])

And then have your javascript give a simple alert according to the response received from your server.

Im not sure how you're handling AJAX, but if you're using Jquery, these instructions might help: http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

Then here's some prepackaged ajax tools for Django: dajaxice: http://www.dajaxproject.com/

Upvotes: 0

Related Questions