Drupal9 Ajax Form使用小技巧

这几天使用drupal的ajax form，因为第一次使用，本身对drupal也不熟，着实把我弄得够呛，摸索着总算搞定了，记录并分享一下使用心得，有错请指正！
1、表单按钮的处理，因为是ajax，那么自然不能使用type=‘submit’的按钮，我这里根据需求做了三个按钮，一个是span的，作为显示和用户点击的，第二个是button的，是触发ajax的，第三个是submit的，触发真正的表单提交。这里踩了两个坑，详见：https://editor.csdn.net/md/?articleId=121329201
2、这里有个 ‘#validate’ => [’::noValidate’],如果不想使用drupal自带的表单验证，就加这个，同样如果不想使用表单自带的提交，可以使用 ‘#submit’ => [’::noSubmit’], noValidate和noSubmit是对应的方法名，下面有代码：

$form['actions']['button'] = ['#type' => 'button','#value' => t('Popup Submit'),'#validate' => ['::noValidate'],'#attributes' => ['class' => ['hide', 'button-popup']],'#prefix' => '<span class="button button-show-popup">' . t('Submit') . '</span>','#ajax' => ['callback' => [$this, 'requestFormPopupAjax'],'event' => 'click',],];

  public function noValidate(array &$form, FormStateInterface $form_state) {// Clear all validation errors.$form_state->clearErrors();}public function noSubmit(array &$form, FormStateInterface $form_state) {// Do nothing.}

3、使用ajax form的时候一定要在表单前面加下面这句，不然不会生效。

$form['#attached']['library'][] = 'core/drupal.dialog.ajax';

4、在回调中可以判断系统自带的validate是否有错误，根据错误自定义判断处理。
PS1：这里的 #weight 是表示错误消息显示的位置，数字越低就越往上。
PS2：response−>addCommand(newHtmlCommand(response->addCommand(new HtmlCommand(response−>addCommand(newHtmlCommand(selector, form));这里的form)); 这里的form));这里的selector是选择器，因为在一个表单有多处错误的时候他会全部显示出来，所以drupal的这个方法是替换整个表单，这里的selector就应该是表单外层的div的ID或者class（保证唯一），当然这里的selector就应该是表单外层的div的ID或者class（保证唯一），当然这里的selector就应该是表单外层的div的ID或者class（保证唯一），当然这里的form也可以换成自定义的错误提示，纯文本或html代码都可以。另外HtmlCommand这里可以换成很多其他的Command类，比如替换，插入等等，网上搜一下很好查。
PS3：因为AJAX的返回是不需要刷新页面的，所以页面很长的时候，如果错误在最上面，页面是不会自己跳上去的，这里可以使用 KaTeX parse error: Expected 'EOF', got '#' at position 43: …directCommand(‘#̲xxx’));#表示ID选择器…form_state->setErrorByName()添加的错误消息不会再页面上显示

 $errors = $form_state->getErrors();if ($errors) {$form['status_messages'] = ['#type' => 'status_messages','#weight' => -10,];$response->addCommand(new HtmlCommand('#block-ixtend-content', $form));}

5、Ajax可以做弹窗，$content一般是block

     $content = \Drupal::service('plugin.manager.block')->createInstance('register_password_popup_block', ['data' => 'Thank you for your registration.'])->build();$response->addCommand(new OpenModalDialogCommand('',$content,['width' => '700','dialogClass' => 'register-reset-password-popup','closeOnEscape' => FALSE,]));

Drupal9 Ajax Form使用小技巧相关推荐

oracle ebs form 计算汇总公式,Oracle+EBS+Form开发小技巧汇总
oracle form开发的技巧 content Oracle EBS Form开发小技巧汇总 ..................................... 2 Form中Block的重 ...
[转]40种网页常用小技巧----Ajax中国
1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border οncοntextmenu ...
不用AJAX实现前台JS调用后台C#方法(小技巧)
纯属小技巧,高手见笑了. 一提到如何在前台JS调用后台C#方法,AJAX成为了必然的想法. 只是实现的细节采用AJAX 1.0或者AjaxPro的区别. 其实如果不用AJAX,我们也能够很方便地利用J ...
前端html小技巧（form篇）：复选框、单选按钮的使用
今天分享下"前端html小技巧(form篇):复选框.单选按钮的使用"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南 ...
小程序通过 ajax读取的图片数据如何展示_一个常被忽略的intouch的小技巧—鼠标悬停...
JZGKCHINA工控技术分享平台经常看到网上的大数据采集平台,平台的前端都是采用H5编写,熟悉H5技术的人应该都知道,H5主要是负责编写前台页面,炫酷的网站页面交互特效.3D效果都离不开H5.但是作 ...
日常安排php,PHP日常开发小技巧
PHP日常开发小技巧导语:PHP语言中,如果你懂得一些开发技巧,那么对你学PHP,会有很大的帮助.下面的是百分网小编为大家整理的PHP日常开发小技巧,希望对你能有所帮助. PHP批量取得checkb ...
SharePoint 2010自定义母版页小技巧——JavaScript和CSS引用
通常在我们的项目中,都会涉及到母版页的定制.并且必不可少的,需要配合以一套自己的JavaScript框架和CSS样式. 你有没有遇到过这样的情况呢,在开发环境和UAT时都还算顺利,但是当最终部署到生产 ...
javascript开发技巧训练_学好这些小技巧，帮你写出更好地JavaScript
近几年来随着前端发展的日益成熟,JavaScript的日渐受到重视,以及Node.js方案变得越来越可行,我们对JavaScript程序员的需求也正在持续增长. 图片源自网络,仅做配文展示从需求比例 ...
JavaScript 编码小技巧
三元操作符如果使用if...else语句,那么这是一个很好节省代码的方式. Longhand: const x = 20; let answer; if (x > 10) {answer = ...

Drupal9 Ajax Form使用小技巧

Drupal9 Ajax Form使用小技巧相关推荐

最新文章

热门文章