Dynamic Alert Box with Foundation

Question

How should I go about adding a new alert box dynamically to a page with foundation? It looks like I would have to insert the html markup for the box and then reinitialize foundation for the whole page... that can't be right, can it?

Is there some easy method for adding an alert box dynamically?

I would expect an api such as: $("#myElement").foundation('alert', "foo 123");

Example:

$.post("/some/url", {some:'data'})
    .fail(function(){
        $("#myElement").foundation('alert', 'Process failed!');
    });

Answer 1

No API but you can do something like this:

$.post("/some/url", {some:'data'})
.fail(function(){
    var alertBox = '<div data-alert class="alert-box"> Sorry, the request failed.  <a href="#" class="close">&times;</a></div>';
    $("#errorArea").append(alertBox).foundation();
});