Having trouble initializing or refreshing my ul - the method I use in my code sample works in another function I'm using but not here... I must be missing something?
$(data).find("#HospitalDescriptions").find('th').filter(function(){
if (this.innerHTML !== '') {
var bgcolor = $( this ).css( "background-color" );
var txtcolor = $( this ).css( "color" );
if (bgcolor !== ''){
$('#information').append('<div id="alertColors"><ul><li><span style="background-color:' + bgcolor + ';color:' + txtcolor + ';">' + this.innerHTML + '</span></li></ul></div>');
} else {
$('#information').append('<li>' + this.innerHTML + '</li>');
}
}
$('#information').listview('refresh'); // not working!
});
here is my HTML the ul is created in code:
<div data-role="page" data-theme="b" id="hospitals" data-add-back-btn="true">
<div data-role="header">
<h1>HOSP-HEADER</h1>
<a class="ui-btn-right" id="infoButton" onclick="$('#locations').listview('refresh');">Refresh</a>
</div><!-- /header -->
<div data-role="content" data-theme="b" id="regions">
<div data-role="content">
<h4>Information</h4>
<ul data-role="listview" data-inset="true" id="information">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Regions I, II, III</h4>
<ul data-role="listview" data-inset="true" id="region3">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Region IV</h4>
<ul data-role="listview" data-inset="true" id="region4">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Region V</h4>
<ul data-role="listview" data-inset="true" id="region5">
<!-- AJAX CONTENT -->
</ul>
</div>
</div>
Lost track of #ID. The #information was a ul not div as origionally created. removed nesting div inside ul :
$(data).find("#HospitalDescriptions").find('th').filter(function(){
if (this.innerHTML !== '') {
var bgcolor = $( this ).css( "background-color" );
var txtcolor = $( this ).css( "color" );
if (bgcolor !== ''){
$('#information').append('<li><span style="background-color:' + bgcolor + ';color:' + txtcolor + ';">' + this.innerHTML + '</span></li>');
} else {
$('#information').append('<li>' + this.innerHTML + '</li>');
}
}
$('#information').listview('refresh');
});