help: reloading a page via ajax - when window.location=self.location doesn't work

Question

so here on my homepage i got a

<ul id="login">
  <li> <a id="loginswitch" href="./login-page">log-in</a> | </li>
  <li> <a id="signupswitch" href="./signup-page">sign-up</a> </li>
</ul>

so via mootools, i get these anchor elements by id so that once they're clicked, a flashy div will popup below them that contains the login or signup form (with methods to stop the propagation of events of course) and upon filling-up the fields the ajax call kicks in - that's supposed to create a session and reload the page so that the user would have a visual that he is now logged in and user-level-controls appears etc..

the ajax call is initiated by the mootools ajax class and evalScripts option is set to true the ajax page returns the script code

<script type="text/javascript">window.location = self.location;</script>

this systems works perfectly - now im wondering why if I change the anchors' href values to href="#" my scripts wont work anymore? does it have anything to do with the window? did it change its property when i clicked a link or so even when the event's propagation were stopped??

Answer 1

Going to an anchor on a page -- which is what # signifies -- does not require a reload.

Answer 2

errr can you please clarify on that? i am aware that anchors will not reload the page but still, after the Ajax class evaluates the script and reads a

window.location = self.location

will it still not execute that?

Answer 3

window.location = self.location;

This javascript is executing.

When it executes, the browser is being told to replace value of window.location with a new value. Not all browsers will react the same way here.. Some will probably work as you expect, but others will get smart about it and compare the two values. The browser knows what page it's on, and it knows that you're just asking for it to go to the same page.

Browser Cache

The browser even has a copy of your current page in cache. It can talk to the server and ask whether the page it has in cache is still valid. If the cache is valid, it may decide not to force a reload of the page. Behind the scenes, this happens with HTTP Headers. Browsers and servers can communicate over HTTP in many ways. In this case, your browser sends a quick request to the server saying something like this:

GET /stackoverflow.com/posts/196643/index.html
HTTP/1.1
Host: www.stackoverflow.com
User-Agent: Mozilla/5.0
If-Modified-Since: Sun, 12 Oct 2008 20:41:31 GMT

This is called a conditional GET request. By saying If-Modified-Since, your browser is saying, "Give me that file, but only if it has been modified since the last time I saw it."

Long story short, you haven't explicitly told the browser to reload the page.

Here's how you can:

location.reload( true );

The "true" is an optional parameter, for forcing a reload. The browser won't even look at the cache.. It will just do as you say.

Answer 4

If they handed me this particular task at work I'd kick it back to design. Unless we're talking about a secure page, or an OpenID login, you should not pop up a log-in or sign-in form. Users need to learn to look for that https: at the top of their page, and never sign in if they don't see it.