1

I have been surfing for a solution since yesterday, got hell lot of irrelevant solution. My requirement is very simple,

I just want to get the conformation message(Thank you, your submission has been received.) in a popup window.

tried several modules not satisfied. Friends please help me out, its urgent for me.

1
  • The modules you tried, why are you not satisfied? Once the webform has been submitted (page load), an overlayer is shown with the confirmation message set within Drupal? Oct 29, 2013 at 20:25

2 Answers 2

2

Here is an example using a custom module (called it wcm_overlayer). Basically, this will show the confirmation message in an overlayer using the jQuery Fancybox library. For the webform configuration (under form settings), you need to set the redirection location setting to No redirect (reload current page).

wcm_overlayer.module

/**
 * Implements hook_init()
 */
function wcm_overlayer_init()
{
    // Add library & js file
    drupal_add_library('wcm_overlayer', 'fancybox');
    drupal_add_js(
        drupal_get_path('module', 'wcm_overlayer') . '/js/wcm_overlayer.js');
}

/**
 * Implements hook_node_view()
 * 
 * @param type $node
 * @param type $view_mode
 * @return boolean
 */
function wcm_overlayer_node_view($node, $view_mode)
{
    // Verify if webform is attached to a node
    if (!isset($node->webform)) {
        return false;
    }

    // Retrieve confirmation message
    $confirmation_message = check_markup(
        $node->webform['confirmation'], $node->webform['confirmation_format']);

    // Retrieve all status message
    $messages = drupal_get_messages('status');

    // None is found, don't do anything
    if (!isset($messages['status'])) {
        return false;
    }

    // Loop through all messages and get confirmation message
    foreach ($messages['status'] as $message) {
        if ($message !== $confirmation_message) {
            drupal_set_message($message);
            continue;
        }

        $found = true;
    }

    // Confirmation message is not found, don't do anything
    if (!isset($found)) {
        return false;
    }

    // Confirmation message is found, pass this as a setting
    drupal_add_js(array(
        'wcm_overlayer' => $confirmation_message,
    ), 'setting');
}

/**
 * Implements hook_library()
 * 
 * Define the jQuery Fancybox 1.3.4 as a library
 * @return string
 */
function wcm_overlayer_library()
{
    $path = drupal_get_path('module', 'wcm_overlayer');

    $libraries['fancybox'] = array(
        'title' => 'jQuery Fancybox',
        'version' => '1.3.4',
        'js' => array(
            $path . '/js/vendor/jquery.easing.js' => array(),
            $path . '/js/vendor/jquery.mousewheel.js' => array(),
            $path . '/js/vendor/jquery.fancybox.js' => array(),
        ),
        'css' => array(
            $path . '/css/vendor/jquery.fancybox.css' => array(),
        ),
    );

    return $libraries;
}

js/wcm_overlayer.js

(function ($) {
    Drupal.behaviors.wcm_overlayer = {
        attach: function(context, settings) {
            if (!settings.hasOwnProperty('wcm_overlayer')) {
                return false;
            }

            this.showOverlayer(settings.wcm_overlayer);
        },
        showOverlayer: function(message) {
            $(window).load(function() {
                $.fancybox({ content: function() {
                        return $(message);
                }});
            });
        }
    };
}) (jQuery);

Hope it helps.

1
  • Just I have two corrections for your js/wcm_overlayer.js file: 1. settings.wcm_overlayer.confirmation_message instead settings.wcm_overlayer 2. return message; instead return $(message);
    – user52403
    Sep 24, 2015 at 22:39
0

Mike Vranckx's solution is an elegant solution but unfortunately i was unable to get it to work properly. For some reason, the wcm_overlayer.js showed me an error message "The requested content cannot be loaded. Please try again later."

After searching a while, i found an alternative solution on http://fancyapps.com/fancybox/ API documentation , that eventually not only solved this error but also opened up other configuration option, like padding :

(function ($) {
  Drupal.behaviors.webform_popup = {
    attach: function(context, settings) {
      if (!settings.hasOwnProperty('webform_popup')) {
        return false;
      }

      this.showOverlayer(settings.webform_popup);
    },
    showOverlayer: function(message) {
      $.fancybox.open([
        {
          content : message
        }],
        {
          padding : 20
        }
      );
    }
  };
}) (jQuery);

It might help solving others with the same issue. More info on http://fancyapps.com/fancybox/#license

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.