0

Trying to add a link in a Bootstrap popover (to go to a "Help" page). Seen all sorts of complicated solutions of getting a link inside a popover but someone suggested a simple onclick window.open. Seemed an interesting solution BUT I am in double/single quote hell.

I am using phpStorm which does a pretty good job highlighting errors. What I am trying is:

<i class="explain fa fa-question-circle text-primary"
data-toggle="popover" data-trigger="focus" tabindex="0" title="Popover title"
data-content="And here's some amazing content. It's very engaging.<a href='#' 
onclick='window.open("http://www.google.com/");' title='test add link'>
link to content</a> Right?"></i>

Here is the original I copied:

<a href="#" onclick="window.open('http://www.google.com/');\"> link </a>

My problem is that when I switch single to double I get an error at the initial " of ("http://www.google.com/"); and have an unclosed tag.

What am I not understanding re this call please.

BeNice
  • 2,165
  • 2
  • 23
  • 38
  • Easiest way out of hell is not to use attribute event handlers. What you have is potentially a cross site scripting hole – Ruan Mendes Dec 10 '15 at 23:54
  • Juan not too worried about security as this is really an alpha with very little public exposure - just a proof of concept. But I am interested. What is the security hole here? – BeNice Dec 11 '15 at 00:13

2 Answers2

3

Try using &quot; within the HTML attribute:

<i class="explain fa fa-question-circle text-primary"
data-toggle="popover" data-trigger="focus" tabindex="0" title="Popover title"
data-content="And here's some amazing content. It's very engaging.<a href='#' 
onclick=&quot;window.open('http://www.google.com/');&quot; title='test add link'>
link to content</a> Right?"></i>

Compare here: How to properly escape quotes inside html attributes?

Community
  • 1
  • 1
Gabriel machts
  • 187
  • 11
  • Gabriel you are a star. Thanks works perfectly. PS I should add I had zero idea that the normal escaping route would not work here. It really did my head in! – BeNice Dec 11 '15 at 00:12
  • OK now I am beyond confused. I tried it, it worked, I tried a couple of extra setting (such as height and width to force a new window to open) they did not work went back to the original it did not work. Cut and pasted in your code it did not work. And there goes over 2 hours.I am so frustrated. I think the rest of the page is the same and sometimes it will work and then 10 mins later it will not. Abandoning links for now. Pity. – BeNice Dec 11 '15 at 02:04
0

You need to include data-html="true" along with your other data-*

Here is the jsFiddle

bislinks
  • 84
  • 10
  • Thanks for that will give it a try in a day or so. Was experimenting with it opening in a new window but things got very erratic. I suspect something to do with cache. I would try one version it would open a new tab. I would go and edit and it would not work so I would go back to the original and then THAT would not work. This is a real icing on the cake idea so it is low priority for now. Oh and I did have a `data-html` set in JS (slightly different form I think). I have closed down for the night and will not be back to this for about 20 hours but thanks for your kind input. – BeNice Dec 11 '15 at 08:03