I use Polymer starter kit to build my app. I removed the hashbang in the urls.
I am trying to build a login screen and after successful login, I want to change the page to default route. To do this, I have a listener in app.js for successful log in. On successful log in, I change the route which causes page refresh. I tried multiple options:
location = 'entireUrl'
location.pathname = '/route'
location = 'route'
All the options causes page refresh. Is there any way to code this without causing page refresh. Shouldn't page.js catch this and do the routing without page refresh?
For those looking for an answer, I fixed it by calling page.redirect('/route').
note: page.redirect will replace the browser history. If you want to retain browser history you can use page.show('/route')
Related
I've been working on a bookmarklet that performs some logic and then redirects the user to a different page. I'm running into an issue where, after the redirect, Chrome is replacing the icon of the bookmark with the favicon from the target of the redirection.
I'm trying to preserve the original icon on the bookmarklet and so am wondering if there is any way that I can prevent this behaviour?
As an example. Bookmarklet starts off looking like this:
If the bookmarklet were to redirect the user to Stack Overflow then on clicking the bookmarklet icon is replaced:
I've tried a couple of approaches to perform the redirect, all of which have this behaviour:
Bookmark is a link to a server-side page that performs the redirect by returning a 302 with a Location header
Bookmark is a link to a server-side page that executes JavaScript on page load that performs the redirect using window.location.replace
So far I have a couple of other approaches which avoid this particular issue, but have other downsides of their own:
Bookmark is a link to a server-side page that executes JavaScript on page load to perform the redirect using window.location.assign - if user click the back button they are taken to my page which then redirects them again, and can result in the user getting stuck in a loop
Bookmark is a javascript: link which makes a fetch request to perform logic in the background and then goes to the target page using window.location - this works OK, except for on a new blank tab where JS bookmarks are no longer allowed.
It should be possible to prevent the replacing of favicon for some time for a redirect,by configuring the caching time:
* https://web.dev/service-worker-caching-and-http-caching/
* https://stackoverflow.com/questions/5799906/what-s-the-difference-between-expires-and-cache-control-headers
I am developing an application using React/Redux. The application reads from a Json file and saves changes back to the json file.
Its a two page application but I am not using any router. All the editing and saving part is done on the second page, where I am hiding the home page.
My problem is that whenever I am saving something it goes back to the home page, which I know is the default behavior as the source is getting updated. So it is re-rendered. I am using different action for the second page rendering.
But what I am looking for is a simple solution for it to stay on the second page where I can show a success message that the data was saved.
"Where you are hiding the home page" - this suggests you are looking for clientside routing, for which react router would be the normal option: https://github.com/ReactTraining/react-router. You can also look into doing it purely with hooks: https://blog.logrocket.com/how-react-hooks-can-replace-react-router/
I have a Checkout page which after a form submission takes you to an Order page. If the user clicks the browser back button on the Order page, then instead of taking them back to the Checkout page I need to redirect them to their Account page. How can I do this with React Router 4?
I found this question but it seems out of date:
Intercept/handle browser's back button in React-router?
I can think of 2 approaches:
1 In Checkout on componentDidMount see if the previous URL was /order. If it is then perform a redirect.
2 In the Order component intercept the back navigation command and instead redirect.
I would prefer option 2 as the behaviour is residing in the component which it will be called from, and the Checkout component does not need to be mounted. However I'm not sure if browsers allow you to edit these things?
You'll need to manipulate the react-router history. You can either use the history library or the Redirect component. This post explains it well: https://tylermcginnis.com/react-router-programmatically-navigate/
I have an asp.net application and am experiencing a surprising behavior.
Whenever I leave one particular page in the application, The back button starts behaving in the following way:
hitting back (which should take me to the offending page) makes the current screen flash - as if going back - but then reloads the current page instead.
It doesn't matter how I leave that page I see this effect. If I click on a link on the offending page and hit back, same thing. If I am on the offending page and type in a new address in the address bar, then hit back, same thing. It doesn't matter if I go to another page in the same application or an external application, same thing.
I tried using fiddler to see what is going on, and all that I see when I hit back, is all of the external links (css, jquery, etc) get reloaded on the current site. I don't see a 320 from the offending page at all.
Note: disabling Active Scripts hides this symptom.
Most likely the external page either is tampering with your browser history (via JS) and setting the same page as the last page in your history when the site is being loaded, or it has another page set between that redirects to the page you are seeing, and when you click back you are loading the redirect page again.
Try to disable JavaScript and see if it is still happening. If yes, try to analyse the first load of the page with fiddler and see if another page is redirecting you.
False alarm:
This is an inherited project and I hadn't read all the code. There is javascript that says:
<script type="text/javascript">
if (window.history.forward(1) != null)
window.history.forward(1);
</script>
Problem solved.
I'm trying to wrap my head around using HTML5 pushState. It seems to work great. I can add states, go back with my browser and everything looks fine. However, when I refresh the page, it leads to a 404, because the URL that was appended with pushState doesn't actually exist...
I am trying to get everything to load from a single folder with an index.html page, so the URL would look something like http://www.server.com/app_name/<something> (app_name is a folder with an index.html file).
As far as I could gather, hashbang is considered bad, so what pushState URLs can / should I use that will stay on the same actual page and allow me to refresh?
And after refreshing, would I still be able to retrieve the state?
p.s. I am not concerned about browsers without javascript enabled or maintaining backwards compatibility. I do not want to change any .htaccess rules to make this portable and configuration-free.
Your problem is that your web server tries to locate a file called something in your app_name folder. What you must do is route all requests to /app_name/* to your index.html and then set the appropriate application state using the location object of the DOM.
You won't get far without telling the server what it should do. That's the whole point of the History API. If you don't want to mess with .htaccess files you probably should edit the configuration of your web server (Apache?) using mod_rewrite or sth. like that.
I ended up giving up on pushState, and instead used BBQ jQuery plugin.
The code looks something like this:
$(document).ready(function() {
// making sure a hashchange event is triggered for refresh
$(window).trigger('hashchange');
});
// this gets called on any page change, back button etc
$(window).bind( 'hashchange', function(e) {
// the fragment contains a hash value at the
// end of the url, e.g. #xyz
var url = $.param.fragment();
// simulating a click on the appropriate link on the page
// based on the fragment
$('.panel a[href="#' + url + '"]').click()
});
URLs on the page are in this format:
link to xyz