CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Jeff Finn
Jeff Finn

Reputation: 2055

My Bootstrap alert will not display after being closed

Hi I have the following alert that is hidden on the page

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    @TempData["selCode"]
</div>

I display it with the following javascript

    $('#send_reject_btn').click(function () {
        var selRowIds = $("#ApprovalGrid").jqGrid('getGridParam', 'selarrrow');
        if (selRowIds.length > 0) {
            $('#reject_alert').show();
        } else {
            $('#selectCodeNotificationArea').show();
        }
    });

This is obviously linked to a button in my html.

After the alert is shown if I close it using the<button type="button" class="close" data-dismiss="alert">&times;</button> The next time I press the button to open the alert I can see $('#selectCodeNotificationArea').show(); being called in my debug screen but the alert doesn't display again.

Has anyone experienced this before?

Upvotes: 51

Views: 44743

Answers (8)

Kalim ul Haq
Kalim ul Haq

Reputation: 328

As mentioned in bootstrap documentation the alert element completely removed when you click on the close button

When an alert is dismissed, the element is completely removed from the page structure.

But you can stop this behavior by removing data-dismiss="alert" if you are using bootstrap 4 and data-bs-dismiss="alert" if you are using bootstrap 5 and add a click event to a close button like onclick="this.parentElement.style.display='none'". Example:

<div class="alert alert-primary alert-dismissible fade show" role="alert" style="display: none;">
    <span class="message"></span>
    <button type="button" class="btn-close" aria-label="Close" onclick="this.parentElement.style.display='none'"></button>
</div>

Upvotes: 0

OJB1
OJB1

Reputation: 2785

Bootstrap 5 Solution --> Tested with .NET Core 5.0

The bootstrap alert HTML code (these are stored in a Razor View Component)

<!-------------------------------->
<!-- INFORMATION Bootstrap Alert-->
<!-------------------------------->
<div class="alert alert-info alert-dismissible fade show bg-info" role="alert" id="bootstrapInformationAlertDiv" style="display:none;">
    <div class="custom-alert-div-information text-light font-weight-bold text-dark" id="bootstrapInformationAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapInformationAlertBtn"></button>
</div>
<!---------------------------->
<!-- SUCCESS Bootstrap Alert-->
<!---------------------------->
<div class="alert alert-success alert-dismissible fade show bg-success" role="alert" id="bootstrapSuccessAlertDiv" style="display:none;">
    <div class="custom-alert-div-success text-light font-weight-bold" id="bootstrapSuccessAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapSuccessAlertBtn"></button>
</div>
<!---------------------------->
<!-- WARNING Bootstrap Alert-->
<!---------------------------->
<div class="alert alert-warning alert-dismissible fade show bg-warning" role="alert" id="bootstrapWarningAlertDiv" style="display:none;">
    <div class="custom-alert-div-warning text-black font-weight-bold" id="bootstrapWarningAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapWarningAlertBtn"></button>
</div>
<!--------------------------->
<!-- DANGER Bootstrap Alert-->
<!--------------------------->
<div class="alert alert-danger alert-dismissible fade show bg-danger" role="alert" id="bootstrapDangerAlertDiv" style="display:none;">
    <div class="custom-alert-div-danger text-light font-weight-bold" id="bootstrapDangerAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapDangerAlertBtn"></button>
</div>

The above view component is added at the top of each web page:

<!-- Bootsrap Alert View Component -->
<div>
    @await Component.InvokeAsync("BootstrapAlert")
</div>

I then added a small JS file to my project (bootstrapAlert.js):

$("#bootstrapInformationAlertBtn").click(function () {
    event.preventDefault();
    $(this).parent().hide();
});

$("#bootstrapSuccessAlertBtn").click(function () {
    event.preventDefault();
    $(this).parent().hide();
});

$("#bootstrapWarningAlertBtn").click(function () {
    event.preventDefault();
    $(this).parent().hide();
});

$("#bootstrapDangerAlertBtn").click(function () {
    event.preventDefault();
    $(this).parent().hide();
});

In my main Layout.cshtml file I add the script ref to the above js file so it's auto loads with each page in my site:

<!-- Load the js script file on each page for hiding the bootstrap alert when closed -->
<script src="~/js/bootstrap-alert-custom-scripts/bootstrapAlert.js"></script>

When calling a bootstrap alert to open from any of my javascript functions, I use the following code:

window.scrollTo(0, 0); // Scroll to the top of the page.
document.getElementById("bootstrapWarningAlertMessageDiv").innerHTML = 'Write your custom message here for the current issue / notification!';
$("#bootstrapWarningAlertDiv").show();
setTimeout(function () { $("#bootstrapWarningAlertDiv").hide(); }, 8000);

The window scroll to command is a nice little touch because the user may be scrolled some way down the page and if you're always adding the alert in the same place i.e. at the top of the page, then they wouldn't necessarily see it when it opens up.

Upvotes: 0

jsa
jsa

Reputation: 399

I used the following working approach. 

$(document).ready(function(){
    $("#btnFV").click(function()
    {
        $("#alertFV").addClass("in");
    });

    $("#alertFV").on("close.bs.alert", function ()
    {
        $("#alertFV").removeClass("in");
        return false;
    });
});

Html body contains below alert

<button id="btnFV" class="form-control">Button To Show/Hide Alert</button>

<div id="alertFV"  class="alert alert-danger alert-dismissable fade show">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
      </button>
      <strong>Danger!</strong> 
    </div>

Upvotes: 0

shashikant
shashikant

Reputation: 91

Better way is to remove , data-dismiss="alert" from your tag , and use class name i.e. close to hide and show the error / warning .

// WHEN CLOSE CLICK HIDE THE ERROR / WARNING .
$(".close").live("click", function(e) 
{   
    $("#add_item_err").hide();
});

// SOME EVENT TRIGGER IT.
$("#add_item_err").show();

[ I am working on dynamically added elements , that's why I am using 'live' , you may have to change as per your req.]

Upvotes: 9

Dave Sag
Dave Sag

Reputation: 13486

I ran into this problem as well and the the problem with ticked solution above is that I still need access to the standard bootstrap alert-close events.

My solution was to write a small, customisable, jquery plugin that injects a properly formed Bootstrap 3 alert (with or without close button as you need it) with a minimum of fuss and allows you to easily regenerate it after the box is closed.

See https://github.com/davesag/jquery-bs3Alert for usage, tests, and examples.

Upvotes: 1

user3263221
user3263221

Reputation: 11

Actually bootstrap alert are designed to be removed rather than hidden. You can tell that by looking at the alert message, it hasn't got any wrapping element. So any attempt to change alert message require extra code (finding text node elements). You should redesign your application and create new .alert element every time you willing to change it / show it again.

Upvotes: 0

Артем Кустиков
Артем Кустиков

Reputation: 381

Bootsrap $(selector).alert('close') (http://getbootstrap.com/javascript/#alerts) actually removes alert element so you cannot display it again. To implement desired functionality just remove data-dismiss="alert" attribute from close button defintion and add some little event handler to hide the alert

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
   <button type="button" class="close alert-close">&times;</button>
   @TempData["selCode"]
</div>

<script>
$(function() {
   $(document).on('click', '.alert-close', function() {
       $(this).parent().hide();
   })
});
</script>

Upvotes: 5

David Christiansen
David Christiansen

Reputation: 5899

The Data-dismiss completley removes the element. You would need to hide the alert if you are intending on showing it again.

For example;

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
    <button type="button" class="close" data-hide="alert">&times;</button>
    @TempData["selCode"]
</div>

and this JS

$(function(){
    $("[data-hide]").on("click", function(){
        $(this).closest("." + $(this).attr("data-hide")).hide();
    });
});

Upvotes: 82

Related Questions