Ajax reconcile navigation and bookmarks - Paul Courbis


   

CAUTION !

Please read this...



You'll fin below this text a semi-automated translation of the original website. Texts will be gradually reviewed to make them as accurate as possible but it's strongly recommanded to read the original page (preview on the right side of this text) :

Link to the original article


(if this link is broken, please go to the original website's root page and look for wanted data. Sorry about that).


Some parts of this website will never be translated to English. Part of them are user's comments that are not transfered from the French (original) version to this version. Obvously, you can leave your own comments here but they wont be transfered to the French version.

You can send comments or suggestions to the webmaster.

   
Paul Courbis


Home > Various (and summer) > Computers > About Spip > Ajax reconcile navigation and bookmarks

Ajax reconcile navigation and bookmarks

Wednesday 28 July 2010, by Paul Courbis

Ajax technology can not refresh a portion of the HTML page displayed, thereby improving the comfort for the user consultation. Unfortunately, this navigation method does not update the address displayed in the navigation bar: when creating a bookmark (bookmark), the address of the homepage is stored, and not the current page.

However, it is possible to overcome this disadvantage by a simple trick in javascript.

The principle is simple: it is possible to partially modify the URL of the current page without reloading the cause, adding the reference to an anchor using the symbol ’#’ at the end of URLs. This notation is planned originally for internal navigation to the page without reloading it through full type beacons <a name=’ancre’> ’

The system will operate in two stages:

First step: change the link calling

Simply add the tags’ <a href =...’ a call like JavaScript ’onclick’ adding an identifier of the sub-target page by modifying the variable ’document.location.hash’.

This gives for example:

<a class="ajax" href="/La-meteo-du-RER-mis-a-jour-en.html?id_page=201006" onclick="document.location.hash=&quot;201006&quot;;">
</a>

Thus, during the call that will update a portion of the page, the URL will be changed and receive the suffix ’# 201006’

Second step: in the charged, recover username

The technique is simple, it inserts a JavaScript code that retrieves the current value of the anchor and which compares the identifier of the page reloaded. If they differ, it then causes a full reload of the page (via a change in the variable ’document.location.href’), passing the necessary arguments to rebuild with the right information. Thus in the page corresponding to the identifier ’20100725 ’, then is it enough to insert the following code Javascipt:

<script language="JavaScript">
  var ancre = document.location.hash.substring( 1 );
  if ( ancre != "" && ancre != "20100725" )
  {
     document.location.href = "http://www.courbis.fr/La-meteo-du-RER-mis-a-jour
-en.html?id_page=" + ancre;
  }
</script>

This technique is used on this site, for example for navigation of Ajax " The weather on the Train ", with a slightly more evolved Javascipt code that automatically calculates the identifier of the current page and the URL of the target page from SPIP tag ’# SELF’:

Comment on this article