Introduction to Jquery @ Drupalcon Szeged2008

Some examples on jquery

A very simple plugin for jquery
  1. (function($){
  2.   $.fn.spliceIn = function(opt) {
  3.     opt = $.extend({}, {
  4.       position: 100,
  5.       text: ‘ <strong>Hello world!</strong> ‘,
  6.     }, opt);
  7.  
  8.     return this.each(function() {
  9.       body = $(this).html();
  10.       if (body.length > opt.position) {
  11.         left = body.substring(0, opt.position);
  12.         right = body.substring(opt.position,
  13.         body.length - 1);
  14.         $(this).html(left + opt.text + right);
  15.       } else {
  16.         $(this).append(opt.text);
  17.       }
  18.     });
  19.   }
  20. })(jQuery);

usage :

  1. $(‘p’).spliceIn({text: ‘ <strong>hi dudes</strong> ‘});
Ajax: get and post made very easy

The prototype library provides a very nice and easy interface to perform get and post operations onto the server. I must say, jquery does the same thing in even fewer lines of code. Ain’t that just amazing :p

  1. $(‘#element’).load(‘your-file.html’);
  2. $(‘#element’).load(‘your-file.php’, {
  3.   value1: ‘foo’,
  4.   value2: ‘bar’
  5. });
  1. $.post(‘my-processor.php’, {
  2.   text: ‘your text’,
  3.   title: ‘your title,
  4.  author: ‘Stalski‘,
  5.  comments: 12
  6. }, function() {
  7.  $(’#alert‘).html(’Variables sent to the server‘);
  8. });
Flickr pictures example
  1. $.getJSON("http://url-of-json/",
  2. function(data) {
  3.   $.each(data.items, function(i, item) {
  4.     console.log(item);
  5.     img = $("<img alt="" />").attr(src, item.media.m).appendTo("#drupalcon-photos");
  6.     img.wrap(whatever);
  7.     img.after(item.title + ‘:’+ item.author);
  8.   }
  9. });
AHAH example in drupal

Asynchronous HTML and HTTP, or AHAH, is a method for updating webpages dynamically using Javascript, similar to Ajax, but with the difference that the response from the request is used directly without parsing on the clientside. This means that server responses need to be text or already include valid XHTML/HTML structure. It is also known as the microformat rest/ahah. (taken from wikipedia Ahah definition)

So Drupal has taken this in its core installation for versions 6.x. This feature allows us to build modules even easier. You can still add your javascript file for the module but with ahah you can realize nice features for updating your content. I used this to add recordsets from assigned people to a task in drupal. You could check the poll module in drupal, which uses AHAH in the same way. I used it as cheatsheet as well :) .

  1. $form[‘topic’][’set_topic’] = array(
  2.   ‘#type’ => ’submit’,
  3.   ‘#value’ => t(‘Set Topic’),
  4.   ‘#ahah’ => array(
  5.     ‘path’ => ’shoutbox/callback’,
  6.     ‘wrapper’ => ’shoutbox-topic’,
  7.     ‘method’ => ‘replace’,
  8.     ‘event’ => ‘click’,
  9.     ‘effect’ => ‘fade’,
  10.     ‘progress’ => array(‘type’ => ‘throbber’),
  11.   ),
  12.   ‘#attributes’ => array(‘class’ => ‘form-button’),
  13. );

Pages: 1 2 3

This entry was posted on Saturday, September 6th, 2008 at 12:26 pm and is filed under javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Introduction to Jquery @ Drupalcon Szeged2008”

  1. Stalski Says:
    November 25th, 2008 at 5:39 pm

    Other effects:
    slideUp(), slideDown(), slideToggle(), fadeIn(), fadeOut()

Leave a Reply