Html bootstrap alert auto close difficulties

Question

I have do some research online and find out that the below code can auto hide an alert:

        function Testing()
        {
            $("#alertmsg").show();
            $("#alertmsg").fadeTo(2000, 500).slideUp(500, function(){
                $("#alertmsg").alert('close');
            });
        }

I have created a button to trigger the alert message:

<button class="btn btn-success" onclick="Testing()">Apply</button>

The problem is, it can only done once. What I mean is, when the page is loaded, and I click the button and the alert message will come out. And it will auto hide after a few seconds. After that when I press the button again in attempt to let the alert message come out, it fail already. Any idea what's wrong?

Replace `.alert('close')` with `.hide()` as `.alert('close')` removes the element than hides it. — anpsmn, Apr 10 '15 at 08:03

score 0 · Accepted Answer · answered Apr 10 '15 at 08:06

According to the documentation here using alert('close') removes the alert object from the DOM so you wont be able to display it again unless you re-add the html for the alert to the DOM.

If you are using show() to display your alert you may be better off using hide() to hide it rather than alert("close") so your code would become

    function Testing()
    {
        $("#alertmsg").show();
        $("#alertmsg").fadeTo(2000, 500).slideUp(500, function(){
            $("#alertmsg").hide();
        });
    }

Html bootstrap alert auto close difficulties

1 Answers1