1

I have a custom form within my module that is AJAX-enabled. The form contains a fieldset with a number of fields, and the user can click 'add more' to add another fieldset.

One of the fields within the fieldset is a select list, and all select lists on the site are replaced with a Chosen widget via the Chosen jQuery plugin contained in the Chosen module. The problem is, when AJAX refreshes the page, all Chosen widgets on the page revert back to select lists.

I already have an issue on drupal.org for the Chosen module, but there have been no responses yet--I was hoping somebody here knew of a way to use Chosen with an AJAX form.

I would assume that Chosen would be dynamically loaded on AJAX content by the Drupal behavior within the Chosen module, but apparently it doesn't work this way. Maybe I need to load it manually?

function manual_import_menu() {
  $items['manual_import'] = array(
    'title' => 'Manual Import',
    'description' => 'Manual import form.',
    'page callback' => 'manual_import_page',
    'access callback' => TRUE,
  );
  $items['admin/config/manual_import'] = array(
    'title' => 'Configure Manual Import',
    'description' => 'Select which taxonomy terms will be used in the 
      manual import form.',
    'page callback' => '',
    'access arguments' => TRUE,
    );
  return $items;
}

function manual_import_page() {
  $build = array(
    'header_text' => array(
      '#type' => 'markup',
      '#markup' => '<div class="grid_8"><p>' . t('Manually import content into Repair Central.  Content 
        is imported in a group, which is assigned an import scenario, 
        which determines the tasks created for the items.') . '</p></div>',
    ),
    'manual_import_form' => drupal_get_form('manual_import_form'),
  );
  return $build;
}

function manual_import_form($form, &$form_state) {
  //set up options for select list
  $task_options = get_task_options();
  $location_options = get_location_options();
  $model_options = get_model_options();

  $form['#attached'] = array(
    'css' => array(
      'type' => 'file',
      'data' => drupal_get_path('module','manual_import') . '/manual_import.css',
    ),
    'js' => array(
      'type' => 'file',
      'data' => drupal_get_path('module','manual_import') . '/manual_import.js',
    ),
  );
  $form['#tree'] = TRUE;
  $form['scenario'] = array(
    '#type' => 'select',
    '#title' => t('Import Scenario'),
    '#options' => array(
      'shipment' => t('Shipment'),
      'location' => t('Location'),
      'manual' => t('Manual'),
      ),
    '#prefix' => '<div class="grid_12">',
    '#suffix' => '</div>',
    '#default_value' => 'shipment',
  );
  $form['scenario_shipment'] = array(
    '#type' => 'fieldset',
    '#title' => t('Associate Group To Shipment'),
    '#description' => t('Associate a group of items to a shipment, and auto-generate tasks'),
    '#states' => array(
      'visible' => array(
        ':input[name="scenario"]' => array('value' => 'shipment'),
      ),
    ),
    '#prefix' => '<div class="grid_4">',
    '#suffix' => '</div>',
    '#collapsible' => TRUE,
    '#collasped' => FALSE,
  );
  $form['scenario_shipment']['shipping_list_number'] = array(
    '#type' => 'textfield',
    '#title' => t('Shipping List'),
    '#prefix' => '<div class="manual-import-shipping-list">',
    '#suffix' => '</div>',
  );
  $form['scenario_shipment']['shipping_from'] = array(
    '#type' => 'select',
    '#title' => t('Shipping From'),
    '#options' => $location_options,
    '#default_value' => 283,
  );
  $form['scenario_shipment']['shipping_to'] = array(
    '#type' => 'select',
    '#title' => t('Shipping To'),
    '#options' => $location_options,
    '#default_value' => 283,
  );

  $form['scenario_location'] = array(
    '#type' => 'fieldset',
    '#title' => t('Associate Group To Location'),
    '#description' => t('Associate a group of items to a location, and auto-generate tasks'),
    '#states' => array(
      'visible' => array(
        ':input[name="scenario"]' => array('value' => 'location'),
      ),
    ),
    '#prefix' => '<div class="grid_4">',
    '#suffix' => '</div>',
    '#collapsible' => TRUE,
    '#collasped' => FALSE,
  );
  $form['scenario_location']['location'] = array(
    '#type' => 'select',
    '#title' => t('Location'),
    '#options' => $location_options,
    '#default_value' => 283,
  );
  $form['scenario_manual'] = array(
    '#type' => 'fieldset',
    '#title' => t('Manually Create Tasks'),
    '#description' => t('Manually select the tasks to be created for the items in the group.'),
    '#states' => array(
      'visible' => array(
        ':input[name="scenario"]' => array('value' => 'manual'),
      ),
    ),
    '#prefix' => '<div class="grid_4">',
    '#suffix' => '</div>',
    '#collapsible' => TRUE,
    '#collasped' => FALSE,
  );
  $form['scenario_manual']['task'] = array(
    '#type' => 'select',
    '#title' => t('Task Type'),
    '#options' => $task_options,
  );
  $form['import_items'] = array(
    '#type' => 'container',
    '#prefix' => '<div id="import_items" class="grid_8">',
    '#suffix' => '</div>',
  );
  if (empty($form_state['import_item_quantity'])) {
    $form_state['import_item_quantity'] = 1;
  }
  for ($i = 1; $i <= $form_state['import_item_quantity']; $i++) {
    $form['import_items'][$i] = array(
      '#type' => 'fieldset',
      '#title' => t('Import Item @item', array('@item' => $i)),
      '#collapsible' => TRUE,
      '#collapsed' => FALSE,
    );
    if ($i == $form_state['import_item_quantity']) {
      $form['import_items'][$i]['#prefix'] = 
        '<div class="manual-import-item-last">';
      $form['import_items'][$i]['#suffix'] = 
        '</div>';
    }
    $form['import_items'][$i]['ticket_number'] = array(
      '#type' => 'textfield',
      '#maxlength' => 32,
      '#title' => t('Ticket Number'),
      '#class' => 'manual-import-item-field',
      '#prefix' => '<div class="manual-import-item-field manual-import-item-ticket">',
      '#suffix' => '</div>',
    );
    $form['import_items'][$i]['device_id'] = array(
      '#type' => 'textfield',
      '#maxlength' => 32,
      '#title' => t('Device ID'),
      '#prefix' => '<div class="manual-import-item-field manual-import-item-device-id">',
      '#suffix' => '</div>',
    );
    $form['import_items'][$i]['device_model'] = array(
      '#type' => 'select',
      '#title' => t('Make/Model'),
      '#options' => $model_options,
      '#prefix' => '<div class="manual-import-item-field manual-import-item-device">',
      '#suffix' => '</div>',
    );
    if ($i == $form_state['import_item_quantity']) {
      $form['import_items'][$i]['device_model']['#prefix'] = 
        '<div class="manual-import-item-field manual-import-item-device manual-import-item-last-field">';
    }
  }
  $form['import_items']['item_add'] = array(
    '#type' => 'submit',
    '#value' => 'Add another!',
    '#ajax' => array(
      'callback' => 'manual_import_item_ajax_callback',
      'wrapper' => 'import_items',
    ),
    '#submit' => array('manual_import_item_add'),
  );
  return $form;
}
function manual_import_item_ajax_callback($form, $form_state) {
  return $form['import_items'];
}

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

1 Answer 1

2

You can add the class chosen-widget directly to the form element like this:

$form['your_form_field']['#attributes']['class'] = array('chosen-widget');

And an example for your code would be:

$form['import_items'][$i]['device_model'] = array(
  '#type' => 'select',
  '#title' => t('Make/Model'),
  '#options' => $model_options,
  '#prefix' => '<div class="manual-import-item-field manual-import-item-device">',
  '#suffix' => '</div>',
  '#attributes' => array(
    'class' => array('chosen-widget'),
  ),
);

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.