Change Service Portal URL without reloading the page.

amanda_l_webb · ‎07-18-2017

Has anyone figured out how to change the URL without reloading the page?

I would like to alter the URL so that my users can send it out and it will pre-populate widget information. Problem is that it reloads. I have tried to figure out how to use ngRoute, ui.route, and history.pushState. All seem to reload the page. Any other thoughts?

Thanks!

Patrick Schulte · ‎09-23-2017

You are right, it seems like that the reason for this is that the $locationChangeStart events gets triggered more than once so you have to build a condition within the event listener.
What has worked for me is the following:

The event listener:

var originalUrl, initUrl;

$rootScope.$on("$locationChangeStart", function(e, newUrl){

         if(newUrl != originalUrl && newUrl != initUrl){

                   $window.history.replaceState(newUrl, $document.title, newUrl);

         }

         originalUrl = newUrl;

         e.preventDefault();

});

The URL change:

$scope.changeURL = function(){

         initUrl = $location.absUrl();


         //Set your desired URL parameters here, you could also extend the current ones with:         

         /*

         var params = $location.search()

         angular.extend(params, {

                   someParam:'test'

         });

           */       

         var params = {

                   someParam:'test',

                   anotherParam:'anotherTest'

         };


         //triggers the $locationChangeStart event

         $location.search($httpParamSerializer(params));

}

Dont forget to inject $document, $httpParamSerializer, $location, $scope and $rootScope in your controller.

Let me know if this worked out for you.

View solution in original post

Rama Chandra D · ‎07-20-2017

Can you try the code in Edit section of my reply? I did edit the code I posted previously?

Reposting code:

HTML

<div>

<h1>Wassup</h1>

<button type="button" ng-click="c.submit()" value="submit">Submit</button>

<div>

<p>You entered: {{::data.submittedInput}}</p>

</div>

Client :

function($location,$scope) {

/* widget controller */

var c = this;

var submittedInput = c.data.submittedInput || c.userInput;

c.submit = function() {

submittedInput = c.userInput;

var search = $location.search();

angular.extend(search, {submittedInput: submittedInput});

$location.search(search);

};

}

Server:

(function() {

/* populate the 'data' object */

/* e.g., data.table = $sp.getValue('table'); */

data.submittedInput = $sp.getParameter('submittedInput');

gs.addInfoMessage(data.submittedInput);

})();

Rama Chandra D · ‎07-23-2017

Hi,

Any progress updates?

Darshak

amanda_l_webb · ‎07-24-2017

Sorry - getting hung up on other things... I am still wanting this and will work on it later today and update you!

Rama Chandra D · ‎07-24-2017

Thank you so much. I apreeciate it.

amanda_l_webb · ‎07-25-2017

Hi Darshak,

I checked out that link..... I understand how to communicate between the server and client scripts.. that piece isn't really the issue.

The issue is that the page is refreshed when I call .search() in the client controller to update the URL. That is a separate issue than pulling the search parameters from the URL. that is easily done with $sp.getParameter().

Do you know how to NOT reload the page when $location.search() is called in the client controller?