将 AJAX 功能添加到 Drupal 7 中的动态加载表单

Question

我正在尝试添加 ajax 提交到 Drupal 7 中的动态加载表单。

我知道如何向表单添加 AJAX 功能，加载页面。但是动态加载的表单没有 AJAX 功能。单击 link 分隔 div 后将加载表单。当我单击 "save" 按钮时，表单有效，但页面重新加载而不是 ajax 操作。我做错了什么？

PHP:

function fae_menu() {

$items['fae_edit'] = array(
  'title' => t('FAE Edit'),
  'page callback' => 'fae_get_node_form',
  'access arguments' => array('access content'),
  'type' => MENU_CALLBACK,
);

return $items;
}

function fae_get_node_form($nid = 0, $field_name = '') {

if (!$nid) {
    $nid = $_GET['nid'];
}
if (!$field_name) {
    $field_name = $_GET['field_name'];
}
module_load_include('inc', 'node', 'node.pages');
$ret = '';

$node = node_load($nid);

$node->this_field_only = $field_name;
$node->hidesubmit = false;
$form = drupal_get_form($node->type . '_node_form', $node);
$ret.=render($form);
print $ret;
//  return $ret; // if I view this form as a separate page AJAX works normally
}

function fae_form_alter(&$form, &$form_state, $form_id) {
module_load_include('inc', 'node', 'node.pages');

if (isset($form['#node']) && $form_id == $form['#node']->type . '_node_form') {
    if (!isset($form_state['build_info']['files'])) {
        $form_state['build_info']['files'] = array("menu" => "modules/node/node.pages.inc");
    }

    if (isset($form['#node']->this_field_only) && $form['#node']->this_field_only) {

        $excludes = array();
        $excludes[] = $form['#node']->this_field_only;
        $types_exclude = array('value', 'hidden', 'actions', 'token');


        foreach ($form as $key => $val) {

            if (strpos($key, '#') !== 0) {
                $tounset = true;
                foreach ($excludes as $exclude) {
                    if ($key == $exclude) {
                        $tounset = false;
                    }
                }
                foreach ($types_exclude as $type) {
                    if ($form[$key]['#type'] == $type) {
                        $tounset = false;
                    }
                }

                if ($tounset) {
                    //   unset($form[$key]);
                    $form[$key] = array('#language' => NULL); //I use this instead unset to prevent notices from Locale module
                }
            }
        }
        $form['#submit'][] = 'fae_node_form_edit_submit';


        $form['actions']['submit']['#ajax'] = array(
          'callback' => 'fae_ajax_callback',
          'effect' => 'fade',
          'wrapper' => 'task-node-form',
          'event' => 'click',
          'progress' => array('message' => '', 'type' => 'throbber'),
        );


        if (isset($form['#node']->hidesubmit) && $form['#node']->hidesubmit) {
            $form['actions']['#attributes']['class'][] = 'element-invisible';
        }
    }     
}
}

function fae_node_form_edit_submit($form, &$form_state) {

$form_state['rebuild'] = TRUE;
//   $form_state['redirect'] = FALSE; // I don't know if I need to enable this
}


function fae_ajax_callback($form, $form_state) {

return 'test callback';
}

Javascript:

(function ($) {

Drupal.behaviors.fae = {
    attach: function (context, settings) {

        $('.fae-editable-original').click(function () {
            var nid = $(this).parent().data('nid');
            var field = $(this).parent().data('field');

            var thisedit = $(this).parent().find('.fae-editable-edit');


            $.get('/fae_edit', {
                nid: nid,
                field_name: field
            }).success(function (data) {

                //$(thisedit).html(data);
                var newform = $(data).appendTo(thisedit);
                Drupal.attachBehaviors();
            });
        });
    }
};


})(jQuery);

Answer 1

我找到了问题的原因。如果我们通过 AJAX 加载表单，则页面上不会包含 ajax 和 jquery 表单。因此，如果我们想动态加载 AJAX 表单，我们需要在页面中包含 ajax.js 和 jquery.form.js。

drupal_add_js('misc/ajax.js');
drupal_add_js('misc/jquery.form.js');

我们还需要将行为附加到新表单并通过 jquery.form

处理它

Drupal.attachBehaviors('#our-form-id');
$('#our-form-id').ajaxForm();

此更改后，我们的动态加载表单可以很好地处理 AJAX 提交。

将 AJAX 功能添加到 Drupal 7 中的动态加载表单

Adding AJAX functionality to dynamically loaded form in Drupal 7

php

forms

ajax

drupal

drupal-7