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.
