jquery - Binding data to collapsible set in phonegap -

i have collapsible set trying append query result listview. unable bind result listview.

this trying do

function querydb(tx) {     tx.executesql('select * 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 allignment 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');      }); }  

if try display collapsible set, able display. when try display listview nothing getting displayed. mistake doing?

thanks:)

new function structure

function querydb(tx) { tx.executesql('select * 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 allignment name="'+row1["name"]+'" ', [], listdata, errorcb);  });  }  

you have error in function listdata.

jquery object can't created this:

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

for start missing $ sign before ( not work.

do this:

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

also in case don't need use line this:

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

it not work, should this:

list.append(li); 

edit :

you need make addition changes. when execute line:

tx.executesql('select date allignment name="'+row[name]+'"', [], listdata, errorcb); 

call function listdata asynchronous. means rest of code not wait function run. need move of lines:

    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');  

into function listdata. list empty because function still running when try append list object.