0

I'd like to add one extra query parameter when clicking button and executing some code. The exact same code works fine for me when executed as part of right click menu. But when I try to do it using a button's click, it doesn't work (e.g. I can see the URL changed but after all angularjs internal code run it returns to the previous value and my extra search parameter is not appended).

This is the code I'm trying (I tried adding last line but it didn't change outcome):

addParameterToUrl(paramName, value) {
    const urlParams = new URLSearchParams(window.location.search);

    urlParams.set(paramName, value);
    const newQuery = `${window.location.pathname}?${urlParams.toString()}`;

    history.pushState(null, "", newQuery);

   SW.serviceLoader.Location.path(newQuery, false);
}

Is there any way to change URL by clicking a button (input type="button")?

After reading several threads and also documentation and trying many various approaches I finally got it: 

.finally(() => {
    Spinner.stopSpinner("updateBooking");
    this.onReload();
    Timeout(() => {
        this.beforeUnload();
     }, 0);
 });
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Naomi
  • 718
  • 1
  • 9
  • 28
  • 1
    Hard to say, as answer is not precise. It should not matter if you use button while it's all the same handler method. Did quick test and default code: `$location.path('/newValue').search({key: value});` works fine when use with button. – Thowk Sep 02 '19 at 20:29
  • Do you see what may be wrong with my code as is or how it should be changed? I added window.location.href in the console and I saw my parameter added after my method was run, but then it was doing some standard angularjs code and after one of the return resolver(value); I saw it reverted back. – Naomi Sep 02 '19 at 20:40
  • 1
    Have you tried this: https://stackoverflow.com/a/11932283/6015844 – Thowk Sep 02 '19 at 20:55
  • I'll try to use timeout in a second. I got an idea about $scope.$apply() before seeing your answer, but that got an error about digest already in progress. – Naomi Sep 02 '19 at 21:09
  • I've tried everything, I think, but I cannot make it to work :( My last attempt is Timeout(() => { this.scope.$apply(()=> { this.beforeUnload(); }); }, 2000); } – Naomi Sep 02 '19 at 21:41
  • After reading several threads and also documentation and trying many various approaches I finally got it: .finally(() => { Spinner.stopSpinner("updateBooking"); this.onReload(); Timeout(() => { this.beforeUnload(); }, 0); }); – Naomi Sep 02 '19 at 23:39
  • All of the sudden the solution no longer works :( There have been lots of changes (and by other developers too), but I don't know what may have broken the functionality – Naomi Sep 13 '19 at 18:37
  • Any more ideas as what may be wrong? I changed the code once again, I also changed ng-if to ng-show condition for button's visibility (was thinking if that makes a difference), but so far nothing helps. I trace my code and see url changes correctly but once all angularjs code finishes, the URL loses the extra stuff I add. How can I catch the line in angularjs that resets the URL back and why does it happen? – Naomi Sep 22 '19 at 17:50
  • I was about to start a new thread on this topic, but found this one https://stackoverflow.com/questions/18611214/turn-off-url-manipulation-in-angularjs which may be an answer. However, I don't understand what 'sample' is supposed to be in that code. Should I use this code as is and add to my main app.js file? – Naomi Sep 22 '19 at 17:58

2 Answers2

0

After adding this code (based on the thread I noted in my last comment) into the app.js my code now works again:

app.config(["$provide", $provide => {
        $provide.decorator("$browser", ["$delegate", $delegate => {
            $delegate.onUrlChange = () => { };
            $delegate.url = () => "";

            return $delegate;
        }]);
    }]);

How can I double check whether this introduced any problems?

Naomi
  • 718
  • 1
  • 9
  • 28
  • I started testing and found that I have a new problem now - if I try to go directly to pages like this appAddress/PrivateInstruction/Instructors#/edit/KNHE6V2CJ5AVERBR the edit form doesn't open. So, is there a way to only add this config change in a particular place and then reset back? – Naomi Sep 22 '19 at 18:35
0

I've added this code to main app.js and it did work:

app.config(["$provide", function ($provide) {
        $provide.decorator("$browser", ["$delegate", "$window",
            function ($delegate, $window) {
            // normal anchors
            const ignoredPattern = /^#[a-zA-Z0-9].*/;
            const originalOnUrlChange = $delegate.onUrlChange;
            $delegate.onUrlChange = function (newUrl, newState) {
                if (ignoredPattern.test($window.location.hash)) return;
                if ($window.location.href.indexOf("stolenids") >= 0) return;
                originalOnUrlChange.apply($delegate, arguments);
            };
            const originalUrl = $delegate.url;
            $delegate.url = function (url, replace, state) {
                if (ignoredPattern.test($window.location.hash)) return $window.location.href;
                if ($window.location.href.indexOf("stolenids") >= 0) return $window.location.href;
                return originalUrl.apply($delegate, arguments);
            };
            return $delegate;
        }]);
    }]);

I don't really like it as it uses a particular string I need to add to my url. I'd rather somehow fix the behavior directly in the controller of the page but I am not sure how and I tried many things already. Do you think this solution is OK?

Naomi
  • 718
  • 1
  • 9
  • 28