how to resolve ajax call once issue

Question

Drupal code

function form_example_form($form, &$form_state)
{

    drupal_add_js(drupal_get_path('module', 'form_example') . '/js/test.js');

    $form['price_form'] = array(
        '#type' => 'fieldset',
        '#title' => t('Add Item'),
    );

    $form['price_form']['item'] = array(
        '#type' => 'textfield',
        '#title' => 'Item Name?',
        '#size' => 10,
        '#maxlength' => 25,
        '#required' => TRUE,
        '#ajax' => array(
            // #ajax has two required keys: callback and wrapper.
            // 'callback' is a function that will be called when this element changes.
            'callback' => 'form_example_simplest_callback',
            'wrapper' => 'listDiv',
            'effect' => 'fade',
        ),
    );

    $form['price_form']['textfields'] = array(
        '#prefix' => '<div id="listDiv">',
        '#suffix' => '</div>',
        '#markup' => '',
    );

    $form['price_form']['price'] = array(
        '#type' => 'textfield',
        '#title' => 'Item Price?',
        '#size' => 10,
        '#maxlength' => 10,
        '#required' => TRUE,
    );

    $form['price_form']['submit_button'] = array(
        '#type' => 'submit',
        '#value' => t('Click Here!'),
    );
    if (!empty($form_state['values']['item'])) {
        $result = db_query("SELECT * FROM {item} where item_name='" . $form_state['values']['item'] . "'");
        if ($result->rowCount() != 0) {
            $form['price_form']['textfields'] = array(
                '#markup' => 'Already exist',
            );
        } else {
            $form['price_form']['textfields'] = array(
                '#markup' => 'New Item',
            );
        }
    }

    return $form;
}

function form_example_simplest_callback($form, $form_state)
{
    return $form['price_form']['textfields'];
}

On blur of item textfield,I am showing status of item whether item_name exist in database or not.But It is showing perfectly for first time.

As it replaces a form name with 'form_name-2' after first ajax callback,it is not working afterwards.

How can I resolve this issue?

Thanks in advance

Answer 1

The problem is that you set your wrapper div in $form['price_form']['textfields'], but in the AJAX callback you are replacing it with the $form['textfields'] that does not have it defined. To be safe, keep these guidelines:

1. Never use the same identifier at 2 different depths of an form array, as it leads to mistakes. Be sure to set '#tree' => TRUE if you need to use identifier twice, to avoid conflicts.
2. In AJAX callback always return the same element you set '#prefix' => '<div id="..."> on.

3. Be sure to only define each element once. If you are using

   $form['price_form']['textfields'] = array(
     '#prefix' => '<div id="listDiv">',
     '#suffix' => '</div>',
     '#markup' => '',
   );
   

   to define element, don't reset it with $form['price_form']['textfields'] = array( later in code. Using array() creates new empty array effectively deleting everything set earlier. Write directly to it's members like this:

   $form['price_form']['textfields']['#markup'] = t('Already exist');
   

Of course they are not set in stone, but don't break them unless you know why and what you're doing. In your case, you have 'textfields' twice, you are setting wrapper on one and returning another. That's why it only works once. Second time there is no element FAPI's AJAX is supposed to replace.