Drupal7:在表单API中触发外部的AJAX回调

在Nutshell中：

我试图通过jQuery触发一个外部事件，从而在Drupal表单上执行AJAX回调。这将重建几个连锁元素。它工作一次，但随后中断，直到Drupal中的另一个元素刷新表单。

form_state在第一次尝试时检测到合适的元素作为触发元素，但在那之后默认为form_state[‘buttons’]数组中的第一个可用按钮。有什么想法吗？

详细信息：

我有一个复杂的Drupal表单，看起来像这样：

A（下拉）

B（实际上是B_key和B_literal，两个文本字段）C（下拉菜单）D（下拉菜单）E（下拉）

其中A刷新B，B刷新C，C刷新D，依此类推。除B外，每个元素都是下拉式元素。每个项都是一个key=>值对，我们使用该键来重建它刷新的元素中的选项。因此，B的密钥刷新了C中的选项，因为C的密钥用于D的选项。

这些完全是作为DrupalAJAX回调构建的，并且可以正常工作。但是，B不是一个选择，而是两个单独的文本字段，1个是键，1个为文字。我们这样做是为了对B进行AJAX自动完成查找，因为列表太大，无法使用select元素。

我已经编写了一个外部jQuery脚本，用于执行此查找，并填充这两个字段（B_key和B_literal）。一旦我们填充它们，我们就会触发一个自定义事件，由文件的"ajax"=>"event"=>"hs_changed"引用，我们在jQuery中用jQuery（"[name=b_literal]'）.trigger（）手动触发它。这在我第一次这样做时起作用，导致C用一组新的选项重新生成。

然而，一旦这种情况发生一次，它就不再重建。我追踪了form_state，注意到当为B选择一个新值时，表单状态会认为某个按钮被点击了（以form_state['buttons']数组中的第一个按钮为准），导致此操作失败。

现在，当我重新加载A时，它通常有一个预设的B值，所以所有子字段（B、C、D、E）都会正确刷新。一旦发生这种情况，我就可以再次手动选择B，它就像写过的一样工作，如果我们再试一次，就会失败。需要注意的是，我的jQuery没有绑定问题，因为它仍然能够找到B的字段，并更新了值。它手动触发自定义事件（触发drupal字段的ajax），每次触发后都会失败。

这是我们的代码：

形式：

$form['a'] = array (
  '#type' => 'select',
  '#options' => $a_options,
  '#default_value' => $a_selected,
  '#required' => TRUE,
  '#prefix' => '<div id="a_wrapper">',
  '#suffix' => '</div>',
  '#ajax' => array(
    'callback' => 'a_ajax_callback',
    'method' => 'replace',
    'effect' => 'fade',
  ),
);
$form['b_key'] = array (
  '#type' => 'textfield',
  '#default_value' => $hierarchy['b_key'],
);
$form['b_literal'] = array (
  '#type' => 'textfield',
  '#default_value' => $hierarchy['b_literal'],
  '#size' => 32,
  '#required' => TRUE,
  '#ajax' => array(
    'callback' => 'b_ajax_callback',
    'method' => 'replace',
    'effect' => 'fade',
    'event' => 'hs_changed',
  ),
  '#prefix' => '<div id="b_wrapper">',
  '#suffix' => '</div>',
);
$form['c'] = array (
  '#type' => 'select',
  '#default_value' => $hierarchy['c'],
  '#empty_option' => '- Select -',
  '#options' => get_children_options_array($hierarchy['b_key'], TRUE),
  '#ajax' => array(
    'callback' => 'c_ajax_callback',
    'method' => 'replace',
    'effect' => 'fade',
  ),
  '#required' => TRUE,
  '#prefix' => '<div id="c_wrapper">',
  '#suffix' => '</div>',
);
//Assume D and E are identical to C

回调：

 function a_ajax_callback($form, &$form_state) {
   //Return the field to be rebuilt by the AJAX request  $commands = array();
   $commands[] = ajax_command_replace("#b_key_wrapper", render($form['b_key']));
   $commands[] = ajax_command_replace("#b_literal_wrapper", render($form['b_literal']));
   //We also unset a bunch of form_state['input'] values and such here
   return array('#type' => 'ajax', '#commands' => $commands);
 }
 //The b_ajax_callback and c_ajax_callback are pretty much identical

jQuery:

jQuery(document).on("focus", '[name=my_search]:not(.ui-autocomplete-input)', function() { 
  jQuery(this).autocomplete({
    source: function(req, res) {
      ch_search(req, res);
    },
    minLength: 3,
    select: function(event, ui) {
      ch_render_dropdowns(ui.item.id);
    }
  }); 
});
function ch_render_dropdowns(ch_node) {
  var token = jQuery('[name=ajax_token]').val();
  jQuery.ajax({
    url: '/ajax/myFunction/' + ch_node
    async: false,
    cache: false,
    data: {
      'token': token
    },
    success: function(data) {
      jQuery('#autoComplete_logic').html(data);
      jQuery('#autoComplete_logic').hide();
      // Once we have the initial results, fill in the d7 form fields
      // where we have values.
      var b_key = jQuery("#b_key").val();
      var b_name = jQuery("#b_literal").text();
      // Set our Drupal B Fields
      jQuery('[name=b_key]').val(b_key);
      jQuery('[name=b_literal]').val(b_name);
      //Trigger the refresh of all submenus in Drupal
      //This triggers the AJAX callback attached to the b_literal 
      //to rebuild c, d, and e.
      jQuery('[name=b]').trigger('hs_changed');
    }
  });
}

我把所有的事情都简化了，因为有很多逻辑超出了这个问题的范围。自动完成不是问题所在。触发b_literal字段的附加Drupal AJAX以激活，导致c、d和e的刷新，在第一次之后不起作用，除非我们点击字段a，该字段通过Drupal的Form API AJAX逻辑在内部刷新了b、c、d、e。

Form_state（第一次正确执行）:

[triggering_element]=>数组([#type]=>文本字段[#title]=>B[#描述]=>[#default_value]=>[#size]=>32[#最大长度]=>255[#必需]=>1[#disabled]=>[#ajax=>数组([回调]=>b_ajax_callback[方法]=>替换[效果]=>渐变[事件]=>hs_changed)

        [#prefix] => <div id="b_literal_wrapper">
        [#suffix] => </div>
        [#input] => 1
        [#autocomplete_path] => 
        [#process] => Array
            (
                [0] => ajax_process_form
            )
        [#theme] => textfield
        [#theme_wrappers] => Array
            (
                [0] => form_element
            )
        [#pre_render] => Array
            (
                [0] => ctools_dependent_pre_render
            )
        [#defaults_loaded] => 1
        [#tree] => 
        [#parents] => Array
            (
                [0] => b
            )
        [#array_parents] => Array
            (
                [0] => b
            )
        [#weight] => 0.002
        [#processed] => 
        [#attributes] => Array
            (
            )
        [#title_display] => before
        [#id] => edit-b--4
        [#name] => b_literal
        [#value] => 
        [#needs_validation] => 1
    )

Form_state（第二次执行不正确，之后每次执行都不正确）:

我认为使用jquery自动完成时会出现问题。不使用Drupal 7 Form API中的#autocomplete_path Given，或者使用以下链接，它可能会解决您的问题#autocomplete_path

相关内容

最新更新

热门标签：