0

I want to add a popover with dynamic content loaded with ajax.

I found this question but since my problem is different, I cannot fit it the answer

Here is my html code:

<a id='{{user}}' class="manager" href="#" rel="popover" onclick="getValue(this)">{{user}}</a>

and here the jquery part:

<script type="text/javascript">

        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;
        };

</script>



<script type="text/javascript">
  var div = '<div id="manager"></div>
  $('[rel="popover"]').popover({ title: 'Look! A bird!', content: div, html:true, placement:"right"});
</script>

Until now, I've had another div with id="manager" 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.

Community
  • 1
  • 1
Tasos
  • 7,325
  • 18
  • 83
  • 176
  • use bootstrap popover selector option to delegate popover plugin http://getbootstrap.com/javascript/#popovers – A. Wolff Dec 06 '13 at 10:33
  • @A.Wolff Do you mean something like the above? I change the question with your suggestion, but still I cannot make it work. – Tasos Dec 06 '13 at 10:56
  • i don't know bootstrap enough, but i guess you should try: `$('body').popover({ selector: '[rel="popover"]',title: 'Look! A bird!', content: div, html:true, placement:"right"});` – A. Wolff Dec 06 '13 at 10:58
  • Unfortunately, something is wrong with the code.The popover doesn't event appear. But thank you for your suggestion :) – Tasos Dec 06 '13 at 11:02

0 Answers0