ciao!
dovrei caricare il contenuto di un panel in jquery mobile in maniera dinamica.
quindi:
codice:
<div data-role="panel" data-theme="b" data-display="overlay" id="panel_opt"></div>
<script>
$('#home').bind('pageinit', function () {
loadMenu();
});
</script>
questa la funzione:
codice:
function loadMenu() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "menu.html");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("panel_opt").innerHTML = xhr.responseText;
}
};
xhr.send();
$("#panel_opt").trigger("updatelayout");
}
e questo il contenuto del file:
codice:
<ul data-role="listview" id="menu" data-theme="b">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#page_home" data-transition="slideup">Home</a></li>
<li><a href="#page_add_tempo" data-transition="flip">Aggiungi tempo</a></li>
<li><a href="#page_add_allenamento" data-transition="flip">Aggiungi allenamento</a></li>
<li><a href="#lista_tempi" data-transition="slideup">Lista tempi</a></li>
<li><a href="#lista_allenamenti" data-transition="slideup">Lista allenamenti</a></li>
</ul>
il problema è che gli elementi vengono caricati, ma non viene caricao lo stile.
quindi appaiono come semplici link.
come faccio a caricare anche il css di quegli elementi??