Update repeat - force refresh

Wappler General
#1

I am using FullCalendar for a booking system which has some Javascript functions triggered on date select to create events. This process also produces an array of JS objects which I use dmx.app.set() to assign to a variable that a repeat children div can see - they can then be processed as part of a SC form. This all works fine except that when the array is updated by the FullCalendar javascript function, the repeat region is only updated when the screen is scrolled. Is there a way of forcing the repeat to look at the variable again and update?

#2

I would need to see your page code to attempt this as I am not sure how its setup, if you could paste your code her or attach it as a zip I will try to advise.

#3

Hi @psweb ,
I’m sorry for not replying to you sooner. I also teach in a school that got a call that it was being inspected just after posting - kind threw everything into turmoil!

OK the function within the fullcalendar initialisation:

dateClick: function(info) {
    var edt = info.dateStr+' '+$('#select2').val();
    var butarr = {'date':edt, 'id':ic, 'dateonly':info.dateStr, 'timeonly':$('#select2').val()};
    if(!newbookdates['reserved'].includes(edt)){
        info.dayEl.style.backgroundColor = 'olivedrab';
        daycounts[info.dateStr] = (daycounts[info.dateStr]+1) || 1;
        newbookdates['reserved'].push(edt);
    	newbookdates['buttons'].push(butarr);
    	ic=ic+1;
    }else{
        newbookdates['reserved'] = arrayRemove(newbookdates['reserved'], edt);
        info.dayEl.style.backgroundColor = 'transparent';
    }
    dmx.app.set('newbook',newbookdates);   
}

The dmx.app.set works each time a date is selected however the repeat that looks at it only updates once the screen is scrolled rather than when the variable has been updated:

<div id="repeat1" is="dmx-repeat" dmx-bind:repeat="newbook.buttons">
    <button class="btn btn-outline-secondary mb-2" dmx-on:click="removebookentry('{{dateonly}}', '{{date}}', '{{id}}', '{{timeonly}}')" dmx-html="date.concat(' &nbsp &nbsp<i class=\'fas fa-times\'></i>')"><i class="fas fa-times"></i>Button</button>
</div>

I was wondering if I should use dmx.app.set each time or if there was a different command for updating a variable that had already been set? Something like dmx.app.update?

Thanks for looking at this; I really appreciate it.

Using App Connect with JavaScript Functions
#4

hmmm, there are other events you could try, but I have not personally tried it with this particular situation, so not fully sure but I would imagine everything is starting off with a click event on the calendar, and therefore you can track the event and ask it to reload the data from newbook.buttons alternatively, you could call the built in action scheduler to refresh the data on a set time, however depending on usage this could cause a lot of unrequired network load.
Maybe also look into adding a data load inside the button thats already got an onclick inside the repeat if the data is loading from an App Connect / Server Connect source.

As I say, seeing more of your code would help, I would see the server connections you are bringing in and where they go so it just helps make more sense of the flow, seeing parts like this always leaves a little to the imagination.

I mean you could even try call a reload of data onsuccess of the server connect completing.

I would have to call in the big guns for real help here though, lol, @Teodor, ideas?

#5

Thanks Paul,
There’s no data being pulled from SC in this. I am using fullcalendar clicks to create a local array of objects that can build html elements (buttons/form inputs) through a repeater that looks at the array. I just don’t know how to tell DMX that the array has been updated as it doesn’t seem to do it straight away - I’m not sure what it is about scrolling that causes it to update but surely there’s a way of triggering it in JS. It’s a headscratcher…

#6

I would assume that there must be a is on scroll that is making it update, therefore the must be other ways to invoke the same function that is running on scroll. When I get home I will take a better look at the developer docs and see, but there should be a way to call it from something other than scroll

1 Like
#7

I have managed to find a workaround which is to add:
window.scrollBy(0, -2);
window.scrollBy(0, 1);

to the function. If you do just 0,1 it doesn’t work when the user is already scrolled to the bottom of the page. 0,1 & 0, -1 doesn’t work because the net effect is 0. I’m not sure whether it would work if the content didn’t fill the screen and therefore scrolling wasn’t available - not an issue on my page. It would certainly be cleaner, in any case, if we can find the function to call.

#9

@patrick, @Teodor, @George,
Can any of you help with the function name that refreshes repeats when content is scrolled? If we get that, this whole issue is resolved.

Many thanks,
Ben

#10

I think dmx.requestUpdate() is what you were looking for. That fixed the server connect filtering for my select2 selects which were having the same issue of not updating the server connect.

$('.s_trip_filter').select2({
    placeholder: 'Select a Trip',
}).on("change.select2", function(){dmx.requestUpdate()});

H.

2 Likes