Drupal 7取代Texfield失去了Ajax功能

Question

我在drupal 7中的ajax功能有一些问题。当我使用ajax命令替换函数替换表单textfield时，它会失去其ajax功能。

示例：

形式构建：

function ds_check_post_new_data_import($form, &$form_state) {
    $form['txt1'] = array(
        '#type' => 'textfield', 
        '#size' => 2,
        '#value' => "val1", 
        '#name' => "txt1",
        '#ajax' => array(
            'callback' => 'ajax_test_callback2',
        ),
        '#prefix' => '<div id="txt1">',
        '#suffix' => '</div>',
    );
    $form['txt2'] = array(
        '#type' => 'textfield', 
        '#size' => 2,
        '#value' => "val2",  
        '#name' => "txt2",
        '#ajax' => array(
            'callback' => 'ajax_test_callback2',
        ),
        '#prefix' => '<div id="txt2">',
        '#suffix' => '</div>',
    );
    return $form;
}

ajax回调：

function ajax_test_callback2($form, &$form_state) {
    $form['txt1'] = array(
        '#type' => 'textfield', 
        '#size' => 2,
        '#value' => "ajaxed1", 
        '#name' => "txt1",
        '#ajax' => array(
            'callback' => 'ajax_test_callback2',
        ),
        '#prefix' => '<div id="txt1">',
        '#suffix' => '</div>',
    );
    $form['txt2'] = array(
        '#type' => 'textfield', 
        '#size' => 2,
        '#value' => "ajaxed2",  
        '#name' => "txt2",
        '#ajax' => array(
            'callback' => 'ajax_test_callback2',
        ),
        '#prefix' => '<div id="txt2">',
        '#suffix' => '</div>',
    );
    return array(
        '#type' => 'ajax',
        '#commands' => array(
            ajax_command_replace("#txt1", render($form['txt1'])),
            ajax_command_replace("#txt2", render($form['txt2']))
        )
    );
}

现在，当我更改第一个Textfield中的值时，都可以替换，这很好。但是当我再次更改值时，Ajax功能就消失了。

有人遇到了同样的问题？

问我为什么要这样做：

实际上我有一个自定义表主题，可以呈现一些行，而在每一行中都有三个文本字段（用自定义主题表渲染。当用户在第一个文本框中更改某些内容时，必须根据输入的值更改其他两个内容。然后，当用户更改第二个TextField中的值时，必须更新其他两个。

感谢您的阅读：）

Answer 1

您应该在形式构建函数中进行所有构建的表单。在调用AJAX回调时包括任何更改。

function ds_check_post_new_data_import($form, &$form_state) {
    $form['wrap'] = array(
        '#markup' => '',
        'prefix' => '<div id="field-wrapper">',
        'suffix' => '</div>',
    );
    $form['wrap']['txt1'] = array(
        '#type' => 'textfield', 
        '#size' => 2,
        '#value' => "val1", 
        '#name' => "txt1",
        '#ajax' => array(
            'callback' => 'ajax_test_callback2',
            'wrapper' => 'field-wrapper',
        ),
    );
    $form['wrap']['txt2'] = array(
        '#type' => 'textfield', 
        '#size' => 2,
        '#value' => "val2",  
        '#name' => "txt2",
        '#ajax' => array(
            'callback' => 'ajax_test_callback2',
            'wrapper' => 'field-wrapper',
        ),
    );
    // Here check if it has been called via ajax, check something in
    // $form_state, I forget what.
    // Its something like $form_state['submitted'] or $form_state['input']
    // If true, set values
    if (ajax called) {
        $form['wrap']['txt1']['#value'] = 'ajaxed1';
        $form['wrap']['txt2']['#value'] = 'ajaxed2';
    }
    return $form;
}
function ajax_test_callback2($form, &$form_state) {
    // return the element that contains both testfields.
    // no need to create a $command, it defaults to replace.
    return $form['wrap'];
}

我不确定您为什么要从两个Textfields调用相同的回调函数，因此我将举一个示例，他们每个人都调用自己的功能

function ds_check_post_new_data_import($form, &$form_state) {
    $form['txt1'] = array(
        '#type' => 'textfield', 
        '#size' => 2,
        '#value' => "val1", 
        '#name' => "txt1",
        '#ajax' => array(
            'callback' => 'ajax_test_callback1',
            'wrapper' => 'txt1',
        ),
        '#prefix' => '<div id="txt1">',
        '#suffix' => '</div>',
    );
    $form['txt2'] = array(
        '#type' => 'textfield', 
        '#size' => 2,
        '#value' => "val2",  
        '#name' => "txt2",
        '#ajax' => array(
            'callback' => 'ajax_test_callback2',
            'wrapper' => 'txt2',
        ),
        '#prefix' => '<div id="txt2">',
        '#suffix' => '</div>',
    );
    // Here check if it has been called via ajax, check something in
    // $form_state, I forget what.
    // Its something like $form_state['submitted'] or $form_state['input']
    // If true, set values
    if (ajax called on first field) {
        $form['txt1']['#value'] = 'ajaxed1';
    }
    if (ajax called on second field) {
        $form['txt2']['#value'] = 'ajaxed2';
    }
    return $form;
}
function ajax_test_callback1($form, &$form_state) {
    // no need to create a $command, it defaults to replace.
    return $form['txt1'];
}
function ajax_test_callback2($form, &$form_state) {
    // no need to create a $command, it defaults to replace.
    return $form['txt2'];
}

注意：这些是未经测试的，但是您得到了想法

Answer 2

如果您实际上替换了将JS事件绑定到其的元素，则需要在替换后重新启动事件。当Ajax碰巧替换页面上的元素时，Drupal具有一个很好的行为系统，可以专门处理它。如果您在其中有自定义JS（听起来像您这样做），请确保如果替换了元素，则事件会反弹。