Form ajax add more button added via another ajax callback not working

Question

I have a form button which I want to add another field with another button on that form( I am able to do this) but second button is not clickable. Any idea. Following is my code-

This is my form code-

function create_report_form($form, $form_state) {
$form['title'] = array(
    '#type' => 'textfield',
    '#title' => t('Report ttitle'),
    '#value' =>'',
);

$form['actions'] = array(
  '#type' => 'actions',
);

$form['actions']['submit'] = array(
  '#type' => 'submit',
  '#value' => t('Save'),
);
$form['conditions'] = array(
  '#tree' => TRUE,
);
$form['conditions']['report_type'] = array(
  '#title' => t('Report type'),
  '#type' => 'select',
  '#prefix'=> '<div class="conditions-wrapper"></div>',
  '#multiple' => false, 
  '#options' => get_report_type()
); 

 $form['conditions']['submit'] = array(
   '#type' => 'button',
   '#value' => t('Add condition'),
   //'#name' =>   '_add_another_outcome',
   '#ajax' => array(
      'callback' => 'reports_add_conditions',
      'wrapper' => 'report-form',
      'method' => 'replace',
      'effect' => 'fade',
   ),
  );  
   return $form;
}

Now, when I click on this button it will call the following function and generate another form element(select list) with another button which will call another ajax function (this is what which is not working).

function reports_add_conditions($form, &$form_state){
$values = $form_state['values'];
$form_state['rebuild'] = TRUE;
$type = $values['conditions']['report_type'];
$form['attributes'] = array(
  '#tree' => TRUE,
);
$form['attributes']['submit'] = array(
    '#type' => 'button',
    '#value' => t('Add attribute condition'),
    '#ajax' => array(
      'callback' => 'reports_add_attribute_conditions',
      'wrapper' => 'report-form',
      'method' => 'replace',
      'effect' => 'fade',
    ),
);       
$form['attributes']['attribute'] = array(
    '#type' => 'select',
    '#title' => '',
    '#options' => get_options($type),
    '#size' => 22, 
);  
  return drupal_render($form);
}

As you can see from the code I am not able to call "reports_add_attribute_conditions" function for the button.

This is my second call back code-

function reports_add_attribute_conditions($form, &$form_state){
$form_state['rebuild'] = TRUE;
$values = $form_state['values'];
$type = $values['conditions']['report_type'];
$form['attribute'] = array(
    '#type' => 'select',
    '#name' => $type,
    '#title' => '',
    '#options' =>  get_options($type),
    '#size' => 22, 
); 
$form['attributes']['submit'] = array(
    '#type' => 'button',
    '#value' => t('Add attribute condition'),
    '#ajax' => array(
      'callback' => 'reports_add_attribute_conditions',
      'wrapper' => 'report-form',
      'method' => 'replace',
      'effect' => 'fade',
    ),
); 

 return drupal_render($form);
}

Any idea is greatly appreciable

Answer 1

@NabajitRoy my idea is

1. Never use drupal_render() manual calls (return $form array as-is)
2. Move all the form generation code into form constructor( create_report_form() ), AJAX callback should not create new elements for form but only create_report_form() should
3. AJAX callbacks should only return element form (not generate them) e.g. return $form['attributes']['submit'] and may be $form_state['rebuild'] = true; if needed.
4. To know in create_report_form() if it was called by AJAX request button check the $form_state['triggering_element'] in it.
5. I feel that using '#type' => 'submit' instead of '#type' => 'button' is better

https://www.drupal.org/node/752056

Answer 2

may AJAX request is not send to server at all? Try changin the

$form['attributes']['submit'] = array(
'#type' => 'button',

to $form['attributes']['submit'] = array( '#type' => 'submit',