Add rows to form tableselect with AJAX

I would like to:

1.) Add rows to a tableselect form element when a user clicks on a button.

2.) See which rows are selected when a user clicks on another button.

Part one is complete (I've only included relevant code):

public function buildForm(array $form, FormStateInterface $form_state) {

  //Tableselect
  $header = [
    'first_name' => $this->t('First Name'),
  ]

  $form['results'] = [
    '#type' => 'tableselect',
    '#title' => $this->t('Select contact to add to message list'),
    '#header' => $header,
    '#options' => [],
    '#multiple' => TRUE,
    '#empty' => $this->t('No users found'), 
    '#prefix' => '<div id="search-results">',
    '#suffix' => '</div>',
  ];

  //This button adds rows to tableselect
  $form['button_one'] = [
    '#type' => 'button',
    '#value' => $this->t('Search'),
    '#ajax' => [
      'callback' => '::contactSearch',
      'wrapper' => 'search-results',
      'effect' => 'fade',
    ],
  ];

  //This button displays $form_state in a kint
  $form['button_two'] = [
    '#type' => 'button',
    '#value' => $this->t('Debug'),
    '#ajax' => [
      'callback' => '::debugSearch',
      'wrapper' => 'search-results',
      'effect' => 'fade',
    ],
  ];

  //This is for kint
  $form['debug'] = [
    '#type' => 'container',
    '#attributes' => [
      'id' => ['debug-out'],
    ],
  ];

}

/**
 * Ajax callback for button one
 */
public function contactSearch(array &$form, FormStateInterface $form_state) {

  //The AJAX callback replaces the tableselect with one that has more rows.
  $header = [
    'first_name' => $this->t('First Name'),
  ];

  $rows = [
    1 => 'Ben',
    2 => 'Sarah',
    3 => 'Steve',
  ];

  $form['results'] = [
    '#type' => 'tableselect',
    '#title' => $this->t('Select contact to add to message list'),
    '#header' => $header,
    '#options' => $rows,
    '#multiple' => TRUE,
    '#empty' => $this->t('No users found'), 
    '#prefix' => '<div id="search-results">',
    '#suffix' => '</div>',
  ];

  //This seems to be necessary specifically for tableselect
  $form['results'] = Tableselect::processTableselect($form['results'], $form_state, $form);
  $response->addCommand(new ReplaceCommand('#search-results', $form['results']));
  return $response;

}

/**
 * Ajax callback for button two
 */
public function debugSearch(array &$form, FormStateInterface $form_state) {

  //Show current state of tableselect in a kint
  $response = new AjaxResponse();
  $debugOut = @Kint::dump($form_state->getValue('results'));
  $response->addCommand(new ReplaceCommand('#debug-out', $debugOut));
  return $response;

}

What I expect:

I expect button one to update $form so that when I click on button two, $form_state->getValue('results') will return which rows are selected.

What happens:

The button 2 AJAX function doesn't register any change to the tableselect element.

Visually, the tableselect changes as I expect after clicking button one: the extra rows are added. But the AJAX callback for button 2 doesn't see any change.

I need to know which rows are selected AFTER the tableselect has been updated.

บน ปัญหา DA นี้ มีความคิดเห็น:

คุณไม่สามารถเปลี่ยนองค์ประกอบในการโทรกลับหรือตรวจสอบฟอร์ม () คุณต้องวางไว้ในเมธอด buildForm ()

ซึ่งเป็นสิ่งที่ฉันกำลังทำอยู่ ฉันกำลังเพิ่มแถวใน $form ภายในการโทรกลับ AJAX

ดังนั้นฉันจึงสร้างเมธอดที่เรียกโดย buildForm() ที่ประเมินตัวเลขในแถวตามค่าใน $form_state:

    $form['search_results']['ผลลัพธ์'] = [
      '#type' => 'เลือกตาราง',
      '#title' => $this->t('เลือกผู้ติดต่อเพื่อเพิ่มในรายการข้อความ'),
      '#header' => $ส่วนหัว,
      '#options' => $this->getRows($form_state),
      '#multiple' => จริง,
      '#empty' => $this->t('ไม่พบผู้ใช้'), 
      '#prefix' => '<div id="search-results">',
      '#suffix' => '</div>',
    ];

ความเข้าใจของฉันคือการเรียกกลับ AJAX จะเรียก buildForm() อีกครั้ง ซึ่งจะเรียกเมธอด getRows() ของฉัน

แถวใหม่ใน tableselect ที่ส่งคืนโดยใช้แนวทางนี้มีอยู่ใน $Form และ $form_state จะแสดงรายการที่เลือก