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.
Comments
Post a Comment