1

Here is what I'm trying to do.

When someone clicks on the "Apply special code >" button, it makes an ajax callback and inserts a textfield and submit button below it (works as planned).

However, as you can see in the ajax callback, I'm trying to attach an ajax callback to that as well. The Textfield and submit button are inserted into the page, but the ajax callback isn't added, so when someone clicks on the "Apply Code >" button, it doesn't call the ajax callback, it simply calls sample_demo_form_submit and submits the form.

How can i make this form process the 2nd ajax callback and not submit the entire form?

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

  // initialize form array
  $form = array();

  $form['#tree'] = TRUE;

  $form['#attributes']['class'][] = 'demo_form-wrapper';

  $form['demo_form']['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Search >'),
    '#prefix' => '<div class="demo_form-submit">',
    '#suffix' => '</div>',
  );

  $form['demo_form']['special_code_wrapper'] = array(
    '#type' => 'container',
    '#id' => 'code-wrapper',
    '#attributes' => array(
      'class' => array(
        'code_wrapper',
      ),
    ),
  );

  // apply special code
  $form['demo_form']['special_code_wrapper']['apply_special_code_wrapper'] = array(
    '#type' => 'container',
  );

  $form['demo_form']['special_code_wrapper']['apply_special_code_wrapper']['apply_special_code'] = array(
    '#type' => 'button',
    '#value' => t('Apply Special Code >'),
    '#prefix' => '<div id="apply-special-code" class="demo__special-code">',
    '#suffix' => '</div>',
    '#ajax' => array(
      'callback' => 'sample_demo_add_special_code',
      'effect' => 'fade',
    ),
    '#executes_submit_callback' => false,
  );

  // add special code
  $form['demo_form']['special_code_wrapper']['add_code_wrapper'] = array(
    '#type' => 'container',
    '#id' => 'add-code-wrapper',
    '#attributes' => array(
      'class' => array(
        'special-code__add'
      ),
    ),
  );

  return $form;

}

function sample_demo_add_special_code(&$form, &$form_state) {

  unset($form['demo_form']['special_code_wrapper']['apply_special_code_wrapper']['apply_special_code']);

  $form['demo_form']['special_code_wrapper']['add_code_wrapper']['add_special_code_text'] = array(
    '#type' => 'textfield',
    '#attributes' => array(
      'class' => array(
        'special-code__add-text'
      ),
    ),
  );

  $form['demo_form']['special_code_wrapper']['add_code_wrapper']['add_special_code_button'] = array(
    '#type' => 'submit',
    '#value' => t('Apply Code >'),
    '#ajax' => array(
      'callback' => 'sample_demo_ajax_offers_validate',
    ),
    '#attributes' => array(
      'class' => array(
        'special-code__add-button'
      ),
    ),
    '#submit' => array('sample_demo_ajax_offers_validate'),
    '#executes_submit_callback' => TRUE,
  );

  $form_state['rebuild'] = TRUE;

  $commands = array();
  $commands[] = ajax_command_replace("#add-code-wrapper", render($form['demo_form']['special_code_wrapper']['add_code_wrapper']));

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

function sample_demo_ajax_offers_validate_submit(&$form, &$form_state) {
  $form_state['rebuild'] = TRUE;
}

function sample_demo_ajax_offers_validate(&$form, $form_state) {

  // get currently entered code
  $code = check_plain($form_state['values']['demo_form']['special_code_wrapper']['special_code']);

  // determines whether offer code is valid
  $isValidCode = _sample_demo_validate_offer($code);

  if($isValidCode == FALSE) {
    $form['demo_form']['special_code_wrapper']['special_code']['#title'] = t('Invalid Code');

    return array(
      '#type' => 'ajax',
      '#commands' => array(
        ajax_command_replace("#special-code-wrapper", render($form['demo_form']['special_code_wrapper']['special_code'])),
      )
    );
  } else {
    $package_name = _sample_demo_get_package_name($code);
    $form['demo_form']['applied_special_code']['#markup'] = t('@code applied', array('@code' => $code));
    $form['demo_form']['applied_special_code']['#prefix'] = '<div id="applied-code">';
    $form['demo_form']['applied_special_code']['#suffix'] = '</div>';
    $form['demo_form']['special_code_wrapper']['special_code']['#title'] = t('');


    $form['demo_form']['room_special_code_wrapper']['room_special_code_value'] = array(
      '#default_value' => $code,
      '#value' => $code,
      '#markup' => t('Package Selected: @code', array('@code' => $package_name)),
    );

    $form['package_selected'] = array(
      '#type' => 'container',
      '#attributes' => array('id' => 'package-selected__wrapper')
    );

    $form['package_selected']['package_name'] = array(
      '#markup' => t('Package Selected: @package', array('@package' => $package_name)),
      '#prefix' => '<div class="package-selected">',
      '#suffix' => '</div>',
    );

    $form['package_selected']['package_value']['#value'] = $code;

    $form_state['rebuild'] = TRUE;

    return array(
      '#type' => 'ajax',
      '#commands' => array(
        ajax_command_replace("#remove-code-wrapper", render($form['demo_form']['applied_special_code'])),
        ajax_command_replace("#package-selected__wrapper", render($form['package_selected'])),
        ajax_command_invoke(NULL, "setSpecialCode"),
      )
    );
  }
}

function sample_demo_form_submit($form, &$form_state) {

  die();
}

The markup that gets rendered is as follows:

<div class="special-code__add form-wrapper" id="add-code-wrapper" style="display: block;"><div class="form-item form-type-textfield">
 <input class="special-code__add-text form-text" type="text" size="60" maxlength="128">
</div>
<input class="special-code__add-button form-submit" type="submit" name="apply_code" value="Apply Code >"></div>

It's as if the process to "ajaxify" the field isn't being called. Is there another step that's required to do after adding an element via an ajax callback to make that element have an ajax behaviour?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.