How to avoid losing custom CSS/JS on a form using Ctools Modal when Validation Errors Occur

Question

I have a regular content type form that has been customized quite a bit with a form alter. I am wanting to see about getting that form in to a ctools modal window for the creation of that content. I am able to do so, and I am able to create content. However, my form_alter customizes this form with some JS and CSS which is being added by specifying an #after_build on the form.

/**
* implements hook_form_alter to add in some custom submit and validation callbacks
*
* @form
* the activity form at node/add/activity-log
*/
function activity_log_form_alter(&$form, &$form_state, $form_id) {
 global $user;
 //activity log form
 if($form_id == 'activity_log_node_form') {
  //specify an after build function where i can add JS and CSS files
  $form['#after_build'][] = 'activity_log_entry_form_after_build';

  //change the submit buttons text value
  $form['actions']['submit']['#value'] = t('Save this task');
  $form['actions']['submit']['#weight'] = 30;
  unset($form['actions']['preview']);

  if(isset($form['actions']['delete'])) {
    $form['actions']['delete']['#value'] = t('Delete this task entry');
    $form['actions']['delete']['#weight'] = 35;
  }

  //submit handler and validation handler
  $form['#submit'][] = 'activity_log_form_submit';
  $form['#validate'][] = 'activity_log_form_validate';

  } //end check for activity log form 
}

/**
 * This function is ran after the node/add/activity-log form is built. The css and js files are added here
 * because if they are added in the form alter, they won't get included when the form throws validation errors.
 *
 * @form
 * the activiyt log form at node/add/activity-log
 */
 function activity_log_entry_form_after_build($form, &$form_state) {
    //add the chosen library in there
    drupal_add_js(libraries_get_path('chosen') . '/chosen.jquery.min.js');
    drupal_add_js(libraries_get_path('chosen') . '/chosen.proto.min.js');
    drupal_add_css(libraries_get_path('chosen') . '/chosen.min.css');

    //activity log js and css
    drupal_add_css(drupal_get_path('module', 'activity_log') . '/css/activity_log.css');
    drupal_add_js(drupal_get_path('module', 'activity_log') . '/js/activity_log.js');

   return $form;
}

This works great when I browse to the normal forms create content url, and if there are validation errors, all is well. However, when using the form in the modal window, if there are validation errors, I lose my JS/CSS on form rebuild even though the form_alter and after_build are still being called. Any ideas why?

Answer 1

Turns out that the JS and CSS files were not being dropped, but since the modal window uses ajax, all the ID's were being incremented when the form was rebuilt after a validation error.

So JS and CSS selectors such as edit-field-act-property-ref

<div id="edit-field-act-property-ref">

would become

<div id="edit-field-act-property-ref--1">

which is a problem if you have CSS/JS targeting the original. I thought I would share in case this helps out somebody else in the future.