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.
Kurt,
Thanks for the post, I was wondering if you could explain this statement in more detail?
“Add this code just before the _page exits (but not after the exit(); !).”
I’m struggling with where I should where to place that code so only the json will be returned. Thanks!
Comment by Chad — April 16, 2009 @ 3:25 pm
Hi Chad,
Sorry I took a hiatus from my blog for a while. That block of code will return the content type as json for your jquery to read
It’ll return the var $html. Actually that might be a bit confusing since the $html is actually the $form.
If its after the return in your form function, it will not be hit, and the function will return normally.
Comment by jarchowk — April 20, 2009 @ 12:59 am
Hi Kurt,
I’m trying to follow your example and I achieved to display the form via AJAX. But then the problem comes when hitting the “Submit” button. It jumps to the ‘url’ that I indicated in the ajax call.
In your code you have this.href ¿What exactly is that url?
What happens in your case when you hit “submit”.. stays in the same webpage (as Facebook comments, or jumps/refresh the page?)
I know that this post is 1 year ago and probably you don’t remember anymore about it, but it will be a great help. Thanks
Comment by David — February 21, 2010 @ 2:21 pm
Hi, I left a comment here a couple of days ago. Why did you delete it?
Comment by David — February 22, 2010 @ 1:24 pm
I didn’t delete it, just didn’t get a chance to approve it yet. Despite adding many spam blockers they seem to still flood my comments.
Replace this.url with the url of your form. this.url will actually only work if you are using a link.
Yes, the form should be submit without refreshing the page.
Let me know how it goes!
Comment by Kurt Jarchow — February 28, 2010 @ 2:02 pm