Question

Here is my html for alerts

<div id="feature" class="feature">
    <div id="alerts">
    </div>
    # other html data
</div>

Here is my Ajax call

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

Here is how notify function looks

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

I am using reference from here – http://twitter.github.com/bootstrap/components.html#alerts
When I debug on Firebug, I see No elements were found with the selector: “#alerts”
Although I can see the div tag in view-source, what must be wrong?

Needed
– Based on response I would like to insert appropriate alert in text automatically

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

Answer 1

There are some errors in your ajax function, you have put the success function within the object and missed a ), try the following:

    $.ajax({
        type: 'POST',
        url: 'addVideo',
        data: {
            video_title: title,
            playlist_name: playlist,
            url: id },
        success: notify('success', 'saved!'),
        error: notify('failure', 'not saved!')
        })