The purpose of this code snippet is to show you how you can use the lightmodal functionality in the Lightbox2 module to embed a form in a fancy css popup window. But why would you want to do this? Because it looks great and it improves usability.
The first thing you'll need to do is register a menu item for the page callback that you'd like to appear in the lightbox window.
<?php
function MYMODULE_menu() {
$items[] = array();
$items['MY/URL'] = array(
'page callback' => 'drupal_get_form',
'page arguments' => array('MYCALLBACK_form'),
'type' => MENU_CALLBACK,
'title' => t('MY TITLE')
);
return $items;
}
?>Next, define a function to create the form
<?php
function MYCALLBACK_form($form_state) {
$form = array();
// add your form elements here. for example:
$form['MYTEXTFIELD'] = array(
'#type' => 'textfield',
'#title' => t('MY TEXT FIELD'),
);
// add submit button
$form['submit'] = array(
'#value' => 'Submit',
'#type' => 'button'
);
// add cancel button
// NOTE: the cancel button simply closes the lightbox window
$form['cancel'] = array(
'#value' => 'Cancel',
'#type' => 'button',
'#attributes' => array(
'onClick' => "Lightbox.end('forceClose'); return false;"
)
);
return $form;
}
?>Next, add a link to your page content to open up the lightbox window with your new form in it. By adding the rel=lightmodal property onto an A tag, you'll automatically load the contents of the href in a fancy lightbox window.
<?php
// NOTE: you should use the l() function here to properly generate your A tag
$page_contents .= '<a href="/MY/URL" rel="lightmodal">MY LINK TEXT</a>';
?>I made my lightbox form more usable by using ajax to submit the form to another page callback. First, I had to add an onSubmit javascript event handler to my form to prevent it from submitting.
<?php
function MYCALLBACK_form($form_state) {
// ...code...
$form['#attributes'] = array(
'onsubmit' => 'return my_js_submit_function(this);'
);
// ...code...
}
?>Now, define a javascript function to validate and submit the form using AJAX.
function my_js_submit_function(whichThis) {
// validate your form here
// define arguments to pass to ajax page callback
// you'll actually want to collect the user submitted form data here
var args = {
myArg1: 'blah',
myArg2: 'blah',
};
// submit the data using jQuery
// in this case, I'm using the getJSON function which uses GET and expects a JSON object in return
$.getJSON('/MY/URL/SUBMIT', args,
function(json){
// check for a return status, show a message, close the lightbox window, etc
alert(json.message);
if (json.status == true) {
Lightbox.end('forceClose');
}
}
);
}You'll need a final page callback and menu item to process the AJAX
<?php
function MYMODULE_menu() {
// ...code...
$items['MY/URL/SUBMIT'] = array(
'page callback' => 'MYMODULE_CALLBACK_SUBMIT',
'type' => MENU_CALLBACK,
);
// ...code...
}
function MYMODULE_CALLBACK_SUBMIT() {
// 1. validate $_GET (not shown, use your imagination)
// 2. process $_GET (not shown, use your imagination)
// 3. return a JSON object
// create return object
$returnO = new StdClass();
$returnO->status = true;
$returnO->message = 'MY INFORMATIVE MESSAGE HERE';
// output json result
print drupal_json($returnO);
// NOTE: if you don't die here, then the theme will be processed. we only want to return a JSON object
die;
}
?>In the end, what we have is a link that opens up a lightbox window that contains a form that is submitted via ajax.
My last thoughts... because the lightmodal functionality loads the URL from the href in the A tag, you might want to create a template file for your page layout that is simplified to prevent your normal page layout from being rendered. For instance, you could create a theme file called, page-MY-URL.tpl.php that contains the following:
<?php
if ($title) print "<h1>$title</h1>";
if ($messages) print $messages;
if ($help) print $help;
if ($content) print $content;
?>
alert(json.message) won't show
I following you instruction and able to open an lightbox with a form in it. The form has only one textfield, a submit button and a cancel button. It is just like your example. I put an alert(“here”) in the javascript function (above the var args). So that I can sure the javascript function is being call. But somehow, the alert(json.message) did not show. Instead, the page reloaded with that submit form. Can you help, may be you can post a demo page?
cannot find function?
eric,
thanks for this tutorial -- it's helping me out very much.
I'm having issues where the onsubmit cannot find the javascript function.
i placed the my_js_submit_function() in a separate js file (included in the head) and even tried placing the function in script tags above the form -- both times, function doesn't exist.
didn't know if you had thoughts on that.
Me too!
I'm having the same problem. In the code it's surrounded in <?php ?> brackets so I can only assume it's PHP, but that breaks. :(
doh
those php tags surrounding the code should have been "code" tags.. sorry!
Hi Eric! Your example was
Hi Eric! Your example was very helpful to me!!! But there is still one small thing in the js function missing, in order to make it work. A "return false" was needed.
$.getJSON('/MY/URL/SUBMIT', args,
function(json){
// check for a return status, show a message, close the lightbox window, etc
alert(json.message);
if (json.status == true) {
Lightbox.end('forceClose');
}
}
); return false;
}
Theme template for page
Hi Eric,
Your site and your posts on Drupal have been INCREDIBLY helpful to me as I ramp up my understanding of Drupal. I'm fairly new to Drupal and am working on making my very first module. If you ever write a book on Drupal, please let me know.
I am trying to implement a lightbox form in Drupal 6 like how you defined it. Because the lightbox brings up the form AND all the other Drupal sidebars, menus, and other content which isn't wanted, I'm trying to theme the page and it's kicking my butt. The form is at 'student_list/add_student' and I have made a template file called page-student-list-add-student.tpl.php and loaded it with the example code you provided show basic form content. I put the page-student-list-add-student.tpl.php in the folder of the theme I am using (themes\garland), but Drupal doesn't use it. Instead, page.tpl.php is always used. Now I've tested your code by renaming it page.tpl.php and it makes all drupal pages very simple and takes out the sidebars and stuff. I guess where I'm struggling is how to get Drupal to detect that I have a custom theme template for that page and to use it instead of page.tpl.php.
Have you run into this before? Am I missing a step somewhere? Any help you could provide would be much appreciated.
theme registry
Did you flush your theme registry?
Devel
the Devel module (Themer information) is great for figuring out template suggestions.
Lightbox from a button?
Nice snippet. I was just wondering though if lightbox effect can be invoked from a push link button instead of an anchor tag ?(btw drupal form api doesn't support the type button)
This can be useful in cases such as node preview and such. Any help is great!
Thanks!!
button
I would check the documentation here: http://drupal.org/node/144488 which shows how to include the lightbox effect.
Here is documentation for the button input type in the form api: http://api.drupal.org/api/file/developer/topics/forms_api_reference.html...
hope this helps.
cheers,
Eric
rel attribute and button
Thanks for the reply.
Drupal has a special form element in the form api called button, however it's actually a submit type of input that does not invoke the submit handler. So there is no native input type=button support in drupal form.
However, that is not really the problem I am still having. It is the fact that a button type input does not have a 'rel' attribute and the lightbox effect (from the documentation) is only included manually by adding a rel attribute to an anchor tag.
Just to show how my push-button link looks like:
<input type="button" value="Go" onclick="window.location = 'http:www.example.com'"/>
And I want users to push that button and see the html content with a lightbox effect.
Thanks for the help. I appreciate it.
Cheers,
Lu
yes...
Yes, you are absolutely right. Drupal does not produce a button input type from the Forms API. In situations like this, I just add on OnClick javascript event to the input and have it return false. I have not tried to add this to a button, I have always used an A tag. Have you tried adding "rel='lightbox'" to the button?
-Eric
rel is for anchor
Yes, I did try, even though rel attribute is used for anchor tags to describe the relationship from the current document to the anchor specified by the href attribute.
Thanks for the suggestion though. I just can't seem to find the answer.
-Lu
rel
I was hoping the rel property would match the jQuery selector. It appears they use proper syntax.. "a[@rel^='lightbox']"
The last option is to make an A tag resemble a button (hover effect, display: block, etc)
yeah
Well, I can try to do that too. But I am trying to reverse engineer the whole thing so that it will also check buttons too instead of just using anchors. I will probably hit a dead end, but let's just hope it will work.
Thanks for all the help, and do write if you come up with anything simpler.
Thanks!!!
-Lu
maybe this might work,,,
So, I tried to change the lightbox.js itself to accept buttons in addition to anchors, and while i did get some lightbox effect, it wasn't fetching the desired target and probably hacking it in that way might not be fruitful at the end.
The easiest solution someone pointed to me was just to wrap the button in anchor tag like this:
<a href="/path/to/target.jpg" rel="lightbox"><input type="button" value="Click me!" /></a>
Just thought I would post this incase someone else encountered this type of problem.
Thanks again:
-Lu
Thanks
Just wanted to say thanks.
I was looking to implement a similar thing, and your information gave me the ramp-up I needed.
I will try to send you a link to it when it will be published.
A note - copy/paste your code won't work since you have some minor mistakes in it...
Regards,
Shushu
Webform
Is it possible to popup from created in webform in a lightbox with validation in lightbox
any help would be appriciated
thank u
vij
glad to help!
Hi Shushu,
Thanks for the heads up, I just fixed 2 errors in the code. Looking forward to seeing you code in action.
Best,
Eric