Discussion :

[Goltar]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

[Goltar]

J'ai effectué des modifications dans le code.

Les codes du messages initials reflètent ces modifs.

Ces modifs ont résolu le problème d'appui multiples sur le bouton pour avoir un affichage des données.
Par contre je n'arrive pas à avoir un affichage collapsible tel que devrait le transformer jQuery mobile.

merci d'avance pour votre aide.