Question

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

我知道如何在表单中添加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);

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提交。

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

1 个答案: