Alert bootstrap in ajax call

Question

I have an ajax that deletes an image, after the deletion, I would like the page to give a Reload and show a message of "Deleted Successfully!" with Alert boostratp. I’ve searched the forums and didn’t find anything that would help me.

jQuery(document).ready(function() { 
    jQuery('#teste').submit(function(){
        var dados = jQuery( this ).serialize();

        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: "crud/excluirImagem.php",
            data: dados,
                success: function(data) {
                    location.reload();
            }
        });

    });

});

Bootstrap alert

A solution

 jQuery(document).ready(function() { 
    jQuery('#teste').submit(function(){
    var dados = jQuery( this ).serialize();

 $.ajax({
    type: 'POST',
    dataType: 'json',
        url: "crud/excluirImagem.php",
        data: dados,
        success: function(data) {
        $('.alert').fadeIn('2000');
            setTimeout(function(){ reloadPagina() }, 3000);

            }
        });
        return false;
    });
});

function reloadPagina() {
    location.reload();
}

Answer 1

You can try to do the following:

• Create image delete function!
• In AJAX, you don’t need to re-load (try to do it without Reload)!
• Within the .success or .done try to make Alert appear using the functions fadeIn('slow'); and fadeOut('slow');
• After giving fadeOut, just give the Reload on the page, simple! Any questions just ask!

Example

$.ajax ({
        type: 'POST',
        dataType: 'json',
        url: "crud/excluirImagem.php",
        data: dados,
            success: function(data) {
                $('#alert').fadeIn('2000');
                //Intervalo
                $('#alert').fadeOut('5000');
        }
    });

Answer 2

No need to re-load.

html

<div id="alert" class="alert alert-success" role="alert"></div>

Javascript

$(function () {
 $("#alert").css('display', 'none');
 $('#teste').submit(function(){
   var dados = jQuery( this ).serialize();  
   $.ajax({
     type: 'POST',
     dataType: 'json',
     url: "crud/excluirImagem.php",
     data: dados,
     success: function(data) {
       $("#alert").css('display', 'block');
       $("#alert").html('sua_msg_aqui!');
     }
   });
 });
});

Tb has Alert-dismissible. Take a look at bootstrap Ocs.