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.co/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

5 Comments

Aside from article...

...I just have to say that pixel banner is awesome! :]

thanks, thanks to bogdan ;)

thanks, thanks to bogdan ;)

Hi Bergb :D

Hi Bergb,

You have a very nice site and blog. I love it :D

This is a very nice article... I wanted little help i want to learn how to make a CMS Website using Drupal or Wordpress or something similar which is easy and simple to learn so if you know any tutorials or something please can you mail me please i am very desperate to learn them so please help me out...

Awesome banner

Ajax amsterdam banner rules!

He he, yes Amsterdam rules

He he, yes Amsterdam rules :D

@Vaibhav I'm giving my best to publish more content, I'm very busy i prepare interesting posts so stay tuned.
Best way to learn Drupal and Wordpress is to reading, looking... start with basics books keep learning and if you learn Drupal you will learn every other CMS... Google, hard work.
Cheers

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

More information about formatting options