jquery

Drupal Drag and Drop (redux)

A follow-up to yesterday's video on Drag and Drop tables. The new version combines the new dragtable.js with a special blocks.js file. The dragtable.js (320 lines) handles reordering of weights and matching regions with their siblings, as well as the actual drag and drop. The new blocks.js (50 lines) handles the specialty case 'regions' dropdown, so that changing this field moves the row into the new region.

See the patch for Drupal 6: http://drupal.org/node/181066

Drupal Drag and Drop

Not too long ago the AHAH patches went into Drupal core. While I'm thrilled with their inclusion, we can push Drupal's interface further with the addition of drag and drop, eliminating the visible weights system. Read more about it in the issue queue.

See the patch for Drupal 6: http://drupal.org/node/181066

AHAH Example

So... today I put in effort into expanding the now committed AHAH Forms API to extend to all form elements. This means all kinds of effortless page updating on text area changes, radio buttons... you name it. The first target: the blocks page! Does this seem useful or annoying to you guys? Admittedly, the weight problem needs to be solved in general, but I'm not sure if this is the solution. Notice that different regions disappear and appear as needed, no javascript in the block module involved at all. In any case, it made a great test-case scenario!

See the patch for Drupal 6: http://drupal.org/node/157752

jQuery AJAX Refresh in an iFrame

Tinkering around with a jQuery enabled Drupal module today, I was trying to make an iFrame that continuously updated. I tried the typical meta-tags and window.location.refresh() javascript but I wasn't satisfied with constant progress bar on the page. An AJAX (or AHAH really) request was needed to make this work smoothly.

The trick was combining some standard javascript selectors with the jQuery $ function. Here's my iframe:

And this is what was needed to select the top-level HTML tag within my iframe. Note that the 'script-console' used below is the name attribute of the iframe, not the id.

$('html', window.frames['script-console'].document);

So now to actually add the jQuery request and modify the iFrame:

function refreshConsole() {
$('body', window.frames['script-console'].document).loadIfModified("mytextfile.txt");
setTimeout("refreshConsole()", 1000);
}

$(document).ready(function() {
refreshConsole();
});

This code (placed the HEAD tag of the page), defines a refreshConsole function. Every second (1000 milliseconds), refreshConsole calls itself again. Every call, jQuery check the file "mytextfile.txt" for changes. If it's been updated, it retrieves the text and replaces the contents of the iFrame's BODY tag.