$IonicSlideBoxDelegate update then when done execute function

Dear Ionic forum,

I have made a slidebox using Ionic that has an ng-repeat inside of it:

ng-repeat=“week in weeks”;
Now weeks is an array that dynamically changes by unshift ( add an item to the beginning of the array then move all items up ). This works great! also the IonicSlideBoxDelegate updates nicely after i’ve changed the array. But now i want the slideboxdelegate to slide to the previous item… but this does nothing, i guess because:

$IonicSlideBoxDelegate.update();
$IonicSlideBoxDelegate.previous();

The update function hasn’t finished yet? How do i execute code when the update has finished?

BTW: Love the framework! Keep up the good work!

Greetings: Kamikazekip

I’ve been planning to ask this for a while, I’ve only seen it solved by using a timeout around it… Typically causing race conditions on very slow devices by doing so…

@mhartington any thoughts on this?

Have you tried setting up callbacks? I’m don’t think it’s possible to do it with the actual methods, but you could try that

When I do setup callbacks, would that be desireable as a PR on git? In my opinion a framework should offer optional callbacks for everything that’s async from other code, but might be that ionic thinks different about this.(I’ve had many discussions about this statement before)

Forgive my lack of knowledge, but what are callbacks and how do you execute them?

var ASyncFunction = function(callback) {
    //Do something asynchronous.. HTTP call, timeout, interval etc (even eventlisteners)
    $timeout(function(){
      callback( "we call this when the async call was finished" );
   }, 5000);
   return "asynccall started";
};

var returnVal = ASyncFunction(function( callbackReturnValue ){
    console.log( callbackReturnValue  ); // Only fired after the async, in this case 5 second delay timeout has finished ("we call this when the async call was finished")
});
console.log( returnVal ); //"asynccall started"'

So, what happens here, we give you the original return value (or no return value, doesn’t matter) when the function was ended. But the function did something asyncrhonous, so we don’t know when that’s finished. Therefore we created a callback method that only fires after the asynchronous thing has ended.

In this particular case, apparently $IonicSlideBoxDelegate.update(); does something asynchronous (I haven’t looked in the code what exactly though, it probably fires an event that get’s handled by some directive), but offers no callback method.

With a callback method, it would look like this:

$IonicSlideBoxDelegate.update( function() {
    //This would get executed  only after .update has finished
    //Typically: $IonicSlideBoxDelegate.previous(); could be fired here correctly
} );

But we have to manually implement this since it is not implemented in the framework (yet?). That’s why I asked @mhartington if it would be viable for a pull request on git, so it might be implemented in the framework… Not really usefull if ionic team doesn’t support my opinion on callback policy :wink:

A PR is something that is alway welcomed :smile:

I’d first open an issue to check on why callbacks aren’t allowed before putting the word in.

Have you tried wrapping the delegate functions in functions to hack it together? Haven’t dealt too much with promised, but could these help you out in anyways?

Hi,

Is there any update on this issue? We are also facing the same problem when we try to set the activeSlide after an slideBox is updated. Even we we give a timeout before setting the active slide we sometimes see issue where the slide box is sliding to a wrong index as the slidesCount() is returning old value

Any pointers?

Thanks in advance

Yes i’m having the same problems with a dynamic slidecount… Can’t seem to figure out when it is happening though… I’m experiencing jumps in the active slide. Don’t know if this is specifically my bug or ionic’s bug… But i’m expecting that it is my bug… I’ll try to figure it out

We also see the same problem. We noticed that even when the setup of the slidebox is completed as part of ionicslideboxDelegate update, the slides in the slide box are not removed even though they are marked as dirty. Hence the slide count is still the old value as the dirty elements are yet to be removed.

You can check the data structure “slides” in the setup function of ionic.views.Slider object when your update call is executing. You will see that the slides that are marked for removal are still there inside the slider object.

Could you guys try the nightly builds and let me know how it works for you? Slidebox has undergone a refactor and your problems may be fixed.

Be sure to read the migration notes in the nightly changelog: http://code.ionicframework.com/nightly/CHANGELOG.html

We are in an older version of ionic (beta 6). Right now we dont plan to move to beta 13 since we have an immediate release.

As of now, we found a workaround where we are givng a timeout while updating the array of slides before calling update(). This is working as of now.

Hey biswarup, can you post your code of your solution? I have an imminent release too and this is the only bug left.

Hi Kamikazekip,

We just wrapped the code which is doing an array push or pop with a $timeout.

We found under such scenarios, the slidebox array is getting updated before an $ionicSlideBoxDelegate.update() is called.

Something like this:

$timeout(function(){ $scope.items.pop(); }, 0);
$timeout(function(){ $ionicSlideBoxDelegate.update(); }, 5); //add delay amount which works for you

Note, this is just a workaround !

HAHA!

After months of searching around I found a solution!
I realise the problem was in this peace of code:

$scope.slideChanged = function(index) {
		$rootScope.myActiveWeekSlide = index;
};

This somehow, when i update the slidebox set the myActiveWeekSlide variable to 1 instead of the desired 3 extra loaded slides. Which resulted in a visual jump in weeks. Even though everything was updated correctly.
I solved this issue by doing something a little different than you.
I did this:

var extraWeeks = weekDate.loadMore('left', cache.get('settings', 'extraSlides'), 
				date.getDateFromMoment(moment($rootScope.weeks[0]._date, ["DD-MM-YYYY"]).subtract(1, 'week')));
	for(var x = 0; x < extraWeeks.length; x++){ // For each loaded week
		$rootScope.weeks.unshift(extraWeeks[x]); // Add each loaded week
		$rootScope.weekSlides++; //Update slides count
		$rootScope.currentWeekSlide++; //Update the current week index (for current week button purposes)
		$rootScope.myActiveWeekSlide++; //Update the Active week slide
	} //At this point myActiveWeekSlide = 3

	$scope.$apply();
	$ionicSlideBoxDelegate.update();
        //At this point, myActiveWeekSlide is mysteriously 1?
	$rootScope.myActiveWeekSlide = <Number of extra slides var here> extraSlides
        //This solved the problem, making it 3 once more

Thank you biswarup, for directing me in the right direction :smiley:

EDIT
I found an even better solution, the last posted solution was good, but still some sort of a workaround which still caused a very slight visual bug.
Using the code below solves the problem all together without workarounds and no visual bugs:

        //All the extraMonth getting things above, not relevant
	for(var x = 0; x < extraWeeks.length; x++){
		$rootScope.weeks.unshift(extraWeeks[x]);
	}
	viewBase.loadTimelinesWeekOrMonth($rootScope.weeks, "weekDays");
	$scope.$apply();
	$rootScope.weekSlides += extraWeeks.length;
	$rootScope.currentWeekSlide += extraWeeks.length;
	$rootScope.myActiveWeekSlide += extraWeeks.length;
	$ionicSlideBoxDelegate.update();

The solution was to not update the weekSlides, currentWeekSlide and myActiveWeekSlide variables in a loop, but after the array was actually finished. This allowed for the slideChanged function not to be called everytime it passed the loop :smiley: