Targeting text field on node edit form from ctools modal

Question

I have a multivalue image field, and using FileField Sources, I've added a link that displays a ctools modal window that allows a user to search Apache Solr for images. The results are displayed in a table in the form. Each row in the table has a link that when clicked, should write the path to the returned image to the image field. Here's what I have so far:

/**
 * Drupal form to be put in a modal.
 */
function imgsearch_form($form, $form_state) {
  $form = array();

  $form['search_terms'] = array(
    '#type' => 'textfield',
    '#title' => t('Search text'),
    '#description' => t('Enter the search terms'),
  );

  $form['replace_div'] = array(
    '#prefix' => '<div id="imgsearch-replace-div">',
    '#suffix' => '</div>',
    '#weight' => 6,
  );

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
  );

  return $form;
}

/**
 * Drupal form submit handler.
 */
function imgsearch_form_submit(&$form, &$form_state) {
  // Generate the new link using the submitted text value.
  $link = _nb_alters_make_link($form_state['values']['new_link_text']);

  // Search Solr for images.
  $images = nb_alters_search($form_state['values']['search_terms']);

  if (is_array($images) && count($images > 0)) {
    // Theme the results as a table.
    $header = array(t('Image'), t('Content'), t('Add to field'));
    $rows = array();
    foreach ($images as $image) {
      // Create image style derivative for each image.
      $imagestyle = array(
        'style_name' => 'thumbnail',
        'path' => $image['filepath'],
        'width' => '',
        'height' => '',
        'alt' => '',
        'title' => $image['filename'],
      );
      $styled_image = theme('image_style', $imagestyle);

      $rows[] = array(
        'image' => $styled_image,
        'name' => $image['filename'],
        'add' => ctools_ajax_text_button("select", "imgsearch/nojs/imgadd/" . $fieldname, t('Select')),
      );
    }

    $output = theme('table', array('header' => $header, 'rows' => $rows, array('class' => array('imgsearch-table'))));
  }
  else {
    $output = '<div class="no-results>No images found</div>';
  }

  // Tell the browser to replace the old link with the new one.
  $form_state['ajax_commands'][] = ajax_command_replace('#imgsearch-replace-div', $output);
}

/**
 * Implementation of hook_menu.
 */
function nb_alters_menu() {
  $items = array();

  $items['imgsearch/%ctools_js/imgadd/%'] = array(
    'title' => 'Add Image',
    'page callback' => 'nb_alters_add_image',
    'page arguments' => array(1, 3),
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
  );

  return $items;
}

/**
 *  Menu callback. Add the selected image to field_images
 */
function nb_alters_add_image($js, $fieldname) {
  if (!$js) {
    // We don't support degrading this from js because we're not
    // using the server to remember the state of the table.
    return MENU_ACCESS_DENIED;
  }
  ctools_include('ajax');
  ctools_include('modal');

  $commands = array();
  $commands[] = ajax_command_html("#edit-field-images-und-3-imgsearch-file-url", "filepath");

  // Tell the browser to close the modal.
  $form_state['ajax_commands'][] = ctools_modal_command_dismiss();

  print ajax_render($commands);
  exit;
}

The problem I'm having is when I click the "add" link, the form goes back to its original state (terms field and button, no results) and doesn't close. This is primarily because the page callback for my menu item - nb_alters_add_image() - isn't getting called. I've rebuilt the menus, and I've verified in the menu_router table that my menu item (imgsearch/%ctools_js/add/%) is there, so I know that's not the issue.

Can anyone tell what I'm doing wrong and what else I need to do to write the path to the image field and close the modal?

Thanks.

UPDATE: Well, it always helps to concatenate strings and variables properly (see the 'add' array item in the table array). Once I fixed that, it started hitting my page callback, but the modal isn't closing, and the value isn't being written to the image field.

UPDATE 2: After an IRC conversation with merlinofchaos where he pointed out my pretty obvious code errors, I've re-written my ajax function like so:

function nb_alters_add_image($js, $fieldname) {
  if (!$js) {
    // We don't support degrading this from js because we're not
    // using the server to remember the state of the table.
    return MENU_ACCESS_DENIED;
  }
  ctools_include('ajax');
  ctools_include('modal');
  $imagepath = 'http://mybucket.s3.amazonaws.com/styles/thumbnail/s3/images/2010/July/MainPhoto.jpg';
  $ajax_commands = array();
  $ajax_commands[] = ajax_command_html("#edit-field-images-und-2-imgsearch-file-url", $imagepath);
  // Tell the browser to close the modal.
  $ajax_commands[] = ctools_modal_command_dismiss();
  print ajax_render($ajax_commands);
}

This works in that it closes the modal and writes a value (both hardcoded for the moment just to get this part working), but the problem is that it adds a after the input element instead of writing the data to the textfield itself. Is there a different command I should be using to write the image path to the text field?

Answer 1

See my eventual resolution to this issue in the ctools issue queue.