CODEWITHSUNDEEP
jquerytwitter-bootstrap
user1159898
user1159898

Reputation: 25

Dismissing alerts created using an event of twitter bootstrap

I am trying to learn jquery and twitter bootstrap. I have two kinds of alerts:

  1. Alert upon page load
  2. Alert based on action (button click) in the simple example.

Pressing 'x' on the alert created by page load clears it. The same does not happen with the one loaded by the button. Am I missing something in my script?

<div class="container">
    <div class="row">
        <div class="span12">

            <div id="alert-section" class="alert alert-success">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <h4>Page load alert!</h4>
                This alert is displayed when page loads.
            </div>

            <button type="button" id="btn-alert" href="#">Open my alert</button>

            <div id="le-alert"></div>

        </div>
    </div>
</div>

    $('#btn-alert').click(function () {
      $('#le-alert').addClass('alert in');
        $('#le-alert').append('<button type="button" class="close" data-dismiss="alert">&times;</button><h4>Alert title</h4><p>This alert is dispalyed on button click</p>');
    });

    $('.close').click(function () {
      $(this).parent().removeClass('alert in');
      $(this).parent().empty();
    });

Code demo: http://jsfiddle.net/HgeUn/

Upvotes: 1

Views: 5244

Answers (5)

Dave Sag
Dave Sag

Reputation: 13486

I ran into this problem as well and the the problem with simply hacking the close-button with a click event is that I still needed 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: 0

shasi kanth
shasi kanth

Reputation: 7094

If you want to have a fading out effect while removing the alert message, try this:

HTML

<div class="alert alert-success fade in">
        <strong>Well done!</strong> You can remove this important alert message.
        <button type="button" class="close">&times;</button>
</div>

Jquery

$('.alert-success .close').click(function () {
        $(this).parent().hide('slow', function(){ $(this).remove(); });
});

Upvotes: 0

TechnoBlahble
TechnoBlahble

Reputation: 633

When you use the 'data-dismiss' attribute in your button, and close your button for the first time, the complete element disappears and you will not see the element again, until you reload/refresh the page. So remove the data-dismiss attribute, if you wish to see your alert pop-up repeatedly without page refresh.

Use jquery's hide() method to close the alert, rather than removing it completely from the Document Object Model. Refer to this, Twitter Bootstrap alert message close and open again for the same problem.

For example - 

<div class="alert alert-success fade in">
        <button type="button" class="close">&times;</button>
        <strong>Sucess!</strong> Values updated!!

The Javascript to close the button - 

$('.close').click(function () {
    $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 
});

Upvotes: 3

Musa
Musa

Reputation: 97672

What you're looking for is event delegation, only the .close div that in the document when you called $('.close') will have click handler bound to it. Any created after will not have the event handler bound to it.

$(document).on('click', '.close', function () {
  $(this).parent().removeClass('alert in');
  $(this).parent().empty();
});

http://jsfiddle.net/HgeUn/1/

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77986

You're appending a button with class "close" but binding to all elements with that class before your target button is created. you need to delegate. 

$('body').on('click', '.close', function() {
    $(this).parent().removeClass('alert in').empty();
});

If that works, replace body with a lower-level consistent wrapper to reverse DOM traversal efforts.

Upvotes: 4

Related Questions