CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrappopover
Mark VV
Mark VV

Reputation: 1

HTML not executing in bootstrap in popover content

I am trying to execute HTML in my popover content but what is actually showing is the HTML code rather than the formatted text.

HTML:

<li><a  id="pop1" class="icon-question-sign pop" href="player link" target="ifrm">player1</a></li>
<li><a  id="pop2" class="icon-question-sign pop" href="player link" target="ifrm">player2</a></li>

<div id="pop1_content" class="popSourceBlock">
<div class="popContent">
    <p>This is the content for the <strong>first</strong> player.</p>
</div>
</div>
<div id="pop2_content" class="popSourceBlock">
<div class="popContent">
    <p>This is the content for the <strong>second</strong> player.</p>
</div>

STYLE:
<style>
   .popSourceBlock {
    display:none;
  }
  </style>                

JAVASCRIPT CODE:

 <script>   
    $(".pop").each(function() {
    var $pElem= $(this);
   $pElem.popover(
        { trigger: "hover focus",
          HTML: true,
          content: getPopContent($pElem.attr("id"))
        }
    );
    });

    function getPopContent(target) {
        return $("#" + target + "_content > div.popContent").html();
    };
 </script>

I would like to see:

This is the content for the first player.

What I am actually getting is:

< p>This is the content for the < strong>first< /strong> player.< /p>

My ultimate goal is to use HTML code to display pictures rather than text.

Upvotes: 0

Views: 211

Answers (2)

user3778043
user3778043

Reputation: 197

    for js:
   <script>
    $(document).ready(function(){
    $('#pop1').popover({
        html : true,
        content : function() {
            return $('#pop1_content').html();
        }
    });
            });
   </script>
   For html:
   <div id="pop1_content" class="popSourceBlock" style="display:none;">
   your inner html divs.....
   </div>

Upvotes: 0

BENARD Patrick
BENARD Patrick

Reputation: 30975

It's because of your HTML option.

Change it to lowercase, not uppercase.

Bootply

JS :

   $(".pop").each(function() {
    var $pElem= $(this);
   $pElem.popover(
        { trigger: "hover focus",
          html: true,     //   <---------------  LOOK HERE
          content: getPopContent($pElem.attr("id"))
        }
    );
    });

    function getPopContent(target) {
        return $("#" + target + "_content > div.popContent").html();
    };

Upvotes: 2

Related Questions