jQuery: alert removes the div tag when clicked close

Question

My ajax looks like

   // send the data to the server using .ajax() or .post()
    $.ajax({
        type: 'POST',
        url: 'addVideo',
        data: {
            video_title: title,
            playlist_name: playlist,
            url: id
            // csrfmiddlewaretoken: '{{ csrf_token }}',
        },
        done: notify('success', 'video saved successfully'),
        fail: notify('error', 'There were some errors while saving the video. Please try in a while')
    });

notify looks like

function notify(notify_type, msg) {
    var alerts = $('#alerts');
    alerts.addClass('alert');
    alerts.append('<a class="close" data-dismiss="alert" href="#">×</a>');
    if (notify_type == 'success') {
      alerts.addClass('alerts-success').append(msg).fadeIn('fast');
    }
    if (notify_type == 'failure') {
      alerts.addClass('alerts-error').append(msg).fadeIn('fast');
    }
}

When I save click on button I get success message as

video saved successfully x(cross mark)

I click cross and notification is gone now
When I AGAIN save click on button, nothing happens, I see firebug complaining No elements were found with the selector: "#alerts"
My guess is clicking on cross mark removes the div="alerts" tag entirely from DOM. is it correct?

Question - How can I get the correct behavior. clicking on cross mark removes notification div, clicking on button to create creates the notification div again

Where is your code for when you click the close link in your alert? — MrOBrian, Aug 06 '12 at 21:47
may be you stop telling twitter bootstarap in each question ? it looks like ad now. and make ppl to ignore the question even if it simple js problem — zb', Aug 06 '12 at 21:57
What happens when you click that `x`? There must be some code that runs to close the alert, otherwise clicking it would just scroll to the top of the page. — MrOBrian, Aug 06 '12 at 22:01
ok, but WHY? Is it something Twitter Bootstrap is doing? Dig into the code, find out why things happen the way they do. If the default behavior is to remove the alert when it closes then either close it using some other method or recreate it each time you need it. — MrOBrian, Aug 06 '12 at 22:07
Could I ask you to post a simple demo, to [JS Fiddle](http://jsfiddle.net/), or similar, that reproduces your problem so we can see what's happening? And work out what's going wrong more easily. — David Thomas, Aug 06 '12 at 22:07

score 1 · Accepted Answer · answered Aug 06 '12 at 22:09

1

Actually according to this when you click x the plugin removes the div so when you try to select the div again using var alerts = $('#alerts'); after you close it once the div is not present in the dom.

A part of the plugin that is responsible for close/remove an element

function removeElement() {
  $parent
    .trigger('closed')
    .remove()
}

$.support.transition && $parent.hasClass('fade') ?
  $parent.on($.support.transition.end, removeElement) :
  removeElement()

Try to create a dynamic div each time (with id alerts) and append it to the body where you want to place it, it may work.

answered Aug 06 '12 at 22:09

The Alpha

143,660
29
287
307

thank you for help, I got the right direction and http://stackoverflow.com/questions/10082330/dynamically-create-bootstrap-alerts-box-through-javascript – daydreamer Aug 06 '12 at 22:52
Here's another approach: http://stackoverflow.com/questions/20494887/my-bootstrap-alert-will-not-display-after-being-closed/20495097#20495097 – Sk8erPeter Jun 10 '14 at 22:48

score 1 · Answer 2 · answered Sep 05 '12 at 15:42

1

As Sheikh Heera says, you can fix this in the plugin by changing

function removeElement() {
  $parent
  .trigger('closed')
  .remove()
}

to

function removeElement() {
  $parent
  .trigger('closed')
  .hide()
}

answered Sep 05 '12 at 15:42

TimL

19
1

1

So you suggest hacking the "core"? Bad idea. – Sk8erPeter Jun 10 '14 at 22:42

jQuery: alert removes the div tag when clicked close

2 Answers2