Twitter Boostrap - getting alert message to stick to the top of the page

Question

I've been trying to get bootstrap's alerts messages to stick to the top like the navbar component but no success.

First, the context:
I'm sending an ajax request through jQuery and then process the response. This part of the idea is complete. All I need to do now is to know how to make an alert message appear at the top of the page right under the navbar that is fixed to the top thanks to bootstrap's navbars. I've tried many things with the affix classes but still can't do it.

Here's where I try to create a div element behaving like the alert message:

success:function(msg) {
    if (msg == "fail") {
        $('body').append('<div class="alert alert-error affix-top"><button type="button" class="close" data-dismiss="alert">×</button><strong>Error !</strong> You can\'t specify a closed status if status is not set as "closed"</div>');
    }
}

So I know for sure this works since the alert message is added but... at the bottom of the page. I want it to be like 5 pixels under the navbar component but can't make this work.

Any idea what I need to set to make this work?

Answer 1

If you want an element inserted before all other elements use .prepend(). this inserts the object as the first child instead of as the last like .append():

success:function(msg) {
    if (msg == "fail") {
        $('body').prepend('<div class="alert alert-error affix-top">...</div>');
    }
}

that gets it at the top of the page, then it'll be up to you to make sure it's where you want it thereafter.

Also, I would also look at either using a templating system or build your object using jQuery and avoid long string insertions (though I suppose this may be personal preference).