jQuery, Twitter bootstrap: How do I generate alerts(and text) on based on actions?
<p>Here is my html for alerts</p>

<pre><code>&lt;div id="feature" class="feature"&gt;
    &lt;div id="alerts"&gt;
    &lt;/div&gt;
    # other html data
&lt;/div&gt;
</code></pre>

<p>Here is my <code>Ajax</code> call</p>

<pre><code>        // send the data to the server using .ajax() or .post()
        $.ajax({
            type: 'POST',
            url: 'addVideo',
            data: {
                video_title: title,
                playlist_name: playlist,
                url: id,
                success: notify('success', 'saved!')
                error: notify('failure', 'not saved!')
            },
</code></pre>

<p>Here is how <code>notify</code> function looks</p>

<pre><code>function notify(notify_type, msg) {
    var alerts = $('#alerts');
    alerts.append('&lt;a class="close" data-dismiss="alert" href="#"&gt;×&lt;/a&gt;');
    if (notify_type == 'success') {
      alerts.addClass('alert alerts-success').fadeIn('fast');
    }
    if (notify_type == 'failure') {
      alerts.addClass('alert alerts-error').fadeIn('fast');
    }
}
</code></pre>

<p>I am using reference from here - <a href="http://twitter.github.com/bootstrap/components.html#alerts" rel="nofollow">http://twitter.github.com/bootstrap/components.html#alerts</a>
When I debug on Firebug, I see <strong>No elements were found with the selector: "#alerts"</strong>
Although I can see the div tag in view-source, what must be wrong?</p>

<p><strong>Needed</strong>
- Based on response I would like to insert appropriate alert in text automatically</p>

<p>I am learning jQuery and I am sure this has error, but not able to understand where this is failing</p>
