CODEWITHSUNDEEP
angularjspaginationangular-ui-routerangular-ui-bootstrap
rlcrews
rlcrews

Reputation: 3562

how to prevent ui-bootstrap pagination control from changing the url route

Within my application I have two views search and masternameserch these views are defined in app.js as:

    $stateProvider
        .state('search', {
            url: '/',
            controller: 'searchController',
            controllerAs: 'search',
            templateUrl: '/app/views/search.html'
        })
        .state('searchmasterName', {
            url: '/searchmastername',
            controller: 'searchMasterNameController',
            controllerAs: 'masternameSearch',
            templateUrl: '/app/views/searchmastername.html'
        })

Within my views I have the ui-bootstrap pagination control setup as 

 <div class="text-center">
                <uib-pagination ng-show="masternameSearch.pgTotalItems > 10" total-items="masternameSearch.pgTotalItems" ng-click="masternameSearch.pageChanged(); $event.stopPropagation();" ng-model="masternameSearch.pgCurrentPage" class="pagination-md" max-size="masternameSearch.pgMaxSize" boundary-links="true"></uib-pagination>
            </div>

And within the controller I have the pageChanged() function setup as follows:

 vm.pageChanged = function () {
            var pageRequest = buildMasterNameSearchRequest(); //get cached request
            pageRequest.pageFrom = vm.pgCurrentPage; //set page number to request 

            var currentPath = $state.current.name;

            searchService.postSearchRequest(pageRequest).then(renderResults, onError);
            $state.go('searchmastername',
            {},
            {
            notify: false,
            location: false,
            inherit: false,
            reload: false 
        });
            $timeout(function () { location.hash = '#top' }, 1000);
        }

The question I have is whenever clicking on the pagination control the underlying URL is always the root url. Therefore when I click on a pagination button the search executes but I am navigated back to the default main view which is wrong. As you can see from the code I first tried in the directive itself to change the onchange to an ng-click event and tried to stop propagation to stop the redirect through $event. This did not work. Second thing I tried was to call a state transition / state.go() in the pageChanged() function where I basically reload the view. This however does not work as it throws an error that the state cannot be found. Sadly this actually prevents the page from reloading or navigating to the main page so the error actually makes the page work as the end user might expect, but with errors generated around the missing state I know this isn't right.

Update: The error was generated from a type searchmastername and not searchmasterName.

Making this change fixed the error but still causes the site to redirect to the default view to load.

Can anyone provide an idea or ways to get the pagination control to not cause a navigation event by redirecting me to the default main view when ever clicked?

-cheers

Upvotes: 1

Views: 866

Answers (1)

rlcrews
rlcrews

Reputation: 3562

After doing some more studying of this problem I thought the issue could be addressed by listening to the $rootScope for the stateChangeStart event and from there add a preventDefault() function to stop the navigation from occurring in the route which I did.

So the code now looks like this on the pageChanged() function

vm.pageChanged = function () {
    var pageRequest = buildMasterNameSearchRequest(); //get cached request
    pageRequest.pageFrom = vm.pgCurrentPage; //set page number to request 

    searchService.postSearchRequest(pageRequest).then(renderResults, onError);
    $rootScope.$on('$stateChangeStart',
        function(event) {
            event.preventDefault();
        });

    $timeout(function () { location.hash = '#top' }, 1000);
}

While useful, using preventDefault() stops all further interaction with the page. Links would no longer work etc. I thought I had fixed but instead I had just stopped the event so the timeout never got called which was the culprit.

The real issue and I did it to my self was adding the timeout and using the location route #. 

 $timeout(function () { location.hash = '#top' }, 1000);

Using this function was actually (as designed) changing my route in my URL and navigating me to the main view. I needed to have the ability to scroll to the top so I changed the timeout function to look like this

 vm.pageChanged = function () {
            vm.showPager = false;
            var pageRequest = buildMasterNameSearchRequest(); //get cached request
            pageRequest.pageFrom = vm.pgCurrentPage; //set page number to request 
            searchService.postSearchRequest(pageRequest).then(renderResults, onError);
            window.scrollTo(0, 0);

        }

Using window.scroll accomplished the same scrolling effect but did not change the route.

Upvotes: 0

Related Questions