Alert bootstrap on ajax call

Question

Alert bootstrap on ajax call

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have an ajax that deletes an image, after the deletion, I would like the page to reload and display a "Deleted successfully!" message. with alert boostratp. I already researched the forums and did not think it 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

One 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();
}

ajax bootstrap-3

asked by anonymous 25.09.2016 / 01:51

2 answers

0

No need to reload.

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 the alert-dismissible. Take a look at the bootstrap docs.

25.09.2016 / 02:25

How to send values in a hidden way to the SQL database inside forms with POST [closed] .NET app can only access Web service with Fiddler on

score 1 · Accepted Answer

You can try the following:

Create the function to delete the image!
In AJAX, you do not need to reload (try doing reload )!
Within .success or .done try to make the alert appear using the fadeIn('slow'); and fadeOut('slow');
After giving fadeOut , just give 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');
        }
    });