I need to be able to reinitialize the listview entirely because some rows are marked as disabled based on the data in the row, and when that data changes, rows need to be enabled/disabled accordingly.
For example, if the timeid is > 0 then it can be actionable, but if it’s = 0 then it is not actionable. So if the user deletes the value in the row, the row is still displayed, but should no longer be actionable.
If I reload the page entirely, then it re-initializes the listview and all is good, but I obviously would like to be able to re-initialize the listview without reloading the entire page. What’s the best way to do this?
I tried putting the entire initialize code inside a function and calling that function to reinitialize but for some reason when I do that the background colours (for the slide gestures) don’t load, so it doesn’t look good.
Here’s my initialize function.
function initializeAttendanceList(){
$('#childattendancelist').mobiscroll().listview({
iconSlide: true,
theme: 'ios',
stages: [{
percent: -25,
color: 'red',
text: 'Delete',
icon: 'remove',
disabled: function (event, inst) {
// Disable this action if there is no time id.
if (event.target.getAttribute('data-timeid') === '0') {
return true;
}
},
action: function (event, inst) {
var buttons = {'oklabel':'Yes','cancellabel':'No'};
confirm('Confirm','Are you sure you want to delete this time record?',childTimeDelete,event.target.id,buttons);
}
},{
percent: 25,
color: 'blue',
text: 'Modify',
icon: 'pencil',
action: function (event, inst){
childTimeModify(childtimemodifypopup,event.target.id);
}
}]
});
}
Is there a built in way to accomplish what I’m trying to accomplish?