Execute jQuery function from a Django view?

Question

I have a sign out view and when the User successfully signs out, I want to execute a jQuery function that says "you've been signed out!" in a toast pop up. How do I call the jQuery function from the Django view. I got the jQuery code from here: http://shawntabai.com/wp/2011/09/06/toast-notifications-using-jquery/

VIEWS.PY:

def signout(request):
    logout(request)
    return HttpResponseRedirect(reverse(index))

jQuery Function stored in my header:

<head>
<script type="text/javascript">
    function toast(sMessage)
{
    var container = $(document.createElement("div"));
    container.addClass("toast");

    var message = $(document.createElement("div"));
    message.addClass("message");
    message.text(sMessage);
    message.appendTo(container);

    container.appendTo(document.body);

    container.delay(100).fadeIn("slow", function()
    {
        $(this).delay(2000).fadeOut("slow", function()
        {
            $(this).remove();
        });
    });
}
</script>
<head>

Can I do something like this:

def signout(request): 
    logout(request) 
    return HttpResponseRedirect(reverse(index, "$(document).ready(function(){toast('test');});"))

dannyroa · Accepted Answer · 2012-08-03 20:36:31Z

2

I would suggest using Django messages instead - https://docs.djangoproject.com/en/dev/ref/contrib/messages/.

You can check if "messages" is populated in your template and display the toast notification.

answered Aug 3, 2012 at 20:36

dannyroa

5,5716 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bobek · Accepted Answer · 2012-08-03 19:43:13Z

1

Add this to your script tag:

$(document).ready(function(){
  toast("test");
});

answered Aug 3, 2012 at 19:43

bobek

8,0388 gold badges41 silver badges76 bronze badges

3 Comments

thedeepfield Over a year ago

So when I do that "test" pops up, but how do I get it to do that from within the django signout view?

bobek Over a year ago

put the code in signout view and replace test with "You've been signed out"

thedeepfield Over a year ago

Sorry, I'm new to jQuery/Django... do you mean like this: def signout(request): logout(request) return HttpResponseRedirect(reverse(index, "$(document).ready(function(){toast('test');});"))

Izkata · Accepted Answer · 2012-08-03 20:48:45Z

Unfortunately, I don't know JQuery, so this is going to be more pseudocode-y/Prototype-y, but this is the best way to do it. (JQuery users, feel free to fix it with actual JQuery)

On your Logout link, add an event handler that does an AJAX request to the view:

$('a').click(function() {
   Ajax.send('/path/to/logout/', {
      onSuccess: function(response) {
         toast(response.responseText, function() {
             window.location = '/path/to/index/';
         });
      },
      onFailure: function(response) {
         toast(response.responseText);
      }
   });
})

Note that I added a second argument to toast(). You'll want to change toast to this:

function toast(sMessage, action)
{
    var container = $(document.createElement("div"));
    container.addClass("toast");

    var message = $(document.createElement("div"));
    message.addClass("message");
    message.text(sMessage);
    message.appendTo(container);

    container.appendTo(document.body);

    container.delay(100).fadeIn("slow", function()
    {
        $(this).delay(2000).fadeOut("slow", function()
        {
            $(this).remove();
            if (action) action();
        });
    });
}

And finally, the view:

def signout(request):
    if logout(request):
        return HttpResponse('You have successfully logged out!')
    else:
        return HttpResponseBadRequest('There was an error logging out.')

thedeepfield · Accepted Answer · 2012-08-06 21:28:20Z

0

ANSWER: I combined a two of the responses to get my answer:

Use the jQuery plugin here in your header http://shawntabai.com/wp/2011/09/06/toast-notifications-using-jquery/
Use django messages framework: https://docs.djangoproject.com/en/1.4/ref/contrib/messages/
plug in the {{ message }} into the jQuery script.

VIEW.PY

def signout(request):
    logout(request)
    messages.add_message(request, messages.INFO, 'Signout Successful.')
    return HttpResponseRedirect(reverse(index))

INDEX.html

{% if messages %}
    {% for message in messages %}
        <script type="text/javascript">
            $(document).ready(function(){toast("{{ message }}");});
        </script>
    {% endfor %}
{% endif %}

answered Aug 6, 2012 at 21:28

thedeepfield

6,20625 gold badges75 silver badges108 bronze badges

Collectives™ on Stack Overflow

Execute jQuery function from a Django view?

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related