The hardest part about using drupal's javascript features is knowing where to begin: they remained an arcane mystery to me until today. After drinking a bit of whiskey, and studying how core was using Drupal.behavior, I learned it couldn't be simpler. If you don't know how to do this, take a moment:
<?php
/**
* Implementation of hook_form_alter().
* nothing special here
*/
function ajax_comment_form_alter(&$form, &$form_state, $form_id) {
switch($form_id) {
case 'comment_form':
// add the Drupal.ajaxComment.js file
drupal_add_js(drupal_get_path('module', 'ajax_comment').'/Drupal.ajaxComment.js', 'module');
/*
* THIS IS THE TRICK BELOW SO PAY ATTENTION
* NOTE A KEYWORD: "ajaxComment" as in $settings['ajaxComment']
* Now scan down until I'm yelling in the comments again....
*/
$settings['ajaxComment'] = array(
// this is all random data we're passing into the js object -- don't worry about it right now
'nid' => $form['nid']['#value'],
'cid' => $form['cid']['#value'],
'uid' => $form['uid']['#value'],
'pid' => $form['pid']['#value'],
);
/* BELOW DRUPAL_ADD_JS WILL CALL A FUNCTION (since it exists):
-----> Drupal.behaviors.ajaxComment < ---------
It got that keyword from the key: $settings['ajaxComment']
We are now done with PHP and step one. Proceed.
*/
drupal_add_js($settings, 'setting');
break;
}
}
?>This code only breaks comment form submits , and alerts the contents of the submit in a serialized array (ready for an an $.ajax $_POST). Only left this here as a example of some basic ways to take advantage of the setup. All important info is in the code comments of course.
Drupal.behaviors.ajaxComment = function (context) {
//Drupal.settings.ajaxComment is the javascript version of the contents of $settings['ajaxComment'] in our implementation of hook_form_alter
Drupal.ajaxComment = new Drupal.ajaxComment($('#comment-form'), Drupal.settings.ajaxComment);
}
Drupal.ajaxComment = function(form, data) {
var self = this;
// these are values that aren't changing: cid, nid, uid, pid
this.formSettings = data;
//comment form jquery object
this.form = form;
// this function is avaliable because of the *prototype keyword* in Drupal.ajaxComment.prototype.submitComment below
this.submitComment();
};
Drupal.ajaxComment.prototype.submitComment = function(){
// take note of "self", there's a reason its there
var self = this;
// self.form is the $('#comment-form') we fed into the new object in Drupal.behaviors.ajaxComment
this.form.submit( function() {
// this.form.submit, like any jquery method, changes the scope, and suddenly "this" is the form being submitted.
// since we were super smart, we don't lose access to the ajaxComment object however -- we access it with "self"
//serialize the js form array into strings that can be accessed via $_POST, or $_GET
self.commentPost($(this).serialize());
// Since we had the forsight to declare the "self" variable, we can add this data to the object for later use input needs to be sanitized later
// return false breaks a form submit
return false;
});
}
Drupal.ajaxComment.prototype.commentPost = function(post){
// javascript is freaky....
alert(post);
// in a really awesome way...
}
Comments
GOOD LIFE GODO
GOOD LIFE GODO WORK!
.............................................
.............................................
Great information...sites
Great information...sites like this are part of the reason Drupal Trends are increasing...I wasn't even aware this was possible!
ROFL @ Ballmer Peak!! Many
ROFL @ Ballmer Peak!!
Many thanks for the tutorial, this is something I still have to get my hands seriously dirty with.
BTW, this would make a great dojo lesson - any takers?
Greetings from Barcelona!
thanks mate, great help!
thanks mate, great help! Drupal.Behaviors has been a bit of a blackhole for us for some time now, the whiskey sure helps..
- the doctor
Great stuff Nick, I've had
Great stuff Nick,
I've had some troubles with javascript myself, and so I decided to try your method: I took a couple of whiskey shots... and fell asleep!
Just beware of the Ballmer
Post new comment