How to add 'Delete' button using Ajax to a form themed as a table

By amirn on 7 May 2011 at 09:44 UTC

Hi,
I've created a form and themed it as a table using D7 form API.
I want to add a 'delete' button to each row that will remove the row on which the button was clicked (via Ajax - w/o page refresh).

My problem is: how to determine inside the Ajax callback function which row was clicked?
Each row had a unique id, each button has a unique name and id, I can see in the $form_state that there is an entry called: "_triggering_element_name" which contains the name of the clicked button, but somehow it doesn't seem to be a the correct way to do it...

some code:

// form build 
function form_build {
  ...
  for ($i ... ) {
    $form['items']["delete$i"] = array(
      '#type' => 'submit',
      '#name' => "remove$i",
      '#value' => t('Delete'),
      '#submit' => array('myform_del_item'),
      '#ajax' => array(
        'callback' => 'mymodule_form_callback_items',
        'wrapper' => 'item-div',
        'effect' => 'fade',
        'progress' => array('type' => 'none'),
      ),
    );
  }
}

/**
 * only select the portion of the form to be updated.
 */
function mymodule_form_callback_items($form, $form_state) {
  return $form['items'];
}

/**
 * Submit handler for the "delete" button.
 */
function myform_del_item($form, &$form_state) {
  // 1. get row id / button id ???
  // 2. delete row
  $form_state['rebuild'] = TRUE; // force rebuilt the form
}

Any help is appreciated,
Thanks.

Comments

Same question here

neutecake commented 26 May 2011 at 11:23

Same question here

Here is one option of doing

amirn commented 26 May 2011 at 12:41

Here is one option of doing it:

for ($i ..) {
    $form[...]
    $form['items']["delete$i"] = array(
      '#type' => 'submit',
      '#name' => "remove$i",
      '#value' => t('Delete'),
      '#indx' => $i, // index for deletion
      '#submit' => 'dummy_del_item',
      '#ajax' => array(
        'callback' => 'mymodule_del_item_callback',
        'progress' => array('type' => 'none'),
      ),
    );
  }


function mymodule_del_item_callback($form, &$form_state) {
  $indx = $form_state['triggering_element']['#indx'];
  // some server side delete logic in here if needed
  $selector = "#items_del_".$indx;
  $commands = array();
  $commands[] = ajax_command_remove($selector);
  return array('#type' => 'ajax', '#commands' => $commands);
}

// I've added the ID for each row in my table theme function:
...
$rows[] = array('data' => $row, 'id' => 'items_del_' . $i);
...

how do initialise the variable $row

nikathone

Swahili

Ontario

commented 23 April 2013 at 18:23

Hi amirn,

I've tried what you suggested but my button is deleting one item at a time. for example if I have a two text fields and a button on a row, it will delete first the text field in column one then the next one then the button. I think may it's the way I initialise my rows which might be wrong. Can you please show me how did you initialise the variable $row with the textfield.

Thank you