Google-friendly AJAX popups

Saturday, March 19th, 2011|Beginner tips|by Romans

For web developers it is always a big choice, whether to use a regular links or load data through AJAX. Regular links are boring and old, but AJAX is not supported by Google and other crawlers.

The solution is to have a regular link pointing to the page, but also add JavaScript on that link which will cancel default action and will load page dynamically.

This is exactly how we decided to implement 3 pages on www.agiletoolkit.org:

  • download page (integrates with twitter and starts download automatically)
  • newsletter page (integrates with Campaign Monitor)
  • contact page (integrates with Database and Email Sender)

So first, we need to add the links inside HTML like we normally would:

<a href=”/newsletter”>Subscribe to Newsletter</a>

Next we would need to have ID on that field, so that we can associate an action.

<a id=”newsletter-button” href=”/newsletter”>Subscribe to Newsletter</a>

Finally, action must be created. If you are not using Agile Toolkit, you would need to write something like this:

$(‘#newsletter-button’).click(function(e){ e.preventDefault(); open_newletter_window(); });

And also put bunch of JavaScript code behind the open_newsletter_window() function as well as on the server to handle the limited output of the  window. Luckily Agile Toolkit makes it all really simple.

$this->js(‘click’)->_selector(‘#newsletter-button’)->univ()->frameURL(‘newsletter’,'/newsletter’);

This binds click event on specified selector to the wrapper for jQuery UI dialog() widget. Agile Toolkit will automatically determine that the call is done through AJAX and will strip HTML from header/footer as needed.

Enhancements

Agile Toolkit is specifically great for 2 things. Achieving things quickly and enhancing them. First we wanted to be slightly more transparent to the URL and instead of hard-coding frame’s AJAX URL we would rather make it read from the href property. This way selector can be used to apply action on multiple elements.

$this->js(‘click’)->_selector(‘#newsletter-button’)->univ()->frameURL(‘newsletter’,
$this->js()->_selectorThis()->attr(‘href’));

Next our designer asked us to add <i></i> element to the form title. This allows him to add an icon. However he also needed a class on a form for a proper CSS binding.

$this->js(‘click’)->_selector(‘#newsletter-button’)->univ()->frameURL(‘<i></i>newsletter’,
$this->js()->_selectorThis()->attr(‘href’),array(‘customClass’=>’popup-newsletter’));

Finally the window should have a fixed positioning and there is no need for resize or dragging. Here is the final version:

$this->js(‘click’)->_selector(‘#newsletter-button’)->univ()->frameURL(‘<i></i>newsletter’,
$this->js()->_selectorThis()->attr(‘href’),array(‘customClass’=>’popup-newsletter’, ‘width’ => 500, ‘resizable’ => false, ‘draggable’ => false));

Agile Toolkit transparently converts all arguments to JavaScript code which is passed on to jQuery UI dialog making any customization possible.

Styling

Agile Toolkit runs on jQuery UI CSS framework by default, however this can easily be changed. We prefer to keep theme compatible with jQuery UI CSS to ensure that all 3rd party widgets are working perfectly and take advantage of our style. It’s possible to substitute any style or HTML template in Agile Toolkit with your own copy without editing the original by simply copying it from atk4/template into template/ directory.

Demonstration

Our blog is running on word-press and while we ported the theme, we can’t use any code highlighting or the technique we described above. Therefore to see this in action:

  1. Click on the Top-Left logo which leads to index page.
  2. Scroll down and find “Subscribe to Newsletter” link, click it.

1 Comment

Blog: How to make Google friendly AJAX pop-ups
Posted March 25, 20111:16 pm

[...] beneficial to share this blog post with you. It explains how to code Google friendly AJAX pop-ups: Google-friendly AJAX popups | Agile Toolkit Blog All comments are welcome. Best regards, [...]