Problem with Alert fade in (bootstrap), only shown once

Question

Problem with Alert fade in (bootstrap), only shown once

Navigation

#1 by (2 votes)

2

I'm trying to perform a bootstrap alert. it is displayed correctly when the response is received correctly, or some error. but when I perform another action that involves another ajax response, this one no longer shows me the alert.

Here is my index.php

<!DOCTYPE html>
<html lang="en">
<head>
<title>Inicio</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<!-- zqui dibujo el alert -->
<div id="alertDiv"></div>


</body>
</html>

in my javascript file.

$.ajax({
          url: "ToAjax.php",
          type: "POST",
          data: fd,
          contentType: false,
          processData:false,
          success: function(data){

            var json = $.parseJSON(data);
            console.log(json);
               $('#frmNewProduct').trigger('reset');
               $('#modalProduct').modal('toggle');

         // aqui dibujo el alert      
               $('#alertDiv').append(
                '<a href="#" class="close" data-dismiss="alert">&times;</a>'
               )
              .addClass("alert alert-success fade in")
              .append('<strong>' + json.message + '!</strong> Your message has been sent successfully.');


          },
          error: function(data){
            var json = $.parseJSON(data);
               $('#modalProduct').modal('toggle');

          }
        });



    });


    };

It is worth mentioning that the data came from a modal. and upon successful registration, this closes.

but the alert is only drawn once. I have to refresh the page for when I make another insert this draw the alert. the requests are successful, so my problem is in front end. Maybe the way I'm drawing it. I do not know if it's the right one. someone to guide me Greetings!

jquery php bootstrap bootstrap-3

asked by JuanL 26.12.2018 в 20:28

source

1 answer

React name change when clicking. state Variable in object path

score 2 · Accepted Answer

The problem is that data-dismiss removes alertDiv . To achieve what you want, you must manage what the button does and change to data-hide like this:

function showAlert() {
         // aqui dibujo el alert      
               $('#alertDiv').html("").append(
                '<a href="#" class="close" data-hide="alert">&times;</a>'
               )
              .addClass("alert alert-success fade in")
              .append('<strong> json.message !</strong> Your message has been sent successfully.').show();
              $("[data-hide]").on("click", function(){
        $(this).closest("." + $(this).attr("data-hide")).hide();
    });
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Inicio</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- zqui dibujo el alert -->
<div id="alertDiv"></div>
<button onclick="showAlert()">show</button>

</body>
</html>