I can't select elements within my popover for the Bootstrap framework. I've tried:
$("#button").popover({content:"<span id="test">Test</span>", html:true, placement:"bottom"});
And tried selecting the inner span with:
$("#test").html("foo");
This doesn't seem to work. Help!
Try this instead:
$("#button").popover({content:'<span id="test">Test</span>', html:true, placement:"bottom"});
Why would changing the quotes do anything? I'm not challenging you, just wondering.
Because "<span id="test">Test</span>" it's not a valid string.
Those would be valid strings:
"<span id=\"test\">Test</span>" // scape the inside double quotes
"<span id=test>Test</span>" // doesn't use inside double quotes
"<span id='test'>Test</span>" // use inside single quotes
'<span id="test">Test</span>' // use single quotes outside and double quotes inside
'<span id=\'test\'>Test</span>' // scape inside single quotes
Oh, okay. Thanks!
Did it solve your problem?
No, it actually didn't. I tried selecting the span inside via $("#test").html("hi"); directly after, but that didn't work.
Seems to work fine. I did a test with the demo page on the popover site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>jQuery.popover demo page</title>
<link rel="stylesheet" href="_page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="popover.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.popover-1.1.2.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
$("#btn").click(function(event) {
event.preventDefault();
event.stopPropagation();
$("#btn").popover({
title: "Dynamic content",
content: '<span id="spn">Testing</span>',
html: true
}).popover("show");
$("#spn").html("Yeah!!!!");
});
});
/* ]]> */
</script>
</head>
<body>
<a href="#" id="btn">Click me</a>
</body>
</html>
I'm generating html, that might be the problem. The html generated is as follows:
<div class="popover fade bottom in" style="top: 154px; left: 509.5px; display: block;">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title">Words Found</h3>
<div class="popover-content">
<p class="innerHTML" style="overflow:auto;max-height:120px;"><span class="overflow" style="overflow:hidden;width:30px;"><button class="replaced btn btn-primary" type="button" id="trial"> trial <br> </button>
</p>
</div>
</div>
</div>
Your HTML is invalid too, there's no closing tag for the '<span>'
Yup, I had a feeling I missed some tag somewhere; I'm still debugging the program. But would that affect how jQuery works?
Oh actually, my HTML is fine. I just omitted a few lines by accident. Here it is:
<div class="popover fade bottom in" style="top: 154px; left: 517px; display: block;">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title">Words Found</h3>
<div class="popover-content">
<p class="innerHTML" style="overflow:auto;max-height:120px;"><span class="overflow" style="overflow:hidden;width:30px;"><button class="replaced btn btn-primary" type="button" id="hullo"> hullo </button> </span>
</p>
</div>
</div>
</div>
Please post a complete example of what you are trying to do. With the HTML, JS and CSS.
An example that I can test and debug to try and find your problem.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>jQuery.popover demo page</title>
<link rel="stylesheet" href="_page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="popover.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.popover-1.1.2.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
$("#btn").click(function(event) {
event.preventDefault();
event.stopPropagation();
$("#btn").popover({
title: "Dynamic content",
content: '<div class="popover fade bottom in" style="top: 154px; left: 517px; display: block;">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title">Words Found</h3>
<div class="popover-content">
<p class="innerHTML" style="overflow:auto;max-height:120px;"><span class="overflow" style="overflow:hidden;width:30px;"><button class="replaced btn btn-primary" type="button" id="hullo"> hullo </button> </span>
</p>
</div>
</div>
</div>', html: true }).popover("show");
$("#spn").html("Yeah!!!!");
});
});
/* ]]> */
</script>
</head>
<body>
<a href="#" id="btn">Click me</a>
</body>
</html>
Try this:
$(function(){
$("#btn").click(function(event) {
event.preventDefault();
event.stopPropagation();
$("#btn").popover({
title: "Dynamic content",
content: '<div class="popover fade bottom in" style="top: 154px; left: 517px; display: block;">'+
'<div class="arrow"></div>' +
'<div class="popover-inner">' +
'<h3 class="popover-title">Words Found</h3>' +
'<div class="popover-content">' +
'<p class="innerHTML" style="overflow:auto;max-height:120px;">' +
'<span class="overflow" style="overflow:hidden;width:30px;">' +
'<button class="replaced btn btn-primary" type="button" id="hullo"> hullo </button>' +
'</span>' +
'</p>' +
'</div> ' +
'</div>' +
'</div>',
html: true
})
.popover("show");
$("#hullo").click(function() {
alert("yeah");
});
});
});
The thing is, I'm generating this HTML server-side. I supposed I could try to escape the string in PHP though...
You'll need it to work. No matter where the string is generated, it always need to be valid.
But why do you need to generate it on the server? Can't you do it on the interface?
Because I'm taking the input of users and transforming it into HTML.
Even then you could do it with JavaScript. The server can decide what to show and the JavaScript does the job of showing it (creating the DOM).
Either way, it should work.
If you don't have any more problems with the popover plugin, please mark as solved.
If you have futher problems with your implementation, it's better to create another topic, unless it is directly related with the popover plugin.
Seeya.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.