Bootstrap popover data from another HTML file

Question

Instead of the data being hardcoded, I want it to retrieve it from a html file, a template if you will. How can I do this? Let's say I have another html file with a <h1> and a <body>, and the popover should get the data from it (header/body of the popover)

<button type="button" class="btn btn-default" title="Help" data-toggle="popover"  data-content="423241421453453"><span class="glyphicon glyphicon-info-sign" style="font-size: 20px; padding-top:5px"></span></button>
</div>

$(document).ready(function popover() {
   $('[data-toggle="popover"]').popover();
});

score 3 · Accepted Answer · edited May 23 '17 at 11:52

3

Lets say you have a template like this :

<h1>header</h1>
<body>this is a test</body>

Then add the template filename as a data-templatefile attribute to your button markup :

<button type="button" data-templatefile="template.html" class="btn btn-default" title="Help" data-toggle="popover"><span class="glyphicon glyphicon-info-sign" style="font-size: 20px; padding-top:5px"></span></button>

Then initialise the popover like this :

$('[data-toggle="popover"]').popover({
    html : true,
    content : function() {
        return loadContent($(this).data('templatefile'))
    }
});

This was straigt forward. The loadContent() needs to be more tricky. If you use jQuery to parse the content you will see that the <body> tag is stripped out. This is the browser doing that, not jQuery. But you can use a DOMParser instead to extract exactly those tags you want to use in the popover :

function loadContent(templateFile) {
    return $('<div>').load(templateFile, function(html) {
        parser = new DOMParser();
        doc = parser.parseFromString(html, "text/html");
        return doc.querySelector('h1').outerHTML + doc.querySelector('body').outerHTML;
    })
}

The result will look like this :

demo -> http://plnkr.co/edit/9pHmKBvhxMOdGjCHz2OG?p=preview

edited May 23 '17 at 11:52

Community

1
1

answered Oct 15 '15 at 11:39

davidkonrad

83,997
17
205
265

I'm afraid I couldn't get it to work, could you make it in a plunker or something please? – Buda Cristian Oct 20 '15 at 08:54
Thanks, I'll have my lunch break and I'll be awaiting your response. – Buda Cristian Oct 20 '15 at 08:59
@BudaCristian - see update, works right away - perhaps you have some other script errors preventing the code from being executed? – davidkonrad Oct 20 '15 at 09:44
well this worked, but how would I do it if I want to get a template.html from a specific path ? – Buda Cristian Oct 20 '15 at 11:25
@BudaCristian -???, you just specify the path too `data-templatefile="somedir/another/div/template.html"` ... `data-templatefile="../templates/template.html"` etc – davidkonrad Oct 20 '15 at 11:38
This is very very... and I mean, *very* useful even in a case you'd like to render popovers with an external `div`. Thank you very much. – Eray Erdin Mar 08 '20 at 23:29

Bootstrap popover data from another HTML file

1 Answers1

Linked