Alerts added with JS cannot be dismissed #60

ghost · 2016-06-22T15:32:07Z

Alerts added to the document using DOM operations in JS cannot be dismissed. A testcase is attached below:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <div id="user-messages" class="container col-sm-12">
   <!-- <div class="alert alert-danger fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">&times;</a>
    {message 1}
   </div> -->
  </div>
  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/1.0.2/bootstrap-native.min.js"></script>
  <script type="text/javascript">
  function showMessage (html_msg) {
    var a = document.createElement("div");
    a.classList.add("alert", "alert-danger", "fade", "in");
    a.innerHTML = '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>';
    a.innerHTML += html_msg;
    var x = document.getElementById("user-messages");
    x.appendChild(a);
  }
  showMessage("{message 2}");
  </script>
</body>
</html>

In addition, and quite strangely in fact, if you remove the commented out section in the above testcase, the alerts can be dismissed for the user-messages div (but not for any other div).

The text was updated successfully, but these errors were encountered:

thednp · 2016-06-22T15:34:33Z

My demo showcases that later added alerts work properly, but please download the latest version and test (the CDN is not up to latest version yet) to make sure we're talking the same thing.

Also make sure you check the demo on the button scripting, there is an example with a properly handled later added alert that works perfect.

ghost · 2016-06-22T16:31:40Z

@thednp It is also an issue in the latest version.

thednp · 2016-06-22T16:38:57Z

OK then, please provide a test demo I can check.

ghost · 2016-06-22T17:12:58Z

@thednp Please check my first post, it contains a testcase and other details.

I initially didn't want to provide a JSFiddle since dismissible alerts do not work at all there at all, be it JS or non-JS ones but here it is anyway.

thednp · 2016-06-22T17:26:21Z

jsfiddle doesn't work because it always adds js to the <head>. Here's your example on codepen.

As described in my demo/doc, you must always make sure to have all JS in your site's <body>, maybe that's your issue.

ghost · 2016-06-22T18:02:36Z

Apparently I've not been able to get the message across:

I'm trying to add a dismissible alert using JS.
When I try to do this in an div that doesn't have an alert already in it as part of the HTML source (e.g. <div id="user-messages"></div>, the alert that's added with JS can't be dismissed.
As a workaround to this, I can put a preexisting alert, (i.e. <div id="user-messages"><div class="alert alert-info"><a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a></div></div> but this workaround shouldn't be needed, right?

thednp · 2016-06-22T18:04:16Z

Of course not. The Alert component can handle later added alerts on the fly as long as you have the right JS at the right place.

ghost · 2016-06-22T18:08:43Z

But then it's not working as intended! Please take the above file and try running it in a browser, first as is (i.e. no preexisting alert) and then with the commented out section enabled (i.e. with a preexisting alert), I hope you will understand what this issue is all about.

thednp · 2016-06-22T18:19:58Z

It seems Alert does not work in that case, when no alert component found and initialized before your code, any other later added alerts won't work.

But here's an easy fix, when you append the alert to your wrapper, also initialize it, here's the fixed example. I added new Alert(a); to initialize after the append.

ghost · 2016-06-23T10:38:54Z

Thank you for looking into this and providing a workaround.

However, are there any plans to resolve this issue in bootstrap.native itself?

thednp · 2016-06-23T10:54:04Z

What I gave you isn't a workaround, it's the right way to do.

thednp closed this as completed Jun 22, 2016

thednp mentioned this issue Jun 27, 2016

Dynamic content #62

Closed

thednp added the duplicate known issue label Aug 22, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Alerts added with JS cannot be dismissed #60

Alerts added with JS cannot be dismissed #60

ghost commented Jun 22, 2016

thednp commented Jun 22, 2016 •

edited

Loading

ghost commented Jun 22, 2016

thednp commented Jun 22, 2016

ghost commented Jun 22, 2016 •

edited by ghost

Loading

thednp commented Jun 22, 2016 •

edited

Loading

ghost commented Jun 22, 2016 •

edited by ghost

Loading

thednp commented Jun 22, 2016

ghost commented Jun 22, 2016 •

edited by ghost

Loading

thednp commented Jun 22, 2016 •

edited

Loading

ghost commented Jun 23, 2016

thednp commented Jun 23, 2016

Alerts added with JS cannot be dismissed #60

Alerts added with JS cannot be dismissed #60

Comments

ghost commented Jun 22, 2016

thednp commented Jun 22, 2016 • edited Loading

ghost commented Jun 22, 2016

thednp commented Jun 22, 2016

ghost commented Jun 22, 2016 • edited by ghost Loading

thednp commented Jun 22, 2016 • edited Loading

ghost commented Jun 22, 2016 • edited by ghost Loading

thednp commented Jun 22, 2016

ghost commented Jun 22, 2016 • edited by ghost Loading

thednp commented Jun 22, 2016 • edited Loading

ghost commented Jun 23, 2016

thednp commented Jun 23, 2016

thednp commented Jun 22, 2016 •

edited

Loading

ghost commented Jun 22, 2016 •

edited by ghost

Loading

thednp commented Jun 22, 2016 •

edited

Loading

ghost commented Jun 22, 2016 •

edited by ghost

Loading

ghost commented Jun 22, 2016 •

edited by ghost

Loading

thednp commented Jun 22, 2016 •

edited

Loading