Ajax displays message and hides right away

Question

This code of mine is a bit buggy, its function is to display the message and leave it there until it refreshes the page, but it is disappearing.

$('form#yes').on('click', function() {
    function isyes() {
        $.ajax({
            type: 'POST',
            dataType: 'JSON',
            url: 'vote/yes',
            data: $(this).serialize(),
            success: function(vote) {
                if (vote['computed'] === true) {
                    $('.text-success').show();
                    $('.text-success').html(vote['message']);
                } else if (vote['computed'] === false) {
                    $('.text-danger').show();
                    $('.text-danger').html(vote['message']);
                }
            }
        })
    }
    isyes();
})

Why? You have some Load and I’m not seeing?

Answer 1

I think it might be some kind of incompatibility with Function, since you are creating a Function within another, the most correct thing would be to just call Function in the click event:

function isyes() {
        $.ajax({
            type: 'POST',
            dataType: 'JSON',
            url: 'vote/yes',
            data: $(this).serialize(),
            success: function(vote) {
                if (vote['computed'] === true) {
                    $('.text-success').show();
                    $('.text-success').html(vote['message']);
                } else if (vote['computed'] === false) {
                    $('.text-danger').show();
                    $('.text-danger').html(vote['message']);
                }
            }
        });
    }

$('form#yes').on('click', function() {
    isyes();
})

Or leave only the ajax:

$('form#yes').on('click', function() {
        $.ajax({
            type: 'POST',
            dataType: 'JSON',
            url: 'vote/yes',
            data: $(this).serialize(),
            success: function(vote) {
                if (vote['computed'] === true) {
                    $('.text-success').show();
                    $('.text-success').html(vote['message']);
                } else if (vote['computed'] === false) {
                    $('.text-danger').show();
                    $('.text-danger').html(vote['message']);
                }
            }
        });
})

If this is not the problem check the console if by any chance this ajax is being called 2 times, because when using ajax to load, sometimes Function is cached in the current run causing the click to call the function 2 times (your code and the one that was cached) ai Uga everything, but I still recommend the withdrawal of this Function from inside the event click.