How can I show an error message if ajax post failed?

Question

I have an ajax post request that works well if the user is logged in but gives an error if the user is logged out.

The error that gets thrown in the console

POST http://localhost/r2/public/votes 500 (Internal Server Error)

I have an authentication gate forbidding users to vote if they're not logged in. All is good so far.

But I would like to show a customized an error message, perhaps in a simple modal window.

at the moment, I am trying to console.log() but it's not printing anything, I keep getting the same error as above.

$('.topic').upvote();

$('.vote').on('click', function (e) {
    e.preventDefault();
    var $button = $(this);
    var postId = $button.data('post-id');
    var value = $button.data('value');
    $.post('http://localhost/r2/public/votes', {postId:postId, value:value}, function(data) {
    if (data.status == 'failure')
    {
       console.log('You are not logged in.');
    }
   }, 'json');
});

score 2 · Accepted Answer · answered Oct 23 '15 at 21:11

2

See http://api.jquery.com/jquery.post/

var jqxhr = $.post( "example.php", function() {
  alert( "success" );
}).fail(function() {
  alert( "error" );
});

And it is not ideal to use 500 for authentication errors as there is 401 for that.

answered Oct 23 '15 at 21:11

Oleg Sklyar

9,834
6
39
62

Thanks, that did it. I am going to remove the alert success because I don't need that. However, can I start calling a modal window instead of the alert error? – Halnex Oct 23 '15 at 21:16
Happy it worked for you, but I would recommend to think about further issues in your overall solution. Although it is right to validate authentication when the vote is submitted, why do you provide this option in your web solution at all? Why un-authenticated users see the vote button or have it enabled with a post action behind? Why does your code refer to the explicit host, port and protocol instead of using relative paths or a configuration? Why do you prefer an HTTP error status over an API return value, e.g. status 200 but the payload contains information about rejection? And so on. – Oleg Sklyar Oct 23 '15 at 21:24
I am building an app similar to reddit, so the voting buttons must always appear even if user is logged out. Once clicked a login modal window should appear which I am trying to do right now. And I am not using relative urls because mod_rewrite is messed up on my local machine. So I've added the modal's html tag and I'm trying to call it using this `$('#myModal').show();` but nothing is showing when the request fails. – Halnex Oct 23 '15 at 21:33
The alert on 500 works now, does it not? If it does, your original question is fully answered (and I would be happy to get the acceptance for that). The modal display is a completely separate story for which you did not provide sufficient code. Is `myModal` HTML element present in the DOM as hidden, does it have the correct CSS for modal display? We do not know that as it is not in your original question... As for the rest, quite lame excuses. Why would you not fix your setup before you code anything, why would you not generate HTML with links corresponding the login status etc? – Oleg Sklyar Oct 23 '15 at 21:46
Sorry about that, I tried to award you earlier but it said I need to wait 7 minutes. Yes, the alert on `fail` works, and I've added `sweetalerts` so I'm getting some nice alert messages. You are right, lame excuses, but keep in mind, I am still learning and this is the first real app that I've built, so I have a few concepts to get used to. is the fail method equivalent to 500? I'm confused here. – Halnex Oct 23 '15 at 21:51
1

The `fail` method will be triggered on any erroneous status (i.e. not 2xx). See https://en.wikipedia.org/wiki/List_of_HTTP_status_codes. There is also further useful information under http://stackoverflow.com/questions/21756910/how-to-use-status-codes-200-404-300-how-jquery-done-and-fail-work-internally. I must say I would need to test to see what happens on 3xx (redirect), fail or success. With respect to the modal dialog check this http://stackoverflow.com/questions/17646788/how-to-reuse-modal-html-from-bootstrap – Oleg Sklyar Oct 23 '15 at 21:58

How can I show an error message if ajax post failed?

1 Answers1