title: Twitter Bootsrap: Popover and Auto Refresh
body: <p>I'm using Twitter Boostrap with a website re-design, and I need some jQuery help. I'm using the 'Popover' add-on that is packaged with bootstrap, and I have it in a #div tag (#onlinedata to be specific), and I'm using jquery to reload the div every 10 seconds. This works fine, however, if you happen to be hovering over the link that activates the popover when the div refreshes, the popover gets stuck.</p>
  
  <p>I'm using this code for the refresh:</p>
  
  <pre><code>setInterval(function(){
          $("#onlinedata").load("http://website.com #onlinedata");
  }, 10000);
  </code></pre>
  
  <p>And if needed, the code that activates the popover:</p>
  
  <pre><code>$(function () {
          $('a[rel=popover]').popover({
              placement:'right',
              title:'Title',
              content: $('#div-that-contains-data').html()
          });
  });
  </code></pre>
  
  <p>Is there a way to avoid the popover from being stuck open when the div reloads?</p>
  
  <p>Any help is greatly appreciated.</p>
  
  <hr>
  
  <p><em><strong>Associated HTML</em></strong></p>
  
  <p>The <strong><code>$id</code></strong> is a key specific for each popover because I have multiple popovers.</p>
  
  <p>The popover portion which is hidden until the <code>popover_controller</code> is hovered:</p>
  
  <pre><code>&lt;div id="controller_popup_$id" style="display:none;"&gt;
     &lt;div style="font-size:11px"&gt;
         //data_fetched_from_database
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The link that triggers the popover</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#" rel="popover_controller_$id"&gt;Link Title&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>And finally, the current javascript I'm using (it gets looped through the database records so each record gets the following javascript):</p>
  
  <pre><code>$(function () {
      $('a[rel=popover_controller_$id]').popover({
            placement:'right',
            title:'Title (this is fetched from the database for each popover)',
            content: $('#controller_popup_$id).html()
      });
  });
  $(document).ready(function() {
      // refreshing code
      setInterval(function() {
          $('#controller_popup_$id').hide(); // close any open popovers
          // fetch new html
          $('#onlinedata').load('http://website-link.com #onlinedata', function() {
              // after load, set up new popovers
              $('a[rel=popover_controller_$id]').popover({
                  placement:'right',
                  title:'Title (this is fetched from the database for each popover)',
                  content: $('#controller_popup_$id').html()
              });
          });
      }, 10000); // 10 second wait
  });
  </code></pre>
  
  <hr>
  
  <h1>**New Code Witch Semi-Works**</h1>
  
  <p>I'm using the following code which semi-works. The only problem I'm having is after it reloads the #onlinedata div, it multiplies the popover links.</p>
  
  <pre><code>$(document).ready(function() {
          $('a[rel=popover_controller_$id]').popover({
              placement:'right',
              title:'Title',
              content: $('#controller_popup_$id').html()
          });
          // refreshing code
          setInterval(function() {
              // fetch new html
              $('a[rel=popover_controller_$id]').load('http://websiteurl.com/ #onlinedata', function() {
  
                  $('a[rel=popover_controller_$id]').popover('destroy'); // remove old popovers
                  // after load, set up new popovers
                  $('a[rel=popover_controller_$id]').popover({
                      placement:'right',
                      title:'Title',
                      content: $('#controller_popup_$id').html()
                  });
  
              });
          }, 10000); // 10 second wait
  });
  </code></pre>
  
  <hr>