Add Drupal Forms using AJAX

Kurt Jarchow — Wed, 28 Jan 2009 12:05:55 +0000

Something very easy to do in drupal is adding form object to the content of your page without doing a page refresh. I needed to add functionality so that an application form was displayed to a user when they clicked the Apply link.

Using JQuery we can “intercept” a client click of a link. Add a .js file to which ever module you are editing, and add the following:

if (Drupal.jsEnabled) {

$(document).ready(function () {
    $(’a.apply-link’).click(function () {

      var submitApplication = function(data) {
   $(’div.apply-link’).html(data.html);
      }

    $.ajax({
      type: ‘POST’,
      url: this.href,
      dataType: ‘json’,
      success: submitApplication,
      data: ‘js=1′
    });
    return false;
});
});
}

So when a link with a class “submit-application” is clicked an ajax/json call is made to the url. Now make sure the js is included somewhere in your module code by using drupal_add_js().

Now all we have to do is make sure the page renders as json if an ajax call is made. Add this code just before the _page exits (but not after the exit(); !).

if (!empty($_POST['js'])) {
    $html = drupal_get_form(’job_posting_application_form’, array($node->nid, $node->title, $node->job_posting_email));
    drupal_json(array(
    ‘html’ => $html
    )
    );

Your link should be replaced with the form.

If you want to add a little bit of animation use the jQuery animation options. Instead of just replacing the link, make it fade in:

$(’div.apply-link’).hide();
$(’div.apply-link’).html(data.html);
$(’div.apply-link’).fadeIn();

Credit to John K. VanDyk’s book for breaking the back of this code.

Neat Features in the NY Times

Kurt Jarchow — Sat, 08 Nov 2008 22:41:18 +0000

Had a look the New York Times site recently? The site has some very interesting new features.

Highlighting text on the page will bring up an icon to search for information on that highlighted text.
New social networking features for content sharing and recommended features on top of the header.

I am not entirely impressed with the end-to-end usability of the highlighted text feature. Instead of a nice ajax box for the search results it opens a new window, which is annoying. I’m really impressed though in the idea.

The social networking features are much different than other implementations, which I’m always excited to see. First of all, there is no password. You can mark certain articles as “recommended”, and I’m assuming will be broadcasted to all of my “friends”. The type of lingo used is very family to Twitter, as in I have people who I am “Following” and people who are following me “Followers”. RSS feeds are also built in.

I like to see that a newspaper is innovating on the web. With the decline in subscriptions, they are going to need a lot more of these neat kinds of features.

Kurt Jarchow's Blog » ajax

Add Drupal Forms using AJAX

Neat Features in the NY Times