Adding and removing elements on a web page dynamically using javascript

Question

So I'm using Twitter Bootstrap to create a web page, and I'd like to use their "Alerts" class to dynamically create and dismiss alerts at the bottom of my page. Basically my web page is used to monitor a wireless data acquisition system, so I'd like to be able to dynamically display messages related to that system, i.e. "Warning, Sensor 1 is not responding", and then be able to dismiss it dynamically when the event has passed, or have the user dismiss it. I'm more of an embedded systems guy, and haven't done much web development, so I'm really not sure where to start. My first inclination would be to do something like this:

<div id="Alert1"></div>
<div id="Alert2"></div>
...

And create enough divs at the bottom of my page to display a reasonable number of messages, then dynamically change them in code with something like:

var Alert1 = document.getElementById("Alert1");
Alert1.className = "alert alert-warning";
$('#Alert1').html("Error: Unable to write to logfile");

I can't imagine that this is a very good way to do it, though, and I'd have to have some way to manage what divs were in use, etc. What is a better way to dynamically create and remove these elements?

Vincent Ramdhanie · Accepted Answer · 2013-12-15 16:44:53Z

3

Using jQuery you can use append to dynamically add an element to the page.

  <div class="alerts"></div>

In JavaScript:

   $(".alerts").append("<div id='alert1'>Warning</div>");

Similarly you can remove the element using the remove() function.

answered Dec 15, 2013 at 16:44

Vincent Ramdhanie

103k23 gold badges143 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ComFreek · Accepted Answer · 2013-12-15 16:59:49Z

0

You don't need to create a <div> for any and all error messages you have. Just create one <div> and dynamically fill in the appropriate text (or HTML) of the currently active message.

Sample code:

// define this function globally
(function (exports) {

  var messages = {};
  function addMessage(type, msg) {
    if (typeof messages[type] === "undefined") {
      messages[type] = [];
    }
    messages[type].push(msg);
    render();
  }

  function render() {
    var html = "";
    for (type in messages) {
      if (messages.hasOwnProperty(type)) {

        for (var i=0, len=messages[type].length; i<len; i++) {
          html += type + ": " + messages[type][i];
        }
      }
    }
    $("#Alert").html(html);
  }
  exports.addMessage = addMessage;
})(window);

// somewhere in your code
addMessage("Error", "Unable to write to logfile");

It would be even better to declare "Error" as a constant/variable somewhere:

var ERR_ERROR = "Error";
var ERR_WARNING = "Warning";

edited Dec 15, 2013 at 16:59

answered Dec 15, 2013 at 16:45

ComFreek

29.5k18 gold badges107 silver badges157 bronze badges

3 Comments

IanM Over a year ago

Would I be able to have multiple messages using that method? Ie: Warning: Sensor 1: Intermittent packet loss Warning: Logfile approaching size limit Error: Unable to communicate with Sensor 2. Where each message is individually dismissable?

ComFreek Over a year ago

@user95788 No, changeMessage() in its current state always overwrites the last message. You would need to have an array of messages. I'll update my answer.

ComFreek Over a year ago

@user95788 I've updated my answer. Now, the only problem is that you cannot hide specific messages. The solution would be that a click on a messages triggers the removal of that specific message from the array. (If I have confused you more than you were before, I'm sorry.)

Hatem Alimam · Accepted Answer · 2013-12-15 17:22:46Z

You can define a template for your alerts, holding the message and the type of the message.

Then according to the type of the message you would append the message into the page.

Consider the following function

function addAlert(type, message) {
_.templateSettings.variable = "element";
var tpl = _.template($("#alertTemplate").html());
var tplData = {
    message: message,
    type: type
  };
$("#mainContainer").append(tpl(tplData));//the div or container where you want your messages to appear
}

And the template would be

<script type="text/html" id="alertTemplate">
    <div class = "alert alert-<%= element.type %>" > <%= element.message %> </div>
</script>

and of course the container of your alerts

<div id="mainContainer"> 

</div>

Then in your alert handler you would call addAlert with the appropriate parameters.

and to remove all the alerts

  $("#mainContainer").find('.alert').remove();

You can find working example at http://jsfiddle.net/hatemalimam/EpM7W/6/

Collectives™ on Stack Overflow

Adding and removing elements on a web page dynamically using javascript

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related