Can't get ajax callback and submit from the same form to work

Question

I am building a facebook-like notification system. An icon somewhere in the page that shows you how many notifications you have and if you click on it you get a list of your notifications. Since we wanted a button-like notification icon I decided to go with the form engine.

So I have a form that I render in a Block that does Ajax calls to my server. to check for the number of notifications javascript triggers the jQuery("#edit-update-notifications-button").change(); command.

To get the list users can click the button and a floating will be inserted that shows their notifications.

Yet no ajax call does anything I expect...my submit returns me an error (check at the bottum and my callback returns stuff that does not seem to do anything (a past from firebug is also included at the bottum)

I have no clue what I am doing wrong so I was hoping someone could tell me thank you in advance.

  $form['Notifications']['update_notifications_button'] = array(
    '#type' => 'button',
    '#value' => t('Done, now tell us about you.'),
    '#limit_validation_errors' => array(),
    '#name' => 'update_notifications_button',
    '#attributes' => array(
      'style' => 'display: none;',
    ),
    '#ajax' => array (
      'callback' => 'update_processMaker_notifications',
      'event' => 'change',
      'progress' => array(
        'type' => 'none',
      ),
    ),
  );
  $form['Notifications']['notifications_icon'] = array(
    '#type' => 'image_button',
    '#value' => t('Step Notification'),
    '#src' => $image_path . $notifications['notifications_image'],
    '#attributes' => array (
      'class' => array (
          'use-ajax-submit',
      ),
      'onmouseover' => '
        this.src=\''. $image_path . $notifications['notifications_hover_image'] .'\'',
      'onmouseout' => 'this.src=\''. $image_path . $notifications['notifications_image'] .'\'',
    ),
);

The callback function looks like this:

function update_processMaker_notifications () {
   module_load_include('inc', 'ProcessMaker', 'includes/notifications');

  $notifications = get_notifications_array ();
  $image_path = drupal_get_path('module', 'processMaker') . '/images/';

  $commands = array();

  if ($notfications['numof']) {
    $commands[] = ajax_command_insert ('input[name=notifications_icon]', 
      'attr',
         array (
           'src' => $image_path . $notifications['notifications_image'],
           'onmouseover' => 'this.src=\''. $image_path . $notifications['notifications_hover_image'] .'\'', 
           'onmouseout' => 'this.src=\''. $image_path . $notifications['notifications_image'] .'\'', 
         ) 
      );
    $commands[] = ajax_command_alert('ewf');
    $commands[] = ajax_command_html (
      '#notifications_image_div',
      '<div class="notifications_number"><p>'. $notifications['numof'] .'</p></div>'
    );

  } else {
    $commands[] = ajax_command_alert('ewf');
    $commands[] = ajax_command_remove ('.notifications_number');
  }

  $drupal_ajax = array ('#type' => 'ajax', '#commands' => $commands);

  //return the form that holds the notification button
  ajax_deliver($drupal_ajax);
}

and this is my submit function, that so far only serves testing purposes:

/**
 * Submit handler for the ProcessMaker_form().
 */
function processMaker_form_submit($form, &$form_state) {
  // If the user clicked the button, then run the triggersomething trigger.
  if ($form_state['values']['Notifications'] == t('Step Notification')) {
    $commands = array();

    $commands[] = ajax_command_alert('results to show!!');
    //Test if the function is called and works
    $drupal_ajax = array ('#type' => 'ajax', '#commands' => $commands);

    //return the form that holds the notification button
    ajax_deliver($drupal_ajax);
  }
}

The submit function returns the following error:

An AJAX HTTP error occurred. HTTP Result Code: 200 Debugging information follows. Path: /drupal7/ StatusText: OK ResponseText: Welcome to Processmaker | Processmaker @import url("http://localhost/drupal7/modules/system/system.base.css?m7qo3c"); @import url("http://localhost/drupal7/modules/system/system.menus.css?m7qo3c"); @import url("http://localhost/drupal7/modules/system/system.messages.css?m7qo3c"); @import url("http://localhost/drupal7/modules/system/system.theme.css?m7qo3c"); @import url("http://localhost/drupal7/misc/ui/jquery.ui.core.css?m7qo3c"); @import url("http://localhost/drupal7/misc/ui/jquery.ui.theme.css?m7qo3c"); @import url("http://localhost/drupal7/modules/overlay/overlay-parent.css?m7qo3c"); @import url("http://localhost/drupal7/modules/contextual/contextual.css?m7qo3c"); @import url("http://localhost/drupal7/modules/comment/comment.css?m7qo3c"); @import url("http://localhost/drupal7/modules/field/theme/field.css?m7qo3c"); @import url("http://localhost/drupal7/modules/node/node.css?m7qo3c"); @import url("http://localhost/drupal7/modules/search/search.css?m7qo3c"); @import url("http://localhost/drupal7/modules/user/user.css?m7qo3c"); @import url("http://localhost/drupal7/sites/all/modules/ProcessMaker/css/notifications.css?m7qo3c"); @import url("http://localhost/drupal7/modules/shortcut/shortcut.css?m7qo3c"); @import url("http://localhost/drupal7/modules/toolbar/toolbar.css?m7qo3c"); @import url("http://localhost/drupal7/themes/bartik/css/layout.css?m7qo3c"); @import url("http://localhost/drupal7/themes/bartik/css/style.css?m7qo3c"); @import url("http://localhost/drupal7/themes/bartik/css/colors.css?m7qo3c"); @import url("http://localhost/drupal7/themes/bartik/css/print.css?m7qo3c"); Skip to main content Options for the administrative overlayIf you have problems accessing >administrative pages on this site, disable the overlay on your profile page. >Dismiss this message. Home Hello drupal Log out Administrative toolbarDashboard (View and customize your dashboard.) Content (Administer content and comments.) Structure (Administer blocks, content types, menus, etc.) Appearance (Select and configure your themes.) People (Manage user accounts, roles, and permissions.) Modules (Extend site functionality.) Configuration (Administer settings.) Reports (View reports, updates, and errors.) Help (Reference for usage, configuration, and modules.) Hide shortcuts
Add content Find content Edit shortcuts
Processmaker Main menuHome Secondary menuMy account Log out Configure block Configure block Search form Search Navigation List links Edit menu Configure block Add content Welcome to Processmaker
No front page content has been created yet.Add new content Configure block Powered by Drupal

And the callback return in firebug looks as follow:

[{"command":"settings","settings":{"basePath":"/drupal7/","pathPrefix":"","ajaxPageState":{"theme":"bartik","theme_token":"p7NYUs8gsoo4ZzTU5Y8f0LSd6wpwhP02tkwBlBLfTsk"},"overlay":{"paths":{"admin":"node/*/edit\nnode/*/delete\nnode/*/revisions\nnode/*/revisions/*/revert\nnode/*/revisions/*/delete\nnode/add\nnode/add/*\noverlay/dismiss-message\nuser/*/shortcuts\nadmin\nadmin/*\nbatch\ntaxonomy/term/*/edit\nuser/*/cancel\nuser/*/edit\nuser/*/edit/*","non_admin":"admin/structure/block/demo/*\nadmin/reports/status/php"},"pathPrefixes":[],"ajaxCallback":"overlay-ajax"}},"merge":true}]

Answer 1

My suggestion would be to use a slightly more manual approach to this. I would create my own AJAX call:

$('#update-notifications-button').click(function(e){
  // Need to display notifications.
  Drupal.notifications.show();
  // Stop button from submitting the regular form.
  e.preventDefault();
});


Drupal.notifications.show=function(){
  // We need to get notifications via AJAX.
  $.ajax({
    type:'GET',
    url: '/notifications/get',
    success:function(html){
      // html should contain all the notifications.
      // put notifications in some wrapper or something...
      $('#notifications-button').after(html);
    }
  });
}

Obviously this is all pseudo-code. You will need a menu callback for this to work:

processMaker_menu(){
  $items['notifcations/get'] = array(
    'page callback' => 'processMaker_getNotifications',
    'etc, etc, etc...',
  );
  return $items;
}

And your processMaker_getNotifications function should print out pure notification HTML and then drupal_exit().

Ultimately, this would probably be easier to do than messing with the Form API's AJAX. The toughest problems I have ever solved in Drupal have been around the Form API and AJAX..