Page refresh issue in angularjs

Question

I have a peculiar problem .I am using anchorScroll service to scroll the page to top to show any messages,like for error or save success messages. I am implementing the function in save button action.

What happens here that when I hit the button first time, it refreshes the page and then when I use it again ,I am getting the required result.

I would like to somehow stop it from refreshing the page first time around.

This button is outside the form directive,although my form is inside form tag. Included $anchorScroll service

<a id="top"></a>   at the top of my HTML page.

if(data.validateError==true )
                {
                    $scope.saveSuccessfull=false;
                    $scope.wrongInputError=true;
                    $scope.negErrorMessage=false;
                    $scope.loaderDiv=false;
                    $location.hash('top');
                     // call $anchorScroll()
                   $anchorScroll();

Community · Accepted Answer · 2017-05-23 12:32:52Z

14

From this answer : https://stackoverflow.com/a/15935517/971 which proved useful to me having a similar issue.

var old = $location.hash();
$location.hash('top');
$anchorScroll();
//reset to old to keep any additional routing logic from kicking in
$location.hash(old);

This will prevent the reload.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Nov 14, 2013 at 13:21

mathieu

31.3k4 gold badges67 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mastro Over a year ago

If only I could give you three up votes for this great solution. Was wracking my brain for awhile.

Vincent P Over a year ago

Why this is not in the official docs example, really annoys me. Was about to custom roll some JS....

Alex Guerreiro · Accepted Answer · 2015-10-10 13:30:21Z

3

The reloadOnSearch: false solution suggested by @Raulucco worked fine for me. Following an example

$routeProvider
.when('/search', {
           templateUrl : 'views/search.html', reloadOnSearch: false
 })

answered Oct 10, 2015 at 13:30

Alex Guerreiro

1452 silver badges13 bronze badges

Comments

Raulucco · Accepted Answer · 2014-11-14 13:20:13Z

1

I found this answer after having the same problem. I resolve it by creating a new service that makes the scroll with jQuery. but I found on the documentation that on the routeProvider is possible to set the attribute reloadOnSearch to false, so that now you can change the hash and the view won't reload. I found it a cleaner way.

answered Nov 14, 2014 at 13:20

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

Collectives™ on Stack Overflow

Page refresh issue in angularjs

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related