首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在Drupal 7中向动态加载的表单添加AJAX功能

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

Stack Overflow用户
提问于 2015-02-21 17:49:09
回答 1查看 2.8K关注 0票数 0

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

我知道如何向表单中添加AJAX功能,并加载了页面。但是动态加载的表单没有AJAX功能。单击链接到单独的div后,表单将加载。当我单击“保存”按钮时,表单可以工作,但是页面重新加载而不是ajax操作。我做错什么了?

PHP:

代码语言:javascript
复制
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:

代码语言: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);
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-02-22 06:55:15

我找出了问题的原因。如果通过AJAX加载表单,页面上就没有ajax和jquery表单。因此,如果我们假设动态加载AJAX表单,则需要将ajax.js和jquery.form.js包含到页面中。

代码语言:javascript
复制
drupal_add_js('misc/ajax.js');
drupal_add_js('misc/jquery.form.js');

此外,我们还需要将行为附加到新表单上,并通过jquery.form进行处理。

代码语言:javascript
复制
Drupal.attachBehaviors('#our-form-id');
$('#our-form-id').ajaxForm();

在这一变化之后,我们的动态加载表单可以很好地处理AJAX提交。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28649083

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档