在Drupal7中为动态加载的表单添加AJAX功能


Adding AJAX functionality to dynamically loaded form in Drupal 7

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

我知道如何将AJAX功能添加到表单中,加载页面。但是动态加载的表单没有AJAX功能。单击链接以分离div后加载表单。当我单击"保存"按钮时,表单可以工作,但页面会重新加载,而不是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);

我找到了问题的原因。若我们通过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提交。