vendredi 22 janvier 2016

Difficulty to populate a collapsible set with data coming from a sqlite db

I'm newbie in JQuery Mobile, I try to build an cross-mobile application using 'HTML5, CSS3, Phonegap, JQuery Mobile and SQLITE' I'm trying to populate a Collapsible set with data coming from an Sqlite DB without success. my HTML part for it is:

    <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 data-role='collapsibleset' 
                 data-corners='true' 
                 data-theme='d' 
                 data-content-theme='d' 
                 data-inset='true'
                 id="CollAlim">

            </div>
        </div>        
        <div data-role="footer" data-position="fixed" data-theme="o">
            <h3>footer</h3>
        </div> 
    </div>

my script:

    $("#B_Aliments").on("click", function (event)
{

    var html = "";
    var html2 = "";

    $('#CollAlim').html("");
    db.transaction(function (tx)
    {
        var sql = "SELECT DISTINCT Type FROM T_Aliments ORDER BY Type ASC";
        tx.executeSql(sql, undefined,
                function (tx, result)
                {
                    if (result.rows.length)
                    {
                        for (var i = 0; i < result.rows.length; i++) // for each Type
                        {
                            var row = result.rows.item(i);
                            var TypeAlim = row.Type;
                            var html = "<div data-role=collapsible data-theme='a' data-collapsed=true>";
                            html += "<h3>" + TypeAlim + "</h3>";
        // ************************************************************
                            var sqlAlim = "SELECT id, Description FROM T_Aliments WHERE Type ='" + TypeAlim + "'";
                            tx.executeSql(sqlAlim, undefined,
                                    function (tx, result2)
                                    {
                                        console.log(result2.rows.length);
                                        if (result2.rows.length)
                                        {
                                            for (var j = 0; j < result2.rows.length; j++) // for each description
                                            {
                                                var row2 = result2.rows.item(j);
                                                console.log(row2);
                                                var id = row2.id;
                                                var desc = row2.Description;
                                                html += "<p><a href='#' id='" + id + "'>" + desc + "</a></p>";                                               
                                            }
                                        } 
                                        else
                                        {
                                            html = "<h3>Table vide</h3>";
                                        }

                                    }, erreur_bd);
        // ************************************************************
                            html += "</div>";
                            console.log("html=" + html);
                            html2 += html;
                            console.log("html2=" + html2);

                        }
                    } else
                    {
                        html = "<h3>Table vide</h3>";
                    }
                    $("#P_Aliments").unbind().bind("pagebeforeshow", function ()
                    {
                        $(html2).appendTo("#CollAlim").enhanceWithin("refresh");
                        $("#P_Aliments").trigger("create");
                    });
                    $.mobile.changePage($("#P_Aliments"));
                }, erreur_bd);
    });
});
        // *****************************************************************************

function erreur_bd(tx, erreur)
{
    alert("Erreur BD: " + erreur.message);
    return false;
}
function ok_bd()
{

}

The collapsible set and collapsible headers are well populated, but the collapsible content aren't. The part that should generate te content is between //*****************

Could someone help me ? Thanks in advance

Aucun commentaire:

Enregistrer un commentaire