Bootstrap popover dati da un altro file HTML

Invece dei dati che sono hardcoded, voglio che lo recuperi da un file html, un modello se lo desideri. Come posso fare questo? Diciamo che ho un altro file html con

e un , e il popover dovrebbe ottenere i dati da esso (intestazione / corpo del popover)

  

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

Diciamo che hai un modello come questo:

 

header

this is a test

Quindi aggiungi il nome file del modello come attributo data-templatefile al markup dei pulsanti:

  

Quindi inizializza il popover in questo modo:

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

Questo è stato stravagante. Il loadContent() deve essere più difficile. Se usi jQuery per analizzare il contenuto, vedrai che il tag viene rimosso. Questo è il browser che lo fa , non jQuery. Ma puoi usare un DOMParser invece per estrarre esattamente quei tag che vuoi usare nel popover:

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

Il risultato sarà simile a questo:
inserisci la descrizione dell'immagine qui

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