[UI Mobile] Jquery mobile - Peupler des accordéons avec les data d'une db sqlite

Bonjour à tous,
Je ne sais pas si je me trouve dans la bonne rubrique ! Si pas merci de m'orienter.

J'essaie de développer une application dédiée aux mobiles avec (cordova, jQuery mobile et sqlite).
Je trouve bien évidement les docs propres à chaque technologie, mais pas vraiment pour l'interactivité entre elles.

J'aimerai généré une page contenant des accordéons (collapsibleset) en important les datas d'un db sqlite.
j'ai d'une part le code html de la page:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div data-role='page' id='P_Aliments' data-theme="o">
            <div data-role='header' data-theme="o" >
                <a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ui-corner-all" data-transition="flip">home</a>
                <h1><i class="fa fa-beer "></i>   Aliments   <i class="fa fa-cutlery"></i></h1>
            </div>
            <div data-role-content>
            </div>                
            <div data-role="footer" data-position="fixed" data-theme="a">
                <h3>Another Leather & Digit Stuff</h3>
            </div> 
 
        </div>

et d'autre part mon javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
var db = openDatabase('ODiabdb', '1.0', 'BD O_Diab', 3 * 1024 * 1024);
$("#B_Aliments").bind("click", function (event)
{
    db.transaction(function (tx)
    {
        var sql = "SELECT DISTINCT Type FROM T_Aliments ORDER BY Type ASC";
        tx.executeSql(sql, undefined,
                function (tx, result)
                {
                    var html = "<div data-role='collapsibleset' data-corners='false' data-theme='a' data-content-theme='a' data-inset='true'>";
 
                    if (result.rows.length)
                    {
                        console.log(result.rows.length);
                        for (var i = 0; i < result.rows.length; i++)
                        {
                            var row = result.rows.item(i);
                            console.log(row);
                            var Type = row.Type;
                            html += "<div data-role='collapsible' data-collapsed='true' class='ui-collapsible  ui-collapsible-inset ui-corner-all ui-collapsible-themed-content'>";
                            html += "<h3>" + Type + "</h3>";
                            html += "<p>Collapsible content</p>";
                            html += "</div>";
                        }
                    } else
                    {
                        html += "<h3>Table vide</h3>"
                    }
                    html += "</div>";
 
                    $("#P_Aliments").unbind().bind("pagebeforeshow", function ()
                    {
                        var $content = $("#P_Aliments div:jqmData(role=content)");
                        $content.html(html);
                        var $coll = $content.find("collapsible");
                       $coll.listview();
 
                    });
                    $.mobile.changePage($("#P_Aliments"));
                }, erreur_bd);
    });
});
 
 
function erreur_bd(tx, erreur)
{
    alert("Erreur BD: " + erreur.message);
    return false;
}
function ok_bd()
{
 
}

déclenché après appui sur le bouton (B_Aliments).

Problèmes rencontrés:
1) il faut relancer plusieurs fois et cliquer sur le bouton pour avoir un affichage sans la mise en forme désirée.
càd que les types sont bien affichés en <h3> mais sans la mise en forme de l'accordéon et que le collapsible content est visible. :calim2:

En espérant que l'un d'entre vous pourra me mettre sur la voie.
D'avance merci