AngularJS navigate by service breaks when refreshing - javascript

Still learning AngularJS. I have a setup where I load a subpage by choosing from a list on the main page. The pick is then stored in a service. Once the subpage loads it fetch that service value and use that info to lookup in another list. Problem is that if I reload the subpage the service resets and the pages gets displayed incorrectly because the service value has been reset as well..
Is there a good way to go around this? - I love code snippets as answer or link to them (easier to understand) :-)
I'm using auto reload when developing, so it becomes quite annoying sometimes.. I have to go back the main page and do a reload and navigate back.

Related

The script is working just after one refresh on angular

I tried to implement a tree view similar with this( https://iamrohit.in/javascript-css-horizontal-employee-treeview/ ) but the script only work just after first refresh of the page, I'm using angular, is there an option to load the page before so the user doesn't need to refresh the page every time because that's not my intention on this project.

Dynamically updating content (eg. clicking button updates div) and update url on website without refresh, then stay on the same page on manual refresh

So I'm struggling to figure out how to do this and I can't find any answers. I've been searching the whole web for the last two days but haven't found an answer yet.
The goal: I want a dynamic navigation for an admin/dashbaord website that only updates a div (the main view) of a website and updates the url accordinly (eg. pressing on the
welcome menu button loads the welcome.html into the
#main-view and the url updates from
samplewebsite.com/dashboard to
samplewebsite.com/dashboard/welcome). Then on refresh, stay on the same website with the loaded content (eg. samplewebsite.com/dashboard/welcome still has welcome.html in the #main-view but doesn't actually navigate to the welcome.html file.
Examples: mee6.xyz/moderation or contacts.google.com
What I've already accomplished: Loading welcome.html into #main-view and updating the url with /welcome by clicking on a button by doing this:
HTML:
Welcome
JS:
$('#welcome-button').click(function(event){
event.preventDefault();
var href = $(this).attr('href');
$('#main-view').load(href, function() {
console.log("Load was performed.");
});
history.pushState(null, "Welcome", href);
})
I'm using Flask with Python where I have the following routing set up:
#app.route('/dashboard')
def dashboard_server():
return render_template("dashboard_server.html")
#app.route('/dashboard/welcome')
def welcome():
return render_template("welcome.html")
The behaviour I experience: When I click the welcome menu button, #main-view updates with the welcome.html and the url updates. When I
refresh the browser though, I takes me to the actual welcome.html which makes sense, since it's pointing to this file. That's how I loaded the html into the div in the rist place. But how can I prevent that?
Also the navigation (back/forward) doesn't work but that's another problem I'll
adress after I got this figured out.
What I behaviour I expect: I want it to stay on the main page with #main-view still being filled with welcome.html. Then when
pressing another menu button I want it to update the div and url and
on the refresh be on the same page with the updated div and so on.
A visual explanation:
I'm grateful for any kind of help. Thanks a lot in advance!
This seems to be a pretty hacky way to do routing with JavaScript. But here is how I think your problem can be solved:
When user refreshes the page on this url: /dashboard/welcome, you should run some js that would grab the location.pathname and know that the url must not have the welcome part and would redirect the user back to dashboard but you would have to add an url parameter to let the js on dashboard page know which page's content to load in the #main-view so from dashboard/welcome you can redirect the user to an url similar to this: dashboard?page=welcome. Now through js on the dashboard page, you need to grab the url parameter page and load the content of the welcome.html which you already have achieved. Now you should change the url back to dashboard/welcome from dashboard?page=welcome and push the url to history too.
This approach might have a lot of scenarios where the stie might break. One would be: when your js is evaluating things on dashboard/welcome page, the welcome page might have already been loaded, so you would have to show a loader or similar to prevent the flash of incorrect content.
I can't think of more scenarios from top of my head. I would suggest you to use some sort of framework/library to take care of routing for you. CRA (create react app), Next.js, Gatsby.js, Nuxt.js are all great libraries that can handle routing in a very robust way so you don't have to worry about that and can focus on the content and styling your applciation. Except CRA, I think all other libraries support static site generation which gives you better SEO overall. But to use these, you need to know React.js or Next.js at least. Best of luck!

Django source files not updating when changing pages

Using Django 1.11 with Viewflow-Pro 1.04
This is probably a very simple question, but I've spent hours googling and reading and have come up completely empty.
Each page of my app has various CSS/javascript files that it loads with script and link tags. However, when a user clicks a link and it redirects them to another page, the source isn't refreshed - it is still using the source from the previous page (which is often similar, but not the same).
Refreshing the page fixes it, as it pulls the correct source. But basically I'm having to refresh the page every time I get redirected to a new page.
This has proven hard to debug, since a lot of pages have the same source and so they "seem" to work correctly - but I think it only happens with links. If my view.py redirects users (using return render or similar) then it doesn't happen. It is just if a user clicks a link to jump from one part of my site to another.
Anyone have a clue what it could be? I would include code samples, but it's affecting my entire project - if some specific code would be helpful let me know.
This is an example of what one of my links looks like:
{{ MOC }}
Thanks for any help.
Viewflow uses Django-Material frontend with Turbolinks to manage page scripts.
To adapt your page for Turbolinks ensure that scripts located in the <head> of a document. And 'turbolinks:load' event used to initialize it.
Ex: https://github.com/viewflow/viewflow/blob/master/viewflow/frontend/static/viewflow/js/viewflow.js

Remove/Hide div From Website

I have a css animation that essentially slides two images with a high z-index off the screen revealing the website content below it on the home page. It is only on the home page and not on any other pages.
What I would like to do is have this animation run only the first time the page is accessed during a session. So if the user navigates to another page and then comes back to the home page, I don’t want the animation to run again.
The only solution I can think of is to create an HTML5 session storage object on the first page load that is checked every time the home page is loaded and use jquery to hide div that contains animation if the value of the object is set.
This seems a bit overkill for such a simple task. Any suggestions on a simpler way of just removing the div that is persistent across page reloads during the session? You don’t have to write the code for me, just point me in a simpler direction if possible. Like is there a way to do this with just CSS. Or if I remove the element using JavaScript will it remain removed after navigating to another page within site and then coming back to home page. Please and thanks!
P.S. This is a custom WordPress theme so I’m open to a PHP solution as well.
You can check the referrer URL and run the animation only if the referrer is not the site itself. But this time the animation won't be shown if the visitor first opens another page and then navigates to the homepage.
Another option would be using cookies.

What makes navigation between Twitter's pages so fast?

I was on Twitter the other day, and I opened chrome devtools and went into the network console, and then clicked on a link on Twitter (specifically the one on the menubar which said 'Me'), and then, as always, the page didn't really load again, it seemed to be AJAX-ified, but then I looked into the network content, and all I saw was a few images and a few javascript files.
Unless Twitter loads content from the 'Me' page on the loading of the home page (which I highly doubt, since Twitter is pretty fast at loading too), what can make the navigation between Twitter's pages so fast?
Like all JS apps, the pages you see are just "views". You are on the same page, stuff gets loaded via AJAX, and then JS renders the data with the template to form that view.
Here's a scenario: when you open a clean browser and go to Twitter's timeline, everything loads. This also includes all scripts that are needed to render the succeeding pages.
Now, when you go to another page, like the "Me", Twitter does not have the resources of the page just yet. So, it loads via AJAX the needed resources to render the "Me" page like all data, and the template for it. After loading, it renders the data and with the template to form the "Me" page.
Now when you go back to the timeline, Twitter never discarded the timeline data but cached it (localstorage at best). Thus going back to the timeline (or any visited page for that matter) is just a matter of reading cached data, cached templates and rerendering the view onto the page. No network requests needed at all.
As you also notice, new data is retrieved incrementally, by just querying from the server new tweets rather than getting them all back. Only when the page determines that it needs a fresh set of data will it query a bunch of them.
Also, JSON data is a million times (to exaggerate) lighter than loading a normal page.

Categories

Resources