Twitter Bootstrap Question posted in

Links inside Bootstrap list-group not working – Twitter bootstrap

Here is my code. As you can see is a list-group of anchors that redirect to different sections (here changed to Twitter address in order to test the code) and a final dropdown menu with internal links too. You can check it in bootply too. And as you can see, the links are not working. Even if I take out the dropdown menu, it still doesn’t work. It does nothing, and I am clueless about why. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  .list-group.panel > .list-group-item {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px
  }
  .list-group-submenu {
    margin-left:20px;
  }
</style>
<div class="list-group">
  <a href="http://twitter.com" class="list-group-item list-group-item-action disabled" id="10_2016" target="_blank">
    October 2016
    <span class="badge" data-toggle="tooltip" data-container="body" data-original-title="Active news">0</span>
    <span class="badge badge-gray pull-right" data-toggle="tooltip" data-container="body" data-original-title="Inactive news">0</span>
  </a>
  <a href="http://twitter.com" class="list-group-item list-group-item-action" id="9_2016" target="_blank">
    September 2016
    <span class="badge" data-toggle="tooltip" data-container="body" data-original-title="Active news">2</span>
    <span class="badge badge-gray pull-right" data-toggle="tooltip" data-container="body" data-original-title="Inactive news">0</span>
  </a>
  <!-- Here go more months -->
  <a aria-expanded="true" href="#SubMenu1" class="list-group-item active" data-toggle="collapse" data-parent="#SubMenu1">
    Historic <i class="fa fa-caret-down"></i>
    <span class="badge">1</span>
  </a>
  <div aria-expanded="true" style="" class="list-group-submenu collapse in" id="SubMenu1">
    <a href="http://twitter.com" class="list-group-item active" data-parent="#SubMenu1" target="_blank">
      2015
      <span class="badge">1</span>
    </a>
    <!-- Here go more years -->
  </div>
</div>

As @MoshFeu and @almostabeginner have proved in the comments, the code works, but it doesn’t work in my project. Here I add a few more details about the environment of this code and what I’ve tried:
The project is PHP, the html is prepared in a function in a class and echoed inside a column and row in bootstrap. I have changed the internal URL in href by the twitter URL to be sure the path was not bad. I have very little js going on on that page. In the console I can’t see any malformed html or js errors. There is some specific styles for that page, but the only styles about links are about their colour. So I don’t know what else could I try.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It was a stupid e.preventdefault in a stupid included file. Sorry I made you lose your time with this!


  2. 0

    I think it is because you have set target="_blank", remove that line and it should work.

    http://www.bootply.com/VX0dtnLSbF

    Clearly bootply does not allow new window, I tried

    onclick="window.open(this.href,'_blank');return false;"

    in bootply, and it still did not work, but the link works.

    If you ever want to debug JS I suggest using Chrome “inspect” feature, that will make your life easy.

    Edit to add:

    This is the message you get when you click the Twitter link:

    Refused to display ‘https://twitter.com/‘ in a frame because an
    ancestor violates the following Content Security Policy directive:
    “frame-ancestors ‘self'”.

    Simply put, bootply does not allow it, otherwise the link is working perfectly fine.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search