Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    [JQM] Caricare dinamicamente un panel

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

  2. #2
    ho risolto caricando i dati in altro modo.
    menu.html:
    codice:
    <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>
    panel option:
    codice:
    <div data-role="panel" data-theme="b" data-display="overlay" id="panel_opt">
                    <ul data-role="listview" id="menu" data-theme="b"></ul>
                </div>
    caricamento dati nell'evento pageshow:
    codice:
    function loadMenu() {
        $.ajax({
            type: "GET",
            dataType: "html",
            url: "menu.html",
            success: function (res) {
                $("#menu").html(res);
                $("#menu").listview("refresh");
            }
        });
    }
    così carica i dati con il css facendo il refresh del componente listview.

    ciao!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.