How do I get Drupal to add AHAH behaviour to a form element that is returned via AHAH?

Question

So here's what I'm trying to do:

1. I create and render the following form element:

    $form['rb_download_' . $doc_id] = array(
      '#type' => 'submit',
      '#name' => 'doc_' . $doc_id,
      '#prefix' => "<div id='rb_doc_order_{$doc_id}'>",
      '#suffix' => '</div>',
      '#value' =>variable_get('rb_order_button', "buyOnline"),
      '#ahah'  => array(
         'event' => 'click',
         'path'  => "rb/case/doc_order_js/$case->nid/$doc_id",
         'wrapper' => "rb_doc_order_{$doc_id}",
         'effect' => 'fade',),
    );

2. The action function returns and replaces the element above with a new element:

function rb_case_doc_order_js($case, $doc_id) {

  $button['rb_download_' . $doc_id] = array(

        '#type'         => 'submit',
        '#name'         => 'doc_' . $doc_id,
        '#prefix'       => "<div id='rb_doc_order_{$doc_id}'>",
        '#suffix'       => '</div>',
        '#value'        => variable_get('rb_order_confirm', "Remove from cart"),
  //'#attributes' => array('class' => 'ahah-processed'),
        '#ahah'         => array(

           'event'      => 'click',
           'path'       => "rb/case/doc_unorder_js/$case->nid/$doc_id",
           'wrapper'    => "rb_doc_order_{$doc_id}",
           'effect'     => 'fade',),

  );

  $output .= drupal_render($button);
  $output .= "<script type='text/javascript'>\n";
  $output .= "cart_block_item_count($count);\n";
  $output .= "Drupal.ahah;\n";
  $output .= "</script>\n";

  print drupal_json($output);

}

3. The results are that the old button is replaced by the one above, but the new button is not AJAX enabled.

What do I need to do to make the new returned element AHAH ready?

Answer 1

Well, I couldn't figure exactly how to make the file do the above. But I did figure a workaround (which in my case involves toggling between two different values of the submit element object on the client side so that it's AHAH behavior are not lost). On the server side I just check for the different values and act depending on the results:

1. Define the element with a different value dependent on a condition

  if (empty($rb_item) ||($rb_item['node_checkout_nid'] != $node_checkout_nid)) {
    //if (true) {
    $form['rb_download_' . $doc_id] = array(
      '#type'   => 'submit',
      '#name'   => 'doc_' . $doc_id,
      '#prefix' => "<div id='rb_doc_download_{$doc_id}'>",
      '#suffix' => '</div>',
      '#value'  => variable_get('rb_doc_download_button', "buyOnline"),
      '#ahah'   => array(
         'event'   => 'click',
         'path'    => "rb/case/doc_download_js/$case->nid/$doc_id",
         'wrapper' => "rb_doc_download_{$doc_id}",
         'effect'  => 'none',
         'method'  => 'append',
    ),
    );
    unset($_SESSION['rb_case']['rb_dowload_' . $doc_id]);
  }
  else {
    $form['rb_download_' . $doc_id] = array(
      '#type' => 'submit',
      '#name' => 'doc_' . $doc_id,
      '#prefix' => "<div id='rb_doc_download_{$doc_id}'>",
      '#suffix' => '</div>',
      '#value' => variable_get('rb_return_button', "Remove from cart"),
      '#ahah'  => array(
         'event' => 'click',
         'path'  => "rb/case/doc_download_js/$case->nid/$doc_id",
         'wrapper' => "rb_doc_download_{$doc_id}",
         'effect'  => 'none',
         'method'  => 'append',
    ),
    );
  }

2. The action function checks to see what value the form is and returns a toggle value for the element:

function rb_case_doc_download_js($case, $doc_id) {

  //Add code that will change how the form elements are rendered here ...

  //Now get form with possible new values and send toggle value back to the javascript on client side.

  $form_state = array('storage' => NULL, 'submitted' => FALSE);
  $form_build_id = $_POST['form_build_id'];
  $form = form_get_cache($form_build_id, $form_state);

  $args = $form['#parameters'];
  $form_id = array_shift($args);
  $form_state['post'] = $form['#post'] = $_POST;
  $form['#programmed'] = $form['#redirect'] = FALSE;

  //Toggle the form element value between <<Add to Cart>> and <<Remove from Cart>>
  $toggle_on  = variable_get('rb_doc_download_button', "buyOnline");
  $toggle_off = variable_get('rb_return_button', "Remove from cart");
  if ($form['rb_download_' . $doc_id]['#value'] == $toggle_on) {
    $toggle = $toggle_off;
    $form['rb_download_' . $doc_id]['#value'] = $toggle;
  }
  else {
    $toggle = $toggle_on;
    $form['rb_download_' . $doc_id]['#value'] = $toggle;
  }

  drupal_process_form($form_id, $form, $form_state);
  $form = drupal_rebuild_form($form_id, $form_state, $args, $form_build_id);

  $output .= "<script type='text/javascript'>\n";
  $output .= "cart_block_item_count($count);\n";
  $output .= "rb_button_toggle('rb_doc_download_{$doc_id}', '$toggle');\n";
  $output .= "</script>\n";

  print drupal_json($output);

}

3. The JavaScript function on the client side changes the value of the element but the object keeps its AJAX behavior:

  /**
   * Change the button name
   */
  function rb_button_toggle(target, name) {
    alert(target);
    alert(name);
    if (target && name) {
      $(':submit', document.getElementById(target)).attr('value', name);
    }
  }

4. And that works for me :)

Feel free to add the solution above if you can figure that out.