Insert external HTML txt into popover content and go to Tag in WordPress (no iframe)

I got the code working in the w3schools Editor, but in WordPress 4.3.1 I can’t get it to jump to the tag. I am quite a beginner to this so I am asking for help here. I want to insert HTML from an .txt file and jump to section X using #Term-X. It’s a glossary. My code is based on this answer found here.
This is my code:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
  $('.glossary').popover({ 
    html : true,
    content: function() {
      return $('#pcw').html(); // pcw = popover_content_wrapper 
    }
  });
  $('#pcw').load("http:// — myURL — .txt");
  $("a").click(function(){
    $(this).popover('show');    
  });
});
</script>

<style>
.popover-content {
      width:250px; 
      height:250px;
      overflow: auto; 
}
</style>
</head>

<body>

<a class='glossary' data-placement='auto' href='#Term-X'>Term I want to show in Popover</a>
<div id="pcw" style="display: none"></div>

</body>
</html>

and this is my .txt script in the external file:

Read More
<!doctype html>
<html>
<head>

<style>

<!-- some CSS here -->

</style>
</head>

<body>

<div class="box" id="Term1">
    <div class="title"><b>Term1</b></div>
    <div class="description">soandso</div>
</div>

<div class="box" id="Term2">
    <div class="title"><b>Term2</b></div>
    <div class="description">soandso</div>
</div>

<div class="box" id="Term3">
    <div class="title"><b>Term3</b></div>
    <div class="description">soandso</div>
</div>

</body>
</html>

Any ideas? Thanks in advance!

Related posts

1 comment

  1. In the html document line 11 the character after the word glossary is not

    Fix it

    <!DOCTYPE html>
    <html>
    <head>
    
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
    <script>
    $(document).ready(function(){
      $('.glossary').popover({ 
        html : true,
        content: function() {
          return $('#pcw').html(); // pcw = popover_content_wrapper 
        }
      });
      $('#pcw').load("http:// — myURL — .txt");
      $("a").click(function(){
        $(this).popover('show');    
      });
    });
    </script>
    
    <style>
    .popover-content {
          width:250px; 
          height:250px;
          overflow: auto; 
    }
    </style>
    </head>
    
    <body>
    
    <a class='glossary' data-placement='auto' href='#Term-X'>Term I want to show in Popover</a>
    <div id="pcw" style="display: none"></div>
    
    </body>
    </html>
    

Comments are closed.