Привязка данных к разборному набору в телефонной щели

Question

У меня есть складной набор, к которому я пытаюсь добавить результат запроса в виде списка. но я не могу связать результат в виде списка.

Это то, что я пытаюсь сделать

function queryDB(tx) {
    tx.executeSql('SELECT * FROM FOLDER', [], querySuccess, errorCB);
}

function listdata(tx,results){
    list= ("<ul data-role='listview' data-inset='false' id='mylist' />");
    count = results.rows.length;
    $.each(results.rows,function(index){ 
        var row = results.rows.item(index);
        var li = '<li><a href="#">'+row['Date']+'</a></li>';
        list = $(list).append(li);
    });   
}

function querySuccess(tx, results) {    
    $.each(results.rows,function(index){ 
        var row = results.rows.item(index);

        tx.executeSql('SELECT Date FROM ALLIGNMENT WHERE name="'+row[name]+'"', [], listdata, errorCB);

        var div = '<div data-role="collapsible" data-inset="false" data-iconpos="right" data-collapsible="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"><h3>'+
            row["name"]+'<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" data-iconpos="right">10</span></h3></div>';

        $(list).appendTo(div).parent().appendTo('[data-role="content"]').end().trigger("create");
        $('div[data-role="collapsible"]').collapsible({theme:'c',refresh:true});
        $('[data-role="listview"]').listview().listview('refresh'); 
    });
} 

Если я пытаюсь отобразить только разборный набор, я могу отобразить. но когда я пытаюсь отобразить список, ничего не отображается. какую ошибку я делаю?

Спасибо:)

Новая функциональная структура

function queryDB(tx) {
tx.executeSql('SELECT * FROM FOLDER', [], querySuccess, errorCB);
}




 function listdata(tx,resultset){

   list = $("<ul>").attr({'data-role':'listview','data-inset':'false','id':'mylist'});
   count = resultset.rows.length;

    $(list).remove();

   $.each(resultset.rows,function(index){
    var row = resultset.rows.item(index);
   // alert(row['CreatedDate']);
     var li = '<li><a href="#">'+row['Date']+'</a></li>';
    list.append(li); 

    });



div = '<div data-role="collapsible" data-inset="false" data-iconpos="right" data-collapsible="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"><h3>'+
 row1["name"]+'<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" data-iconpos="right">'+count+'</span></h3></div>';
 }
list.appendTo(div).parent().appendTo('[data-role="content"]').end().trigger("create");
$('div[data-role="collapsible"]').collapsible({theme:'b',refresh:true});
$('[data-role="listview"]').listview().listview('refresh'); 

 }


function querySuccess(tx, results) {

$.each(results.rows,function(index){ 

   row1 = results.rows.item(index);

tx.executeSql('SELECT CreatedDate FROM ALLIGNMENT WHERE name="'+row1["name"]+'" ', [], listdata, errorCB);

});

} 

Answer 1

У вас есть ошибка в вашей функции listdata.

JQuery объект не может быть создан следующим образом:

list= ("<ul data-role='listview' data-inset='false' id='mylist' />");

Для начала вам не хватает знака $ раньше (но даже при этом он не будет работать.

Сделай это так:

var list = $("<ul>").attr({'data-role':'listview','data-inset':'false','id':'mylist'});

Также в этом случае вам не нужно использовать эту строку следующим образом:

list = $(list).append(li);

это не будет работать, это должно выглядеть так:

list.append(li);

РЕДАКТИРОВАТЬ:

Вам нужно будет внести дополнительные изменения. Когда вы выполните эту строку:

tx.executeSql('SELECT Date FROM ALLIGNMENT WHERE name="'+row[name]+'"', [], listdata, errorCB);

вызов функции listdata является асинхронным. Это означает, что остальная часть кода не будет ожидать запуска этой функции. В основном вам нужно будет переместить некоторые из этих строк:

    var div = '<div data-role="collapsible" data-inset="false" data-iconpos="right" data-collapsible="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"><h3>'+
    row["name"]+'<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" data-iconpos="right">10</span></h3></div>';

    $(list).appendTo(div).parent().appendTo('[data-role="content"]').end().trigger("create");
    $('div[data-role="collapsible"]').collapsible({theme:'c',refresh:true});
    $('[data-role="listview"]').listview().listview('refresh'); 

в функцию listdata. В настоящее время список пуст, потому что функция все еще работает, когда вы пытаетесь добавить объект списка.