title: jQuery, Twitter bootstrap: How do I generate alerts(and text) on based on actions?
body: <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>