Hi,

I am trying to add an ajax callback to my simplenews subscription form. The problem is that the callback is only called when the message alert returns an error message (with classes: 'messages error'). The callback isn't called when the form returns a positive message (with classes: 'messages status').

I followed the given instructions and added the following code to a custom module. I also tried to add the callback in the original form that defines it in simplenews.module. It had the same result.

<?php
function custom_form_alter(&$form, $form_state, $form_id) {

  if ($form_id == 'simplenews_block_form_10') {

    $form['#ajaxsubmit'] = TRUE;
    $form['#ajaxsubmit_callbacks'] = array('subscriptionCallback',);

  }

}
?>

I placed the callback function in a javascript file called by the theme:

$(document).ready(function(){
	
/**
 * Newsletter ajaxsubmit submission handler.
 **/
subscriptionCallback = function (target, data) {
	alert('test');
  var messages = $('div.messages', target);
  if (messages && !messages.hasClass('error')) {
  	alert('test: no error class');
    setTimeout(function () {
      // remove the values from the form inputs
      $('#simplenews-block-form-10 input.form-text').each(function (i, el) {
      	el.value = '';
      });
      messages.slideUp();
    }, 3000);
  }
}

});  // end .ready function

Thank you very much in advance. I appreciate it very much.
Cheers,
Danny

Comments

danny_joris’s picture

danny_joris commented

Actually I tried this on a webform on the same website and the results were the same. Only a callback returned when the form submit resulted in giving an error message...

katbailey’s picture

katbailey commented
Assigned: Unassigned » katbailey

Ah, just figured it out - you need $form['#redirect'] = FALSE; for your callback to work, so your hook_form_alter would be like this:

<?php
function custom_form_alter(&$form, $form_state, $form_id) {

  if ($form_id == 'simplenews_block_form_10') {
    $form['#redirect'] = FALSE;
    $form['#ajaxsubmit'] = TRUE;
    $form['#ajaxsubmit_callbacks'] = array('subscriptionCallback');
  }

}
?>
danny_joris’s picture

danny_joris commented

Thank you katbailey, this works! So the form made a redirect before?

I changed the code a little you gave me to give it a fadeout instead of a slide up. I am wondering: what would i need to do add a fade in to the messages as they appear? Is it something in the callback. I'm not a pro, but I don't see any calls for the message in the callback that I could edit, but it's very likely that i'm wrong.


/**
 * Newsletter ajaxsubmit submission handler.
 **/
subscriptionCallback = function (target, data) {
	//alert('test');
  var messages = $('div.messages', target);
  if (messages && !messages.hasClass('error')) {
  	//alert('test: no error class');
    setTimeout(function () {
      // remove the values from the form inputs
      $('#simplenews-block-form-10 input.form-text').each(function (i, el) {
      	el.value = '';
      });
      messages.fadeOut(300);
    }, 5000);
  }
}

Again, thanks a million for your help !! :)
Danny

katbailey’s picture

katbailey commented

Make the messages div invisible by default just using css, i.e. in your css file:

div.messages {
  display: none;
}

Then in your callback function

/**
* Newsletter ajaxsubmit submission handler.
**/
subscriptionCallback = function (target, data) {
  var messages = $('div.messages', target);
  messages.fadeIn('slow');
  if (messages && !messages.hasClass('error')) {
    setTimeout(function () {
      // remove the values from the form inputs
      $('#simplenews-block-form-10 input.form-text').each(function (i, el) {
      el.value = '';
      });
      messages.fadeOut(300);
    }, 5000);
  }
}

You'd want to make sure that this works fine without js though too. The form will just submit normall but if the .messages class is still used in the non-js version then they'll never get shown.

danny_joris’s picture

danny_joris commented
Status: Active » Fixed

That works! thank you very very much, katbailey !! :)

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.