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
Related
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!
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.
I'm currently working on the web-site using Polymer, Jekyll and Github pages. But I'm facing one big issue. When switching between pages there is a white screen showing every time, which is not correct behavior. I would like to always see the header section and left menu (without flash) even when switching between the pages.
The web-site is not vulcanized yet (there were another issues with that), so it is not very fast, but this should not be a reason. I was playing with the imports in <head> section and scripts, but nothing helps. Seems that the page actually renders only after DomContentLoaded event.
Any suggestions?
The web-site can be checked on this url and the source code is also available on GitHub.
If you refer to the transition when navigating between pages — the Polymer website feels faster because they don't do full page loads. Instead, they use AJAX to load the new pages and modify your URL bar with the help of the History API to make it look like you went from page A to page B. The term for this kind of thing is Single-page application.
I have been trying to solve this problem for a while now and have looked on numerous forums to find a solution. Here is my setup. Any help would be greatly appreciated!
I currently have a index page that loads a JavaScript header and footer above and below my "content" section. I also have a list of navigation links inside of the header. My music player is located in the footer. It does not load automatically (for those that are bothered by that), and i don't want it to reload every time someone clicks on one of the navigation links on the side. I don't want to use frames for this; I have read that frames will allow me to only refresh the "content" section of my page, but that when indexing a site, most search engines will not work well with a site that has frames. I also do not want to use a pop-up for my music as most browsers and users have pop-ups blocked.
Basically i am looking for a code or something that will allow for a header and footer (doesn't have to be a JS header and footer) to not refresh when someone clicks on the navigation links located in my header. Thanks again to anyone that has a solution to this problem.
Do it like Facebook - use JavaScript to intercept link navigation, load the content using XMLHttpResponse, and then update the portions of the page that need to change.
This keeps the static integrity of the page for search engines, allows most of the site to still work just fine for users with scripting disabled, and avoids resetting the music for everyone else.
What Shog9 said, but also make sure to change location.hash whenever you change the content and make it so that visiting the website with that hash will redirect you to the correct page.
Here's another example of a band that uses the AJAX method to reload the page content, while keeping the player going...
http://jonandroy.ca/
The URL hashtag gets updates each time you click on something, and if you copy that URL, when you visit it, you'll see the homepage load for a split second, and then it loads the content of the page specified by the hashtag. Not perfect, but an overall good solution to this age-old problem.
You might want to look at how thesixtyone.com works. They have non-interrupted music by using AJAX to rebuild the page when a link is clicked rather than load a new one. This is achieved by having all links be anchors for the current page (i.e. all links are relative and start with a hash character).
Hi.
I'm new to Java/AJAX etc.
I have a page with links down the left and a DIV on the right.
I want content (other pages) to load in the DIV when users click on the links on the left... beginner AJAX stuff I guess.
I played around with a few JQery plugins and found one that allows pages to load with a fade effect, which is perfect. I have a problem though:
The plugin works fine when I click links on the parent page, but when I click links in one of the loaded pages, after one link deep, it breaks out of the div and replaces my parent page. (This issue was described on the plugin page, supposedly solved, but is still cropping up on my page). I suspect it has something to do with the "bind" variable.
I've uploaded a stripped down example of my site here:
This is the plugin website: www.thecreativeoutfit.com/index.php?view=Simple-AJAX-Content-Changer-with-EZJax (Because I'm a new user I can't add any more links, sorry for the long-hand).
For those who are willing to look at my site or the plugin, I'd appreciate your insight.
If that's a hassle maybe you could recommend a similar simple ajax plugin that allows the loading of content with a fade-in effect, but also allows links within the loaded content to stay contained within the original div.
Many thanks!
Max
I was going to post a comment but it got too long so, what the heck..
Your website worked just fine for me (except for the pages that were not available) in Firefox running on Windows XP.
However, I would strongly recommend against that type of design - it will be a pain for you to maintain in the long run and it is generally considered bad design because it is against the functioning principles of the web: different pages of your website should be represented by distinct URLs which users of your site could use to link to. It also breaks browser back button functionality which is a big usability issue (at least for me).
Plus, it will not be SEO friendly - which means that search engines like Google won't think highly of your website - which means that you won't show up in searches.
You nested pages are breaking because the JavaScript click events are not being reattached to the paging controls after the first page causing the normal href attribute to be used.