Refresh Event not working on Firefox browser - angularjs

I have an application built using angular js with angular ui router. Below is my application URL
http://localhost:8082/sample/#/test/1
On click of enter in the browser address bar, the page refresh happens in chrome,
but it doesn't work in firefox. But refresh works in firefox if there is any change in the URL. Browser refresh should work on enter even there is no change in the URL.
Anyone has solution for this?


The refresh on enter doesn't work because you use # in your url (anchors). Anchors has made to smooth scrolling page to appropriate element id on page. So, if you want it to refresh, try use pushState and urls without #.


As already stated the "#" in the url tells the browser you are using anchor to scroll to and it prevents the refreshing of the page. Thats the default implementation in every browser including chrome. Angular uses the '#' to prevent browser reloading when changing between pages.
A solution for this can be utilizing HTML5 history API which will also allow for your urls to be prettify and not include '#'. This is done by setting the $locationProvider.html5Mode(true) in your config:
angular.module('sample', [])
.config(function($locationProvider) {
//etc..
// use the HTML5 History API
$locationProvider.html5Mode(true);
});


In Firefox (for me, at least) refreshing leads to a / character being appended to the URL, which breaks the app.

Related

How to trigger hard refresh when redirecting to a different page in Next.js?

I have a <Link> to a certain page on my Next.js website. Upon clicking it, I want the webpage to hard reload after it redirects to the destination page (whether it reloads before or after the redirect is not important). I have tried using router.push as well but a hard refresh does not occur. Any help would be appreciated.

If you want to refresh the page on load use simple anchor tags,
if you want more control over reloading the page,
Refer this:
https://nextjs.org/docs/api-reference/next/router#routerreload

Browser reloads react app when back button is pressed

I have a simple react app, to get to this app, a user clicks an anchor tag from another page. This is . Let's say this page is http://localhost/index.html
It redirects fine to the react app. Let's say it's on http://localhost/react/simple_app. In this react app, I use React Router, which has a catch all if none of the route matches. It will simply render text "Page Not Found".
When I click back button to get to index.html, both Chrome and Firefox will reload simple_app, WITH the url set to http://localhost/index.html. Obviously this will make simple_app to render "Page Not Found", as the route http://localhost/index.html is not defined in its routes. Once that rendered, the browser will immediately renders the previous page. So on this action the user will see the correctly rendered previous page. Everything seems to be pretty minor so far, just a bit of a flicker when "Page Not Found" briefly rendered then it quickly re renders index.html.
What is not fine is, if I then press "Forward" page on the browser, it will NOT re-render simple_app again. It will simply shows "Page Not Found". My suspicion on this is because briefly it has rendered it prior to moving "backwards" (with the wrong URL), hence browser will load it from cache.
Tried on firefox and chrome, with reactjs. Although this behaviour can be replicated with any JS, but specifically problematic with react router.
Also tried, if I type in the url http://localhost/simple_app, if i click back, it won't do the funky reloading with the wrong URL.
Not sure if any good solution to prevent this from happening.

To help everyone who got here looking for an answer, after a bit of digging and a bit of luck, I found the issue rooted in a library (ruby gem) we used called turbolinks. https://github.com/turbolinks/turbolinks.
This gem, injects javascripts which intercepts various navigation API such as anchor tag and browser back and forward so that it can make as our native application behaves like a Single Page App (without reloads).
So if you encountered similar behaviour, you may not be using Ruby, but check if you are using library that behaves similar to Ruby's Turbolinks. Hope this helps.

why angularjs website cannot show ng-view content in firefox?

I am working on a angularjs website and when I Upload my site to public server
it work fine if i open this site by Chrome but in firefox only index content show to user and route change donot add template to ng-view?
there is no error or warning in console only this:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience

I found very silly bug in fire fox witch add a 'height:0px' to my view class and it make my ng-view invisible ....
I add 'height:auto !important;' style to it to show my content on ng-view .

AngularJS $scope Not Updating in Safari Until Force Resize

Quick Video Of Issue: DropBox Share Link
Description:
I have been experiencing some weird behavior from Safari when rendering content I fetch using restangular in <ion-content> tags.
As is seen in the video, the content is pulled - as logged in the console, however it only renders in Safari when I re-adjust the screen size. On the other hand, in Chrome, this renders without an issue.
Dependencies Installed:
restangular
ui-router
Anyone have an idea of what might be causing this behavior?! Thanks

AngularJS ng-cloak: empty page is displaying in IE9 when browser cache is cleared

I just encountered a weird issue on angular's ng-cloak. When I cleared my IE9 browser's cache and close and open my browser again, when i accessed the page, it display empty page :( but when i tried to refresh the page it the page is now displaying.

Resources