title: Bootstrap popover with ajax
body: <p>I want to add a popover with dynamic content loaded with ajax.</p>
  
  <p>I found <a href="https://stackoverflow.com/questions/8130069/load-bootstrap-js-popover-content-with-ajax/9105085#9105085">this question</a> but since my problem is different, I cannot fit it the answer</p>
  
  <p>Here is my html code:</p>
  
  <pre><code>&lt;a id='{{user}}' class="manager" href="#" rel="popover" onclick="getValue(this)"&gt;{{user}}&lt;/a&gt;
  </code></pre>
  
  <p>and here the jquery part:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
          function getValue(control)
              {
              var id = $(control).attr('id');
              $('#loadingDiv').show();
              $("#manager").hide()
  
  
              $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
              $.getJSON($SCRIPT_ROOT + '/_jquerymanagerdetails', 
  
              {'id':id}
              ,
  
              function(data) {
  
              $("#manager").html(data.html);
              $("#manager").show()
              $('#loadingDiv').hide();
              });
  
          return false;
          };
  
  &lt;/script&gt;
  
  
  
  &lt;script type="text/javascript"&gt;
    var div = '&lt;div id="manager"&gt;&lt;/div&gt;
    $('[rel="popover"]').popover({ title: 'Look! A bird!', content: div, html:true, placement:"right"});
  &lt;/script&gt;
  </code></pre>
  
  <p>Until now, I've had another div with <code>id="manager"</code> and I load all the content there. But I want to do it on a popover and I think that it's kind of weird.</p>