Can't select items within Bootstrap popover

Question

HelloJarvis 0 Light Poster

11 Years Ago

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!

bootstrap javascript jquery selector

2 Contributors
19 Replies
3K Views
4 Days Discussion Span
Latest Post 11 Years Ago Latest Post by AleMonteiro

All 19 Replies

AleMonteiro 238 Can I pick my title?

11 Years Ago

Try this instead:

$("#button").popover({content:'<span id="test">Test</span>', html:true, placement:"bottom"});

AleMonteiro 238 Can I pick my title?

11 Years Ago

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

Edited 11 Years Ago by AleMonteiro

AleMonteiro 238 Can I pick my title?

11 Years Ago

Did it solve your problem?

AleMonteiro 238 Can I pick my title?

11 Years Ago

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>

AleMonteiro 238 Can I pick my title?

11 Years Ago

Your HTML is invalid too, there's no closing tag for the '<span>'

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

HelloJarvis 0 Light Poster · Answer 1 · 2012-11-12T16:22:11+00:00

Why would changing the quotes do anything? I'm not challenging you, just wondering.

HelloJarvis 0 Light Poster · Answer 2 · 2012-11-12T18:00:14+00:00

HelloJarvis 0 Light Poster

11 Years Ago

Oh, okay. Thanks!

HelloJarvis 0 Light Poster · Answer 3 · 2012-11-13T00:52:30+00:00

No, it actually didn't. I tried selecting the span inside via $("#test").html("hi"); directly after, but that didn't work.

HelloJarvis 0 Light Poster · Answer 4 · 2012-11-14T01:38:08+00:00

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>

HelloJarvis 0 Light Poster · Answer 5 · 2012-11-14T20:29:02+00:00

Yup, I had a feeling I missed some tag somewhere; I'm still debugging the program. But would that affect how jQuery works?

HelloJarvis 0 Light Poster · Answer 6 · 2012-11-14T21:02:39+00:00

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>

AleMonteiro 238 Can I pick my title? · Answer 7 · 2012-11-14T22:20:06+00:00

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.

HelloJarvis 0 Light Poster · Answer 8 · 2012-11-15T00:54:27+00:00

<!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>

AleMonteiro 238 Can I pick my title? · Answer 9 · 2012-11-15T17:10:51+00:00

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");
                    });

                });
            });

HelloJarvis 0 Light Poster · Answer 10 · 2012-11-15T18:50:15+00:00

The thing is, I'm generating this HTML server-side. I supposed I could try to escape the string in PHP though...

AleMonteiro 238 Can I pick my title? · Answer 11 · 2012-11-15T22:00:56+00:00

You'll need it to work. No matter where the string is generated, it always need to be valid.

AleMonteiro 238 Can I pick my title? · Answer 12 · 2012-11-15T22:01:38+00:00

But why do you need to generate it on the server? Can't you do it on the interface?

HelloJarvis 0 Light Poster · Answer 13 · 2012-11-16T01:49:23+00:00

Because I'm taking the input of users and transforming it into HTML.

AleMonteiro 238 Can I pick my title? · Answer 14 · 2012-11-16T02:13:23+00:00

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.

Can't select items within Bootstrap popover

Recommended Answers Collapse Answers

All 19 Replies

Recommended Answers