Diego Pessoa » Programming http://www.diegopessoa.com Thu, 07 Jan 2010 04:22:03 +0000 http://wordpress.org/?v=2.9 en hourly 1 Solving the problem of “back” button in Ajax applications http://www.diegopessoa.com/lang/en/2009/03/09/solving-the-problem-of-back-button-in-ajax-applications http://www.diegopessoa.com/lang/en/2009/03/09/solving-the-problem-of-back-button-in-ajax-applications#comments Tue, 10 Mar 2009 00:18:27 +0000 Diego Pessoa http://www.diegopessoa.com/?p=102 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!

]]> http://www.diegopessoa.com/lang/en/2009/03/09/solving-the-problem-of-back-button-in-ajax-applications/feed 6 If you still didn’t see http://www.diegopessoa.com/lang/en/2009/02/01/if-you-still-didnt-see http://www.diegopessoa.com/lang/en/2009/02/01/if-you-still-didnt-see#comments Mon, 02 Feb 2009 02:44:48 +0000 Diego Pessoa http://www.diegopessoa.com/?p=87 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.

]]> http://www.diegopessoa.com/lang/en/2009/02/01/if-you-still-didnt-see/feed 0 I PHP-PB Meeting http://www.diegopessoa.com/lang/en/2008/11/28/i-php-pb-meeting http://www.diegopessoa.com/lang/en/2008/11/28/i-php-pb-meeting#comments Sat, 29 Nov 2008 02:19:04 +0000 Diego Pessoa http://www.diegopessoa.com/?p=76 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!

]]> http://www.diegopessoa.com/lang/en/2008/11/28/i-php-pb-meeting/feed 0