Solving the problem of “back” button in Ajax applications

In: Ajax| Javascript| Jquery| Web Standards| Web developing

9 Mar 2009

Who here has always dreamed in do Ajax applications that the user can freely navigate using the back and forward buttons, and furthermore, can bookmark specific sections? In theory, this isn’t possible, since the “Ajax” is used by most to reload just some page blocks, keeping active the main page and, consequently, precluding the back button or bookmarks use. Otherwise we’d have the good old reload of the entire page.

But then, how the Gmail works? It’s totally in Ajax and yet you can navigate using the back button.  If you put a link like: http://mail.google.com/mail/#compose in the address bar, it will open the e-mail composition screen normally. The big secret is in the #anchors.
Anchor Oriented Navigation

A very interesting thing of the anchors is that they allow you to use the back and forward button, for example, without generate no one full page request and without leaving that page, so, how could we do this?

The first step is create a Javascript file that will be every time verifying if some anchor is active, if so, it sends the Ajax request calling the specific section, based on anchor’s name, that will be loaded inside the main block. Simple, isn’t it?

As is usual for JavaScript today, we will use jQuery, so remember to include the library file in your application.

We would then have a file named “core.js”, thus:

  1. /**
  2. * Loading the page, the timer is started to check if there is an active anchor to each 300ms. */
  3. $().ready(function(){
  4. setInterval("checkAnchor()", 300);
  5. });
  6. var currentAnchor = null;
  7. /**
  8. * Method to check if there is some anchor change, if so, sends the Ajax request.
  9. */
  10. function checkAnchor(){
  11. if(currentAnchor != document.location.hash){
  12. currentAnchor = document.location.hash;
  13. /**
  14. * If doesn’t have no one active anchor, the default section is loaded
  15. */
  16. if(!currentAnchor)
  17. query = "section=home";
  18. else
  19. {
  20. /**
  21. * Creates the result string. Converting the url: URL/#fotos&id=2 in URL/?section=fotos&id=2
  22. * */
  23. var splits = currentAnchor.substring(1).split(‘&’);
  24. var section = splits[0];
  25. delete splits[0];
  26. var params = splits.join(‘&’);
  27. var query = "section=" + section + params;
  28. }
  29. /**
  30. * Sends the request
  31. */
  32. $.get("callbacks.php",query, function(data){
  33. $("#main_block").html(data);
  34. });
  35. }
  36. }

OK, the content will be loaded in th e element of ID “main_block” through the Ajax request result that being sent to the page “callbacks.php” in GET Querystring format.

To catch it, we would have something like this:

  1. $section = addslashes(strip_tags($_GET[’section’]));
  2. $page = "pages/".$section.".php";
  3. if (file_exists($page))  {
  4. include($page);
  5. }

Thus, we would need only a folder called “pages” containing the pages with the anchors’ names.

And to call each section, a simple html page with links like:

http://mysite.com/#photos

It would be detected by the Javascript method “checkAnchor()”, and will be call a php request loading the page named photos.php inside the directory “pages”. It will exhibited inside the block “#main_block” that is contained in the same page of the clicked link, and the best of all, you can back, forward and bookmark the sections you want.

To better illustrate the example, I made a blatant copy (haha) of the PHP-PB’s site, with the only difference of having Ajax navigation through anchors (the original has normal navigation). Access the link: http://www.diegopessoa.com/php-pb-ajax

If you want to download the working example, click here!

II PHP-PB Meeting

In: WCAG 2.0| Web Accessibility| Web Standards

9 Mar 2009

Hi people,

In the last saturday, March 7, was held in the Shopping Sebrae auditorium, the II PHP Paraiba Meeting. I wish to express my most sincere congratulation to all who participated in this event which is becoming increasingly greater, showing that the PHP Paraiba community is active and partipatory!

For those who could not follow the event, I am providing below the slides from my presentation, “Accessible Web Applications.”

See the others presentations of the meeting:

http://www.slideshare.net/tag/ii-encontro-php-pb

WCAG! WCAG!

In: WCAG 2.0| Web Accessibility| Web Standards

2 Feb 2009

In the beginning of 2009 year, the W3C announced new standards to help the developers to create more accessible sites, ie, cover more adequately to disabled and old users. This is the second WCAG (Web Content Accessibility Guidelines) version, this new standard produced by the Web Accessibility Initiative (WAI) of W3C will attend a huge range of content (such text, images, audio and video) and web applications, allowing better conformance tests  and still will prove more flexibility and a larger innovation potential to the web developers. The WCAG 2.0 is easier to understand and to use. Just see the technical and educational material available.

The WCAG 2.0 target the web access difficulties experienced by people with limited vision, hearing, physical, cognitive, neurological and by old users with needs to access the web. Following four principles:

Perceivable – Information and user interface components must be presentable to users in ways they can perceive. (For example, provide alternative texts to images, caption mode for audio, display content adaptable to different ways to be shown and use color contrast).

Operable – User interface components and navigation must be operable. (Provide access to features via keyboard, offer enough time to read and insert data, avoid images that can cause convulsions and improve navigability.

Understandable – Information and the operation of user interface must be understandable. (Provide legible and predictable content to help users to avoid and correct errors)

Robust – Maximize compatibility with current and future user agents, including assistive technologies.

To who already wants to begin to study the new guidelines, visit the reference guide.

To motivate you, see the video with the WCAG 2 theme:

If you still didn’t see

In: PHP| Programming

1 Feb 2009

In the last post before the “pause”, I announced the I PHP-PB Metting that was realized at Campina Grande in the end of November. Now, if you still didn’t see, I’m providing the slides of my presentation: “How to develop on MVC with Zend Framework”. Thanks to all who participated, and wait the the second PHP-PB meeting, soon here at João Pessoa.

Returning to active

In: General

1 Feb 2009

Hi folks! After a time of “forced pauses” in the blog because the end of my college course, work transition, among other things, now I’m back, and definitely! In this year of 2009, I want to share with you my work and research experiences.

I PHP-PB Meeting

In: Programming

28 Nov 2008

Hi everybody, this saturday, November 5th 2008, will be performed at Campina Grande-PB in the FACISA auditorium, the first PHP-PB Meeting, below follows the event schedule:

Event Schedule

08:00 – 09:00 Accreditation
09:00 – 10:00 Joomla – Hugo Rabelo
10:00 – 11:00 PHP isn’t kids stuff! – Felipe Ribeiro
11:00 – 12:00 Smarty – Uncoupling view from model - Marcus Antonius


12:00 – 14:00 Stop for launch
14:00 – 15:00 PHP Securiy (Segurança com PHP) – Theoziran Lima
15:00 – 16:00 MVC Development with Zend Framework - Diego Pessoa
16:00 – 17:00 Rich Interfaces with Flex and PHP – Alwin Garside

I will post my presentation just after the lecture.

The event also will be live transmitted in:  www.php-pb.net

See you later!

Insert a Gtalk chat to your blog

In: Internet

29 Oct 2008

How about you make available a chat from your blog? It can be a good ideia, creates the possibility of dynamic and direct contact, but, still better, if your chat is the good old Gtalk, you already use on a day-to-day. As you can see, I added the Gtalk balloon on the sidebar, clicking it, you will be take a window where can communicate with myself even if you don’t have a Gmal account. Is important to note that the chat only becomes available if my Gtalk status is “On-line”. Per example: if my status is busy, the balloon notifies you that I can’t answer at the moment.

To add the Gtalk to your blog is very simple, see this site:
http://www.google.com/talk/service/badge/New

Then you only need to configure the best way to show, to taste, and copy the source code, putting it on your Blog.

TinEye – Search for similar images on the web

In: Internet

29 Oct 2008


How many times have you found a really cool photo on the web? But, it has a awful quality, a size too small, or someone put a logo or watermark above! These problems can be solved! The TinEye is a image search engine able to found similar photos.

Official Website – tineye.com
Enjoy!

Hello, welcome!

In: General

19 Oct 2008


Hi everybody, I’m finally putting my site online, during this first week I will organize its structure and content,

updates soon.

About this blog

Hi! I'm a Brazilian Software Developer. Degree in Systems for the Internet at IFPB and enthusiast of technologies related to web. Nowadays I'm working as technical leader of the ITVP project at the Dynavideo company. (See more)

Categories

Archives

  • Diego Pessoa: Olá Ivolnei, obrigado! Basta adicionar o parâmetro normalmente após a marcação da âncora, e [...]
  • ivolnei: Show de bola, estava procurando isso a muito tempo e efim, cá está. Parabéns. Uma questão. S [...]

Twitter Updates

    Flickr Photostream

    photo photo photo photo photo photo photo photo photo photo photo photo

    Copyright © 2010 - Diego Pessoa - diegopessoa.com