How to save location hash state when browser reload - javascript

all. I'm using livereload which is autoreload html,js file tool.
It is very convenient.But I have one problem. I am making single web page app which is depends on hash change website.
Like this . /#/home, /#/product. So when reload browser at /#/product it reloads and back to root / url.It's difficult to debug.
I want to save hash location when reload browser. If I reload /#/product page , and I want to stay still at /#/product page.
Do you have any idea? Thanks in advance.

You are not using a real hash in /#/home. Use /#home or /#product and it will persist on reload.

When your page is loaded, you need to have javascript code that runs that examines the current hash value and constructs the right page state that matches that hash value. Then, when your page is reloaded, the base page will load from the server and then your code will run and see that #/product hash value and construct the appropriate page for that hash value.

Related

Blank page error due to location pathname

As titled,
I've a webpage which has multiple pages on it. The page was originally a single page app created using jQuery before I moved some of the contents into separate files, and load it dynamically using a jQuery templating plugin. The page starts at default pathname ('/') and whenever the content change, the pathname on the URL will change too.
function goTo(page){
// Changing URL without reloading the page (to allow changing the URL
//state without changing the page)
if (page !== 'main'){
console.log("Yes it is not main!");
window.history.pushState("", "", "/"+page);
} else {
console.log("Yes it is main!");
window.history.pushState("", "", "/");
}
// Set page template
$('#main').loadTemplate('pages/'+page+'.html');
}
The above is the method i used to change the URL and content whenever user clicks on the link.
The problem that I encounter is that, whenever I refresh the page when there is a pathname on the URL, the page will return 404 error (not found) and it will return an unknown blank html page that is totally empty (no css and script loaded).
For example, the main page URL is http://localhost:8000, and if I clicked to page A, the URL becomes http://localhost:8000/pageA. However in pageA, when I refresh the page, it will return blank. Only if I reset the URL to http://localhost:8000 then the page will refresh normally.
Is there a way to fix this blank page and pathname problem? Like changed the pathname before the DOM loads?
Thanks
Using window.history.pushState you will replace the browser location, and by hit page refresh you are sending request to the server, and you are asking to serve the page which name is in the location bar. However the page does not exist on the server so the server answers with Not found and that's correct behavior.
You have two options:
Implement the page also on the server side
Use client routing using hash (there are a lot of libraries for that, for example http://projects.jga.me/routie/)

How to clear the session variable in asp.net design source file

Session["pageIndex"] this is my variable which is used in all aspx.cs pages
I used
$('#btn_click').click(function(){
sessionStorage.removeItem('pageIndex');
)};
to clear the session variable in design source file but it doesn't works
help me thanks in advance
I recommend you throw the page number into the query string, then in the Page_Load event, you check for it. If its there, you go to that page directly, otherwise you load the first page.
This should support browser back button functionality taking you to the correct page.
The issue you're experiencing is that ASP.NET is letting you change the page content without changing the url.

Force browser to reload the Javascript files

I am trying to achieve the below in ASP.NET MVC3 web application which uses razor.
1) In my Index.cshtml file, I have the below reference.
<script src="/MySite/Scripts/Main.js"></script>
2) I load my home page for the first time and a http request is made to fetch this file which returns 200.
3) Then, I made some changes to the Main.js and saved it.
4) Now I just reload the home page (please note that I am not refreshing the page) by going to the address bar and typing the home page url and pressing enter. At this point, I want the browser to fetch the updated Main.js file by making a http request again.
How can I achieve this? I don't want to use System.Web.Optimization bundling way. I knew that we can achieve this by changing the URL (appending version or some random number) everytime the file changes.
But the challenge here is the URL is hardcoded in my Index.cshtml file. Everytime when there is a change in Main.js file, how can I change that hardcoded URL in the Index.cshtml file?
Thanks,
Sathya.
What I was trying to achieve is to invalidate browser cache as soon as my application javascript file (which already got cached in the browser) gets modified at the physical location. I understood that this is simply not achievable as no browsers are providing that support currently. To get around this below are the only two ways:
1)Use MVC bundling
2)Everytime the file is modified, modify the URL by just appending the version or any random number to the URL through querystring. This method is explained in the following URL - force browsers to get latest js and css files in asp.net application
But the disadvantage with the 2nd method is, if there are any external applications referring to your application's javascript file, the browser cache will still not be invalidated without refreshing the external application in browser.
Just add a timestamp as a querystring parameter:
var timestamp = System.DateTime.Now.ToString("yyyyMMddHHmmssfff");
<script src="/MySite/Scripts/Main.js?TimeStamp=#timestamp"></script>
Note: Only update TimeStamp parameter value, when the file is updated/modified.
It's not possible without either using bundling (which internally handles version) or manually appending version. You can create a single file bundle as well if you want.

URL Hash modification after document.write()

I download via jQuery AJAX a whole html webpage. I want to replace the content of the current page with the one downloaded via ajax. I do it with document.write(). It doesn't work correctly because whenever I try to modify the hash, the webpage is reloaded.
I know in IE it it necessary an iframe, but that is not the problem, because I use jQuery History plugin. The problem is due to the use of document.write(), but I don't know why.
Update:
index.php -> main entry point, which downloads JS code to parse URL after hash and invoke request.php.
request.php -> request entry point. It returns the webpage.
It works OK when I simulate a direct request to request.php and the downloaded webpage updates the hash.
It doesn't work (in FFox only) when I simulate a original request to index.php, which downloads the webpage via request.php and the downloaded page modifies the hash.
I use document.write() to write the content of the webpage to the current window. So the problem is about the modification of the hash in a document "being written".
don't use document.write().
instead use $('your selector').html(your_html_fetched_via_ajax);
I thinkg that you can't modify the whole html object because it means erasing the reference to the javascript script tag. I would say your best bet is to either just link to the request.php page or just change the body tag
$('body').html(response_html);
And I agree with harshath.jr, don't use document.write().
The individuals pointing you towards an iframe are correct. Add the iframe, and simply set the src attribute to the page you're fetching...you won't even need request.php.
If you really want to try to load in the html without an iframe, you'd have the parse out the elements in the head and add them to your documents , and also parse the contents of the and add them to the current pages body. Its not guaranteed to display correctly, though. I think an iframe is really what you're looking for.

Follow a URL using JavaScript

Is there any way to follow a URL in JavaScript without setting the document.location.href?
I have a page that displays a list of objects and each object may have a file download associated with it, which is accessed via a hyperlink. Clicking the link initiates an AJAX request that ultimately leads to a transient file being generated that can be referenced by a unique and temporary URL.
At the moment when the AJAX call completes, it simply sets the document.location.href to the temporary URL and the file download is initiated. Of course this has the side effect of changing the URL in the browser's address bar, so if the page is refreshed the file is downloaded again rather than the object listing page itself getting refreshed. I guess I could set the URL back to what it was before, but that feels a bit hacky.
Incidentally, I'm using the Prototype JavaScript framework.
you could open a new window with the new url? or try setting an iframe's url to the new url, both should present a file download (the latter being the better option)
You could use a hidden iframe - set the src of that to the file to download.
If you're doing all this just to trigger a file download, it sounds like a good application for using a hidden Iframe. Set the SRC of the Iframe instead, so you don't have to mess with the main page.

Categories