0

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!

2
Contributors
19
Replies
20
Views
4 Years
Discussion Span
Last Post by AleMonteiro
0

Try this instead:

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

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

0

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 by AleMonteiro

0

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

0

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

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

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

0

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

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.

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

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

                });
            });
0

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

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.