Call a function after a time gap In Angular JS

Question

I am trying to refresh a page after showing a successfull message. I tied with many snippets but either it gets refreshed without showing message or vice-versa.

So I thought of Calling the Refresh function after an interval or Trigger again the button click event after some time to get the page refreshed.

Here is the code, How to achieve the above scenario?

JS CODE

$scope.Save = function (data) {
    debugger;
    $http.post($rootScope.WebApiURL + '/updatemanifeststatus');
    var value= $http.get($rootScope.WebApiURL + '/getmanifeststatus' );

        $scope.manifeststatus = data;

        $scope.showstatus = true;
        $scope.alert = { type: 'success', msg: 'Published Successfully.' };
        $(".statusDivPublish").show();

        $scope.Refresh1();

    }

    $scope.Refresh1 = function () {
        //refresh
        $state.go($state.current, {}, { reload: true });
    }
});

HTML Button Call

<div class="col-sm-offset-1">
    <button id="PublishButton" class="btn btn-default shiny " ng-disabled="manifeststatus.enablePublishButton" ng-click="Save(manifeststatus)">Publish</button>
</div>

What I want to do Here is Call the Refresh1() function after a time gap in such a way, the page gets refreshed after showing the message.

use $state.reload instead to fire $scope.Refresh1 function. If you are using ui-router. — gaurav bhavsar
– gaurav bhavsar, Commented Aug 27, 2015 at 7:12
use a toast library if you only need to show some alert for a period. github.com/jirikavi/AngularJS-Toaster — cubbuk
– cubbuk, Commented Aug 27, 2015 at 7:17
Why do you need to reload? To refetch the data you just fetched? Besides that, you seem to be posting success messages when you obviously don't know whether your post operation has been a success or not. Plus you seem to be using jQuery and Angular to display messages. — skubski
– skubski, Commented Aug 27, 2015 at 7:24
@skubski so, what can be done exactly for this? I fetched the data. but its not getting displayed unless I do a manual refresh. So I want to refresh it in the code. — Sonam G
– Sonam G, Commented Aug 27, 2015 at 9:13

skubski · Accepted Answer · 2015-08-27 07:53:36Z

I plunkered a bit on your problem and I did not need to use a $timeout to update the model with updated data.

.controller('AController', function(ptth$) {

    var self = this;

    self.time = 'wait for it';

    self.init = function() {
      ptth$.get().then(function(data) {
        self.time = data;
      });
    };

    self.init();

    self.save = function() {
        ptth$.post().then(function() {
          //I use an alert instead of a div we show or hide.
          window.alert('hey, this is real success');
          //You either re-fetch data here and update your model
          //Or you reload after the alert...

          //This example works with a ng-model update, instead of a reload
          self.init();
        }, function() {
          window.alert('this is failure');
        });
    };
})

Eventhough this is not the way I would set up things, this example should illustrate that you do not really need a $timeout or $reload for that matter.

Imab Asghar · Accepted Answer · 2015-08-27 10:26:54Z

1

Inject $timeout and do this changes to your JS Code.

$scope.Save = function (data) {
    debugger;
    $http.post($rootScope.WebApiURL + '/updatemanifeststatus');
    var value= $http.get($rootScope.WebApiURL + '/getmanifeststatus' );

        $scope.manifeststatus = data;

        $scope.showstatus = true;
        $scope.alert = { type: 'success', msg: 'Published Successfully.' };
        $(".statusDivPublish").show();

        //Adding a 5 second delay
        $timeout($scope.Refresh1, 5000);

    }

    $scope.Refresh1 = function () {
        //refresh
        $state.go($state.current, {}, { reload: true });
    }
});

edited Aug 27, 2015 at 10:26

answered Aug 27, 2015 at 7:25

Imab Asghar

3161 silver badge7 bronze badges

2 Comments

Sonam G Over a year ago

I tried your code, the page is getting refreshed with updated data but, the alert is not shown. The 3 lines after $scope.manifeststatus = data;

Sonam G Over a year ago

I believe the delay or $timeout is not working, because even if i give 10 sec delay. its executing as soon as I click the button.

Collectives™ on Stack Overflow

Call a function after a time gap In Angular JS

JS CODE

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JS CODE

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related