Reloading the page on FF not changing page

Question

I'm having this issue that I can't figure out what is happening: I'm using Angular and it's routing mechanism.

so I have a url:

<a href="#/videos/detail/{{video.Id}}" onclick="location.reload();">
    <div class="card-image">
        <img ng-src="{{video.ThumbnailUrl?video.ThumbnailUrl:'img/images.png'}}" src="" />
    </div>
</a>

As you can see there is an onclick="location.reload(); this works on Chrome and IE9. But on FF it's doing the following:

1. Click on link
2. The url get's updated
3. The location.reload() get's called an the page is being refreshed
4. The url and angular view, go's back to the page where the link is clicked
5. When pressing 'F5' the actual page and url are being loaded in

I also tried doing location.reload(true); for if maybe the route was cached or so, but no luck.

In case you are wondering why the refresh and location: I need to refresh the page for a plugin to reload (due to a bug in it) and this method was the first I could think of.

EDIT: Eventually done by doing a combination of Angular and some Jquery;

So the final html looked like this;

<a href="#" class="prevent" ng-click="redirectwithreload('# />videos/detail/'+video.Id)" >
    <div class="card-image">
        <img ng-src="{{video.ThumbnailUrl?video.ThumbnailUrl:'img/images.png'}}" src="" />
    </div>
</a>

The directive looked like this

.directive('videoCard', function () {
    return {
        restrict: 'E',
        templateUrl: 'partials/directives/video-card.html',
        controller: function ($scope, $element, $location) {
            $scope.redirectWithReload = function (url) {
                var toUrl = location.href.split('#')[0] + url;
                location.replace(toUrl);
            }
        },
        compile: function () {
            return {
                post: function () {
                    $('a.prevent').click(function (e) {
                        e.preventDefault();
                    });
                }
            }
        }
    };
})

the class prevent was just for my Jquery to prevent default and went for a ng-click, because of if I ever need to add more vars to the url, it's now very easy to do :)

Thanks for all the help! especially: @mplungjan

Answer 1

If you store the ID in an attribute and use replace, you can do

<a href="#" id="{{video.I‌​d}}"
onclick="location.replace(location.href.split('#')[0]+'#/videos/detail/'+this.id‌​); return false"> 

or for the purist (here jQuery, I do not do Angular):

<a href="#" class="vids" id="{{video.I‌​d}}"> 

using

$(function() {
  $(".vids").on("click",function(e) {
    e.preventDefault();
    location.replace(location.href.split('#')[0]+'#/videos/detail/'+this.id‌​); "
  });
});

For more parameters:

<a href="#" class="vids" data-id="{{video.I‌​d}}" data-target="somewhere"> 

using

$(function() {
  $(".vids").on("click",function(e) {
    e.preventDefault();
    location.replace(location.href.split('#')[0]+'#/videos/detail/'+
      $(this).data("id‌"​)+'/'+
      $(this).data("target"​));
  });
});