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');});"))
4 answers
solution1
2 2012-08-03 20:36:31
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.
solution2
1 2012-08-03 19:43:13
Add this to your script tag:
$(document).ready(function(){
toast("test");
});
solution3
0 2012-08-03 20:48:45
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.')
solution4
0 2012-08-06 21:28:20
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 %}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.