Dynamische Alarmbox mit Foundation

Question

Wie soll ich eine neue Alarmbox dynamisch zu einer Seite mit Fundament hinzufügen? Es sieht so aus, als müsste ich das HTML-Markup für die Box einfügen und dann die Basis für die ganze Seite neu initialisieren ... das kann nicht stimmen, oder?

Gibt es eine einfache Methode, um eine Alarmbox dynamisch hinzuzufügen?

ich eine api erwarten würde, wie: $("#myElement").foundation('alert', "foo 123");

Beispiel:

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

Answer 1

Nein API, aber Sie können etwas tun:

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

Answer 2

ich einen etwas besseren Weg gefunden tue dies, ähnlich wie das @Ben Polinsky. Der einzige Unterschied besteht darin, dass das Modul "Alarm" nur neu initialisiert wird und nicht alles.

// 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 
); 

Answer 3

jadkik94 hat ein sehr schönes Beispiel gegeben. Basierend darauf habe ich eine vollständigere/verständliche Lösung:

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