How to refresh the listview?

Gesture enabled responsive lists
1

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?

2

Hi @Vincent_Wansink,

May I ask what does “disabled” mean for you? Is it only for the actionable part or you have specific styling attached to disabled items? As in your example, the “stages” setting has a disabled property that can be provided as a function. This can be used to disable the action from executing, but it will have no effect on the listview item’s general styling.

3

Disabled meaning the action doesn’t execute when the user swipes. Also, when I use the disabled property it does change the styling a little bit. When the user swipes a disabled item the colour and icon are slightly faded.

Anyway, I ended up just reloading the list entirely so that solves my problem. I still don’t know why the background colours for the swipe action didn’t load the way I was doing it before, but like I said, I found a different solution and that works just as well.