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!');
    });

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!');
    });

• javascript
• jquery
• zurb-foundation

• which event will trigger your alert box to appear? can you give a more realistic example / scenario? – Glenn Ferrie Commented Feb 10, 2014 at 15:39
• I've edited the question to include a specific example of how I'd expect it to work – Joe Flateau Commented Feb 10, 2014 at 15:59

3 Answers 3

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();
});

I found a slightly better way to do this, similar to what the @Ben Polinsky did. The only difference is that it only re-initializes the "alert" module instead of everything.

// Create the HTML
var $message = $('<div data-alert class="alert-box"><span></span><a href="#" class="close">&times;</a></div>');
// Fill it
$message.addClass(severity).children("span").text(message);
// Add the div and re-initialize foundation-alert for its parent
$("#errorArea").prepend($message).foundation(
    "alert", // libraries -- if it's undefined or "reflow" it will loop on all libs
    undefined, // method -- if it's undefined it will call init
    {speed: "slow", animation: "slideUp", callback: function() {}} // options -- optional, to customize the alert box
);

jadkik94 has given a very nice example. Based on it I have a more plete/understandable solution:

var message = "You are doomed";
var type = "alert"

showMessage(message, type);

function showMessage(message, type) {
    var alertMarkup = $('<div data-alert class="alert-box"><span></span><a href="#" class="close">&times;</a></div>');
    alertMarkup.addClass(type);
    alertMarkup.children("span").text(message);
    $("#foundation-alerts").prepend(alertMarkup).foundation(
        "alert",
        undefined
    );
}