Posted by jamesmcd on June 14, 2009 at 5:02pm
Jump to:
| Project: | Popups API (Ajax Dialogs) |
| Version: | 6.x-2.0-beta0 |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | jasom |
| Status: | needs work |
Issue Summary
I have created a new webform, with two fields on it, one a request box and the second an email address field.
I have a link in the helper text of a cck form for this.
At present when a user clicks it it loads a new website page to display the form
would it be possible to use this module to create a smaller pop up equivalent with just the webform fields showing?
Ideally the pop up would then close upon submission
Thanks
Comments
#1
Yeah, it would be awesome! I'm also looking for this feature. :)
I'll help to test it and report everything back to the community.
Regards,
Stefan
#2
I am also interested. Does this require creation of a custom module to invoke the functions listed in the readme.txt? Very cool stuff!
#3
Hi
I spent most of yesterday trying to get a webform in a popup working in a really nice way and I have done it with pretty cool results.
My requirements, and therefore solution, are a bit complex but with more basic requirements I am sure you could simplify my solution.
So here goes:
Basically I wanted a node to provide a link to a feedback form (ie a popups link to a webform). Upon submission the popup would close. Some sort of acknowledgment of the submission was also required.
To complicate things I also needed to do some pre-processing of the webform prior to it being shown (the actual form to show depends on the context, and certain webform values may need pre-setting).
It also had to degrade nicely so everything worked well for non-JS browsers (this was a pain to do, the solution works but I'm only 90% happy with it - but hey, I can live with that).
So on the node there is the usual link with the popup calls
$link_options = array('attributes' => array('id' => 'feedback-link',
));
$output .= l('Give feedback', 'feedback/<webform name>/'.$node->nid, $link_options);
popups_add_popups(array('#feedback-link'=>array(
'hijackDestination' => FALSE,
'width' => '480px',
// 'doneTest' => 'node/'.$node_nid,
)));
Note:
Now, I don't call my webforms directly (as explained above, I want to frig about with them first) so the link is handled by a menu callback in a custom module I wrote.
// hook_menu...
$items['feedback/%'] = array(
'title' => 'Feedback',
'page callback' => 'feedback_form_page',
'page arguments' => array(1),
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);
...
I also have a callback menu to handle the form completion stuff - acknowledgement and closedown in a JS independent manner.
...$items['feedback/done'] = array(
'title' => 'Thank you',
'page callback' => 'feedback_done_page',
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);
...
So for the webform callback function I just select the appropriate webform, do some validation, frig about with some of the webform default values and then show the webform. I also save the redirect url temporarily in the session in case it is needed later.
function feedback_form_page($form_name) {...
// get the nid argument, I have this as an optional path argument
$ref_nid = arg(2);
// you want to check the nid passed in is valid, if not default it (look at HTTP_REFERER or whatever)
$redirect = 'node/'.$ref_nid;
// save the back page referer
$_SESSION['popup-referer'] = $redirect;
...
// show the webform
return node_view($form_node, FALSE, TRUE);
}
As an aside you can set defaults in the webform like this:
...$form_node->webform['components'][<component index>]['value'] = $my_defalt_value;
...
So that gets our webform popping up nicely. Next we have to make it go away when done. There are several methods here but the best approach I found to give a post submission acknowledgement and to be functionally downgradable to non-JS was to set the webform to redirect to my second menu callback function when done. With
internal:feedback/donein the webform entry.
Incidentally, I tried setting this in my function prior to showing the webform with
$form_node->webform['confirmation'] = 'internal:feedback/done';but it didn't work so you need this on the webform config.
The problem with putting a redirect in the webform is that you loose the acknowledgement so this needs to be done in the menu callback function. We also need to get the user back to their original page. My solution was to generate a simple page that would appear in the popup after the webform submission (or would be shown if there is no JS). For the JS popup case I auto-kill the popup after a couple of seconds thus leaving the user at their original page (no reload). For the non-JS, non-popup case the page is displayed with a back button that takes the user back to their originating page.
This is how I do it:
function feedback_done_page() {// get the redirect from the session
$redirect = $_SESSION['popup-referer'];
// show the notice page
// drupal_set_message... or whatever to show the message
...
// show the back link
$o .= l('Back', $redirect, array('attributes'=>array(
'id' => 'link-back',
)));
// set a timer to auto-close the popup after a couple of seconds (js page)
$o .= '<script language=javascript type="text/javascript">';
$o .= 'timer=setTimeout("Popups.close()",2500)';
$o .= '</script>';
return $o;
}
And that's it (hope I remembered everything). It works really well.
Cheers
#4
Cool. So the answer is yes. And I suspect most use cases will be simpler that pinkradica's solution.
#5
Automatically closed -- issue fixed for 2 weeks with no activity.
#6
Hey pinkradical, that was great.
Can you please upload the module file? I can't seem to put it all together.
I'd love to try your solution but I'm not much of a programmer and I have to try the combination AjaxPopups/Webforms.
Thanks in advance
(BTW I set the thread "active" just in case more solutions appear here.)
Alex
#7
pinkradical? anyone?
#8
Hi, here is link to my screencast called "Drupal webform module to lightbox popup for feedback" with all necessary code:
http://www.jasom.net/blog/drupal/drupal-webform-module-to-lightbox-popup...
Alternatively, you can watch it here:
http://blip.tv/file/4017499
#9
Automatically closed -- issue fixed for 2 weeks with no activity.
#10
so what about pinkradical's module?
is the webform will work with popups without else modules?
#11
My webform works in popup only for anonymous users :(
and btw - it doesn't show drupal messages, if i make error in webform - it doesn't show me what is the error, only highlight fields.
in page.tpl file $messages is in the content div
print $messages;
print $content;
#12
There is a problem in popups.module in function popups_render_as_json (line 133).
The function calls theme('page', $content); and after that theme('status_messages'). The theme_page calls theme('status_messages') first. Therefore there are no messages displayed when theme('status_messages') called for the second time.
The function should look like follows:
/**
* Render the page contents in a custom json wrapper.
*
* @param $content: themed html.
* @return $content in a json wrapper with metadata.
*/
function popups_render_as_json($content) {
$messages = theme('status_messages');
// Call theme_page so modules like jquery_update can do their thing. We don't
// really care about the mark up though.
$ignore = theme('page', $content);
$path = $_GET['q']; // Get current path from params.
return drupal_json(array(
'title' => drupal_get_title(),
'messages' => $messages,
'path' => $path,
'content' => $content,
'js' => popups_get_js(),
'css' => popups_get_css(),
));
}
#13
I can confirm it works. I am using a popup webform with the dev version. There's a few ways to do it in the README but I created a module similar to #3 that is less fancy. The following code shows a webform and loads its confirmation page inside the popup:
HTML:
<a href="/my-webform-page" id="webform-popup">Subscribe</a>And in the .module:
<?php
// $Id: my_webform_popup.module
popups_add_popups(array('#webform-popup'=>array(
'hijackDestination' => FALSE,
'width' => '300px',
)));
?>
I also am using the fix from #12 to get status messages to work.
#14
See #1052060: Confirmation messages not displaying for a status message patch.
#15
Hi,
Can you tell me if it's the easiest way to show a pop up window asking for visitor Email address ?
Thanks.
#16
@mattwad, your solution is interesting, because it is simpler and it seems to work.
Could you give us more details?
For example:
- What is the name you gave to the module you created it and where you saved it?
- The ID that you use to the links is the same ID inserted into the module?
- Is there any influence of the theme used in your solution?
I have some webforms on some websites and I still have not found a simple solution to work with webforms together with modal windows. It would be extremely interesting a new version of this module with your solution integrated.
I'm using the dev version, launched in 2011-Jun-10. I notice that the pointing of the bug in #12 occurs on 10-May-2011. It is also interesting to integrate the solution pointed in #14.
Greetings.
#17
- I am using Popup 6.x-2.x-dev (2011-Jun-09) with Webform 6.x-3.11. Also Webform Conditional (Same Page Conditionals) 6.x-1.0-rc2 and Webform Mailchimp 6.x-1.x-dev (2011-May-27)
- The module name and location are irrelevant, although I keep my modules at "sites/all/modules/custom".
- The anchor link is the same as in the module: "#webform-popup"
- No unusual theming necessary. As an additional feature, I have two dummy inputs whose values are added to the link via jQuery to pre-populate the fields in the webform popup. (Not sure if this is best practice :)
- Live example at http://freshocracy.com: at the top right, click the green arrow under Get Information. Note: Please do not submit the form if you are just testing! the Webform takes a little long to load because it's also having to communicate with Mailchimp.
It's been a minute since I set this up, so if this does not work for you, feel free to post more and I will help if I can.
#18
Okay, so here we go.
I made some changes to be closer than you did, but still didn't work. So if you can help, I'll be very happy.
What I have:
- Popup 6.x-2.x-dev, released in 2011-Jun-10
- Webform 6.x-3.14, released in 2011-Aug-31
The modules are installed and enabled, as usual. The exception is for administrative links, that will not use pop-ups (However, I could see that the administrative links work perfectly with pop-ups).
What I did:
- To avoid errors, I applied the patch at #12 in popup.module file;
- I created a folder called "custom" in "site/all/modules";
- In the folder "custom", I created a file named "webform-popup.module" and in this file, I inserted the code mentioned in #13.
That done, I created a blank page, I enter some text and added a link to a form made with Webform. The link was like this:
<a href="/my-webform" id="webform-popup">Webform</a>Note: The page mentioned above was created with CKEditor, but to haven't any interference of security filters, the module was disabled in the content area of this page.
Even so, my job didn't work. What could be wrong?
Thanks in advance.
#19
What happens when you click on the link? You should see a popup icon appear next to it. Also, you don't need any patches.
I just tried it on a fresh Acquia installation. Using Popups 6.x-2.x-dev and beta, both without patches.
For some reason, I couldn't get it to work in a module this time. I just got WSOD saying "function popups_add_popups is undefined..." even though Popups API was enabled.
Instead, I can add to my theme's template.php:
<?phppopups_add_popups(array(
'#webform-popup'=>array(
'hijackDestination' => FALSE, // If TRUE, the popup incorrectly reloads the current page after you submit.
),
));
?>
The HTML:
<a href="/node/9" id="webform-popup">Popup!</a>#20
@mattward,
When I click in the link, the target page opens in the traditional way. To avoid problems, I did the following:
I created a new test site on localhost. In this new site, I use the Garland theme. I added in this new site the modules Popup 6.x-2.x-dev and Webform 6.x-3.14 and activate them, as usual.
In the Garland theme template.php file, I added the following code in the header:
<?phppopups_add_popups(array(
'#webform-popup'=>array(
'hijackDestination' => FALSE, // If TRUE, the popup incorrectly reloads the current page after you submit.
),
));
?>
The links to Webform nodes were created as follows:
<a href="/node/2" id="webform-popup">Webform</a>These codes worked perfectly with the theme Garland in a localhost.
Edited: I note, however, that the online site is more complete and I think I'm having a problem with filters because I can verify that the link hasn't the code 'id = "webform-popup'".
So I guess I'll have to work a little harder to see the Popups module working with webforms on this site.
Anyway, thanks for your tips. They were very important.
#21
Yes it definitely won't work without the id set. Try using Full HTML if there is an option for input filter.
Good luck :)
#22
I managed to adjust the site and make the link appear in the ID. The popups should work, but it occurs only partially. Let's see:
I inserted popups to webforms in menu, with the help of Menu Attributes module. A link is working perfectly. Other three didn't.
I also added links to the same popups on a page. Just as happens with the menus, only one of the links opens in popup, and that when I'm using Garland. When I'm using the official theme, none of the links opens.
Someone can imagine what might be happening?
#23
I still can't do this module to work as I wanted, but I am insistent. And I count on help from friends.
I managed to display all the IDs as needed. I have a single link in the popup which is working as desired. See below:
<a href="node/example_one" title="Example One [popup]" id="webform-popup" class="popups-processed">Example One</a>However, there are other links which I would like to run on the Popup. The IDs are displayed, but the link is being constructed as follows:
<a href="node/example_two" title="Example Two" id="webform-popup">Example Two</a>Does anybody know what might be going wrong?
Thank you.
#24
Well, not sure this is a fix but you should only ever use an #id once on a page, otherwise use classes. I think it should still work, but in your jquery you'll want to say ".webform-popup" instead of "#webform-popup". If these links are on the same page, maybe the module is just processing the first id it finds, ignoring the rest?
#25
Yes!
This is the problem: I need more a link with popup, so I change the code to work with classes and now all right, all working. Great!
Tks!
#26
Hi all. Sorry for my English, I use translate.google.ru. Using a web form with the parameters GET [key] unfortunately in this way the browsers IE7, IE8 option GET [key] is not working ...
Thank you.