Angularjs page refresh data issue loading from JSON file - javascript

I followed a tutorial that showed how to use angularjs and load json data based on menu slug and show it in the page. The demo is here: https://dl.dropboxusercontent.com/u/28763/angular-tutorial/index.html#/page/home
When I refresh the homepage (https://dl.dropboxusercontent.com/u/28763/angular-tutorial/index.html#/page/home), I get a js error in firebug that notes:
$digest already in progress
or
$rootScope.pages is undefined
This usually happens the time after the initial pages.json load. So if I update the pages.json file, I can hit refresh and see the new data, but if I refresh again I get the error. If you click a menu item, About for example, you will see the About page. Click home and it is there. Refresh the browser and get an error.
Also the page shows where the content should render:
{{page.title}}
{{page.content}}
...rather than the title and content. I am super new to AngularJS and am not finding a reason why this isn't working here consistently.
I have the .otherwise({redirectTo: '/home'}); in there, and it does redirect there, however, the data doesn't always do the same...
If this is due to the pages.json file loading quick enough, how do I go about making sure the file is completely loaded before moving on? Or might there be another reason someone sees?
EDIT:
Here is a Plunker of my setup: http://plnkr.co/edit/8QpsLHhPA58uZnbAHgck?p=preview

Related

Oracle apex open file browser automatically on page load

I need to open "File Browse" item ("P50_BLOB") on page load.
I tried clicking the item with dynamic action on page load with javascript:
$('#P50_BLOB').click();
it didn't work, though it does work using the console.
I have also tried using async / wait / promise / wait for document to load.
I even tried to do it with another apex item that will make that click when it is changed, and manually changing the item is working, but on page load it's not.
This is supposed to be very simple but nothing works.
Thanks.
If you try that with the developer tools open in Chrome you will see an error:
Googling that led to this SO question:
File chooser dialog can only be shown with a user activation error while using web scraping through Javascript

Next.JS dynamic route navigation shows wrong page

I have the following problem.
In our Next.JS project we have 3 pages:
/documents => shows all documents
/document/[id]/index.js => shows document page
/document/[id]/edit.js=> shows document edit page
Quite simple so far.
On all these page we use an useDocument hook with router.query.id | props.id (from getServerSideProps) which loads the document with SWR.
This generally works without problems.
But when i open a document page, then go back to the documents list and then try to open a different document in the edit page it correctly shows the browser url with /edit in the end, but somehow shows the document view page and not the edit page. When i refresh, everything works fine and the edit page is opened.
This only happens in production mode and i cannot recreate it locally which is very annoying. In addition, which is very strange, it does not happen, when i open the react dev tools^^
What i found out so far is that sometimes the props.id is still the id of the last document and the router.query.id contains the new document. But still the old document is not shown anymore, but the new one on the wrong page. I also try to switch to always load the document with the router.query.id but that didn't work either.
What i found is that Next.JS has some issues with not refreshing state when switching dynamic pages, but that didn't helped me so far.
Does anyone experienced something similar?

Next.js page rendering glitch when refreshing pages

I'm having a weird problem that I originally just dismissed as a development glitch, but now I'm more concerned because It happens every time I refresh the page.
The issue is when I navigate to another page (localhost:3000/otherpage), sometimes it wont render that page at all. The page will turn completely white and have no HTML elements on the page (according to the dev tools inspector). However If I'm on that page and refresh this will always happen. Theses pages are dynamically rendered pages that have logic written that tells them to load a skeleton page while fetching the data, or render an error page if there's a problem with the request. I'm stumped as to why this is happening and have not been able to find anyone else that has experienced this problem yet.
My question is:
Why does this happen? and how can I work around this?
I have a screen recording to better explain whats going on.
(link to unlisted video):
https://youtu.be/mJPp3P4ElsI

AngularJS ng-view clears out on before new content is load

I'm new to AngularJS and made an app which changes page without reloading it.
But as I'm requesting the page I'm checking if request was made with ajax or not, if so I'm returning only needed part for angular, if else I give browser an entire page with layout. It means, that if visitor enters to page by entering address to browsers address bar he should see that page without angular loading it.
So my problem is: When I open page by entering address it shows content, that I need, but then - angular catches route .when('/some/page') and loads it, and as it does it, it clears all content in ng-view (for half of second or less) and then shows same content, but loaded by angular. This short content "blinking" and unneeded request irritates me, and I don't even know what I should be searching for.
Is it possible to prevent angular from loading the page if visitor is already in it? Or to change that content clearing behaviour (but I have an idea that it takes this much time to add new content to DOM).

pushState on navigating off page and back

I am trying out popstate and pushState and I am wondering how to handle off page navigation.
Lets say I have an index page which generates a 'new page' when clicking something and it's loaded in with ajax. With popstate I change the url. In the page loaded are links that go outside of the current 'index' page. When somebody presses back they get a dumped state object.
How to prevent it so it actually loads the url that was given during the pushState?
Thanks in advance.
It seems you're doing something that causes the browser to replace its cached version of your index page with something else. Make sure your server sets the
Vary: Accept
header when returning the index page and later requests. See this Chromium issue for more information.
Have the link also use an anchor so the browser has a reference to fall back on.
Throw one of these at the beginning of each of the pages with a unique name attribute.
So your links would be:
Load the first page
and the page HTML would have this at the top somewhere:
<a name="first"></a>
Funny you made this post cuz I've got the exact same problem right now with this site I just started making yesterday: http://asims.fleeceitout.com - had to put arrows everywhere to keep people from gettin lost haha. I'll end up taking my own advice here but I'm too lazy for now. Plus I'm trying to see how much of the site I can make without a single <a></a> used.

Categories