Bootstrap/HTML elements into a popover data-content="" section

Question

I have the following code in the head of my index.PHP page..

<script>
$(function(){
    $('[data-toggle=popover]').popover()
    /*.click(function(e) { 
        e.preventDefault(); 
    });*/​
});
</script>

And this below..

        echo "<td>
        <button type=\"button\" 
        class=\"btn btn-default\" 
        data-html=\"true\" 
        data-container=\"body\" 
        data-toggle=\"popover\" 
        data-trigger=\"focus\" 
        data-placement=\"top\" 
        data-content=\"
        <div class=\"media\">
                <div class=\"media-left\">
                    <a href=\"...\">
                        <img class=\"media-object\" src=\"...\" alt=\"...\">
                    </a>
                </div>
                <div class=\"media-body\">
                    <h4 class=\"media-heading\">Media heading</h4>
                    ...
                </div>
        </div>\"
        ".$userFirstName."</button>";

        echo 
        "<script>
        $(function(){
            $(\"[data-toggle=popover]\").popover();
        });
        </script></td>";

And I am trying to figure out why the stuff inside of data-content="" portion has gone into the button now instead of staying in the "pop-up part" of the bootstrap popover. I want to add some information into the popver that will be pulled from mysql database and some other formatting/HTML/bootstrap stuff if possible.

I am new to Jquery/javascript/popovers.. It is my understanding that the data-html="true" allows html to go into the popover, so am thinking it may have something to do with the fact it isn't basic HTML and is Bootstrap? Everything worked fine until I tried to put the bootstrap 'media' stuff in there.

Any help is appreciated, thanks much!

Answer 1

You can't have double-quotes wrapping contents with more double-quotes. In this case

data-content=\"
        <div class=\"media\">

Is being interpreted by the browser as:

data-content="<div class=" media">

because the browser can't recognize that the "inner" double-quote isn't just closing the first double-quote. There are a number of options: replace the inner " with ", replace them with ' or change your approach and use JSON.

In this case, you can just use the quick and dirty:

<td>
        <button type=\"button\" 
        class=\"btn btn-default\" 
        data-html=\"true\" 
        data-container=\"body\" 
        data-toggle=\"popover\" 
        data-trigger=\"focus\" 
        data-placement=\"top\" 
        data-content=\"
        <div class='media'>
                <div class='media-left'>
                    <a href='...'>
                        <img class='media-object' src='...' alt='...'>
                    </a>
                </div>
                <div class='media-body'>
                    <h4 class='media-heading'>Media heading</h4>
                    ...
                </div>
        </div>\"
        >".$userFirstName."</button>";

Also, small note: you need a closing > on your opening <button> tag,