Drupal 7 #ajax callback on form submit

Question

Hello I have created a custom form added a # ajax callback on form submit

    $form['hotel_book_form']['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Check Availability'),
    '#ajax' => array(
      'callback' => "list_rooms",
      'wrapper' => "replace_hotelbook_div",
      'method' => 'replace',
      'effect' => 'fade',
    ),
  );

and I have added this wrapper as suffix to the form

    $form['hotel_book_form'] = array(
    '#type' => 'fieldset',
    '#title' => t('Book Hotel'),
    '#weight' => 5,
    '#collapsible' => TRUE,
    '#collapsed' => FALSE,
    '#prefix' => '<div id="replace_hotelbook_div"></div>',
  );

but when I click on form's submit button the page gets simply reloaded and the ajax callback function does not fire.

Answer 1

You haven't actually wrapped the element, you've inserted an empty <div> immediately before it.

You need to use #prefix and #suffix to wrap an element in HTML:

...
'#prefix' => '<div id="replace_hotelbook_div">',
'#suffix' => '</div>'

Answer 2

this isn't quite consistent with the behaviour you describing, but you are adding an element to an array:

$form['hotel_book_form']['submit'] =

then you are replacing the entire array. So you need to change:

$form['hotel_book_form'] =

to

$form['hotel_book_form']['someother_suitable_value'] =

Answer 3

The problem might be simply on your rendered html For instance i got the same issue because my ajax call was fired on a button click rendered on a form as below

 <button class="mapping_remove">Remove Mapping</button>

Once i made sure the type of the elment is a button my form stopped submitting

<button type="button" class="mapping_remove">Remove Mapping</button>

NOTICE : I added type="button" as an attribute

Answer 4

If you are working with CTools form than try to add this to the top of your form or form alter hook:

if ($form_state['rebuild'] == TRUE) {
  ctools_include('wizard');
  $form = $form_state['wrapper_callback']($form, $form_state);
}

Here is an explanation: https://drupal.org/comment/5112672#comment-5112672