Using jQuery to load content through CMS

I can barely even picture developing a website with more than 20 pages and not use CMS. For the little things, I usually use AJAX or AHAH but for the correct usage of AJAX in my favorite CMS - Drupal, additional module need to be installed or made. There is of course an alternative.

thumb - Using jQuery to load content through CMS

Having in mind that you usually don't learn everything at once (especially jQuery), I've recently come across an excellent option when we mention loading methods .load() "Loading Page Fragments", for which I manage to implement right away ;) On my site, this can be seen in the About link. I wanted for this information to "be available" on every page. However, if "they’re available" on every page, the content is doubled and this is absolutely no good for both search engines and myself, respectively. This is where jQuery’s Loading Page Fragments comes into play.

What it basically does is that it sends a request for the HTML (DOM) document . It cuts out the data that you want and it implements it exactly where you want it. Below is simplified example:

jQuery load page fragments syntax

I've created the "About" page, and its original location si find at bergb.com/about. It’s inaccessible to crawlers, since no link leads to it. I change the text through the admin panel and I print it on the home page. By using "page.tpl.php" of Drupal’s API, I call for node objects where the page is found, while I print the data. For the other pages I used jQuery’s load fragment. I've also tried this on Drupal forms and it also works just fine. Code, schema and demo below:

$node_about=node_load($nid, NULL, TRUE);
print $node_about->body;

Shema jQuery loading page fragments in Drupal

What came to my mind first was whether or not it was possible to create an Ajax website. So I checked whether a tutorial already existed. I’ve therefore made an example on the following CMS: Demo

The result:

  • No content duplication.
  • Fast and efficient solution.
  • No CMS hacking and creation of additional modules.
  • "No security risks."
  • Applicable and practical on all CMSs.

jQuery: Due to browser security restrictions, most "AJAX" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

Illustration: Bogdan Maksimovic
Translation: Vasilije Perovic

Posted on 09 Dec 2010