如何将确认添加到Ajax链接? -- 7 领域 和 ajax 领域 和 navigation 领域 drupal 相关 的问题

How to add confirmation to ajax link?


8
vote

问题

中文

我正在渲染ajax链接,如下所示:

  l(t('Click here'), 'mypath', array('attributes' => array('id' => 'my-id', 'class' => array('use-ajax'))));   

如何在调用ajax请求之前显示确认对话框?

我这样做在Javascript中,就像我在此帖子:

    Drupal.behaviors.module = { attach: function() {     Drupal.ajax['my-id'].beforeSerialize = function () {          if(confirm('Are you sure?'))           return true;       else           return false;    }  } }   

当我单击链接时,不会调用ajax请求,但会出现对话框。没关系。问题是,在确认对话框中单击"取消" 后,在关闭确认对话框后调用ajax请求。

可以帮助,如何获取确认对话框?

英文原文

I am rendering ajax link as follows:

l(t('Click here'), 'mypath', array('attributes' => array('id' => 'my-id', 'class' => array('use-ajax')))); 

How to display confirmation dialog before ajax request is called?

I do it as follows in javascript, like I have found on this thread:

  Drupal.behaviors.module = { attach: function() {     Drupal.ajax['my-id'].beforeSerialize = function () {          if(confirm('Are you sure?'))           return true;       else           return false;    }  } } 

When I click on link, ajax request is not called but the dialog appears. It is ok. The problem is, that after I click "Cancel" in confirmation dialog, Ajax request is then called after closing the confirmation dialog.

Can anybody help, how to get the confirmation dialog work?

        
       
       

回答列表

4
 
vote

我不认为这是你直接与drupal的ajax对象搞乱的最好方法。

这样做的最佳方法,是基本上写自己的点击处理程序并自己处理确认,然后触发Drupal Ajax称自己。

这是一个例子:

  l(t('Click here'), 'mypath', array('attributes' => array('id' => 'my-id', 'class' => array('toms-ajax'))));   

在您的js文件中:

  (function($) {  Drupal.behaviors.tomsAjaxLinks = {   attach: function(context, settings) {     $('.toms-ajax',context).once('toms-ajax').on('click', this.handleAjax);   },   handleAjax: function(e) {     // Cache the anchor link     var $element = $(this);      // We need some unique id, either ID of link or create our own     var nowStamp = new Date().getTime() + Math.floor(Math.random() * (1000 - 0) + 0);     var base = $element.attr('id') || 'toms-ajax-'+ nowStamp;      // Change the event type to load, so we can trigger it ourselves     var drupal_ajax_settings = {       url : $element.attr('href'),       event : 'load',       progress : {         type: 'throbber',         message : '',       }     };      // Create the ajax object     Drupal.ajax[base] = new Drupal.ajax(base, this, drupal_ajax_settings);      // Your confirmation code e.g. Jquery UI Dialog or something     // Open dialog     if(yes) {       $element.trigger('load');     } else {       // Dont trigger ajax     }   } };   })(jQuery);   

基本上这是什么:

  1. 将handleajax函数附加到您的".toms-ajax" 链接中,以确保我们不附加多个事件处理程序
  2. 单击
  3. ,handleajax函数称为
  4. 使用它自己的唯一ID创建相应的Drupal Ajax对象。 它附加到链接并在事件"加载" 上触发。然后是你 处理确认框。
  5. 如果确认框确认ajaxcall,我们只需触发链接对象上的"加载" 事件,因此使Drupal Ajax对象执行它。
 

I don't think this is the best way to go about it as you are messing directly with Drupal's Ajax object.

The best way to do this, is to basically write your own click handler and handle the confirmation yourself, then trigger a Drupal AJAX call yourself.

Here is an example:

l(t('Click here'), 'mypath', array('attributes' => array('id' => 'my-id', 'class' => array('toms-ajax')))); 

In your js file:

(function($) {  Drupal.behaviors.tomsAjaxLinks = {   attach: function(context, settings) {     $('.toms-ajax',context).once('toms-ajax').on('click', this.handleAjax);   },   handleAjax: function(e) {     // Cache the anchor link     var $element = $(this);      // We need some unique id, either ID of link or create our own     var nowStamp = new Date().getTime() + Math.floor(Math.random() * (1000 - 0) + 0);     var base = $element.attr('id') || 'toms-ajax-'+ nowStamp;      // Change the event type to load, so we can trigger it ourselves     var drupal_ajax_settings = {       url : $element.attr('href'),       event : 'load',       progress : {         type: 'throbber',         message : '',       }     };      // Create the ajax object     Drupal.ajax[base] = new Drupal.ajax(base, this, drupal_ajax_settings);      // Your confirmation code e.g. Jquery UI Dialog or something     // Open dialog     if(yes) {       $element.trigger('load');     } else {       // Dont trigger ajax     }   } };   })(jQuery); 

Essentially what this does is:

  1. Attaches the handleAjax function to your ".toms-ajax" links once to ensure we do not attach multiple event handlers
  2. On click, the handleAjax function is called
  3. A corresponding Drupal Ajax object is created with it's own unique ID. It is attached to the link and triggered on the event 'load'. You then handle the confirmation box.
  4. If the confirmation box confirms the ajaxcall, we simply trigger the 'load' event on the link object and therefore make the Drupal AJAX object do it's thing.
 
 
3
 
vote

基于@jnpwebdeveloper答案,但有一些变化:

  • 支持将事件重新附加到通过ajax加载的内容。
  • 支持来自 data
  • 的属性。
  • 代码是制作准备的(无需更改任何变量等)。

ajax-confirm-link.js

  /**  * @file  * Handling of AJAX links with a confirmation message.  *  * @code  * <a href="custom/nojs/path" class="use-ajax-confirm">Link with default message</a>  * <a href="custom/nojs/path" class="use-ajax-confirm" data-use-ajax-confirm-message="Please confirm your action">Link with custom message</a>  * @endcode  */  /*global jQuery, Drupal*/  (function ($) {   'use strict';   Drupal.behaviors.ajaxConfirmLink = {     attach: function (context, settings) {       $('.use-ajax-confirm').filter('a').once('use-ajax-confirm').on('click', function (event) {         var $this = $(this);         // Allow to provide confirmation message in         // data-use-ajax-confirm-message element attribute.         var message = $this.data('use-ajax-confirm-message') || Drupal.t('Are you sure you want to do this?');          if (confirm(message)) {           // Create ajax event only if action was confirmed.           var id = $this.attr('id');           // Generate unique id, if the element does not already have one.           if (!id || id.trim() == '') {             id = 'use-ajax-confirm' + new Date().getTime() + Math.floor(Math.random() * 1000);             $this.attr('id', id);           }            Drupal.ajax[id] = new Drupal.ajax(id, this, {             // 'nojs' to 'ajax' replacement in path performed by Drupal.ajax().             url: $this.attr('href'),             event: 'load.use-ajax-confirm'           });            $this.trigger('load.use-ajax-confirm');         }          return false;       });     }   }; }(jQuery));   
 

Based on @jnpWebDeveloper answer, but with some changes:

  • Support for re-attaching events to content loaded via ajax.
  • Support for custom message from data attribute of the element.
  • Code is production-ready (no need to change any variables etc.).

ajax-confirm-link.js

/**  * @file  * Handling of AJAX links with a confirmation message.  *  * @code  * <a href="custom/nojs/path" class="use-ajax-confirm">Link with default message</a>  * <a href="custom/nojs/path" class="use-ajax-confirm" data-use-ajax-confirm-message="Please confirm your action">Link with custom message</a>  * @endcode  */  /*global jQuery, Drupal*/  (function ($) {   'use strict';   Drupal.behaviors.ajaxConfirmLink = {     attach: function (context, settings) {       $('.use-ajax-confirm').filter('a').once('use-ajax-confirm').on('click', function (event) {         var $this = $(this);         // Allow to provide confirmation message in         // data-use-ajax-confirm-message element attribute.         var message = $this.data('use-ajax-confirm-message') || Drupal.t('Are you sure you want to do this?');          if (confirm(message)) {           // Create ajax event only if action was confirmed.           var id = $this.attr('id');           // Generate unique id, if the element does not already have one.           if (!id || id.trim() == '') {             id = 'use-ajax-confirm' + new Date().getTime() + Math.floor(Math.random() * 1000);             $this.attr('id', id);           }            Drupal.ajax[id] = new Drupal.ajax(id, this, {             // 'nojs' to 'ajax' replacement in path performed by Drupal.ajax().             url: $this.attr('href'),             event: 'load.use-ajax-confirm'           });            $this.trigger('load.use-ajax-confirm');         }          return false;       });     }   }; }(jQuery)); 
 
 
0
 
vote

如果检查drupal"ajax.js" 文件,链接进程是一个特例。

对"drupal.ajax.prototype.beforeserialize" 表示,如果不是表单,则永远不会调用该函数。

在这种情况下,在jQuery AJAX呼叫之前使用"选项.Beforeserize" 。 因此,如果您在此处执行确认,则可以单击"确定" 或"取消" ,将始终触发AJAX呼叫。

但如果过载"选项" 函数,也许您的确认框应该工作,因为如果该函数返回false,则取消Ajax呼叫(jQuery doc: http://api.jquery.com/jquery.ajax/ )。

以下是"ajax.js" 文件中使用的片段

  /sites/all/modules0  

更新的版本,您可以尝试:

  /sites/all/modules1  

我没有时间测试此代码段,升级和评论欢迎:)

 

If you check Drupal "ajax.js" file, link process is a special case.

Comment on "Drupal.ajax.prototype.beforeSerialize" says that function will never be called if it's not a form.

In that case, "options.beforeSerialize" is used before jQuery ajax call. So if you perform your confirmation here, you can click ok or cancel, ajax call will be always triggered.

But if you overload the "options.beforeSend" function instead, maybe your confirmation box should work because if that function return false, Ajax call is cancelled (jQuery Doc : http://api.jquery.com/jQuery.ajax/).

Here is the snippet used in "ajax.js" file

beforeSend: function (xmlhttprequest, options) {   ajax.ajaxing = true;   return ajax.beforeSend(xmlhttprequest, options); } 

The updated version, you can try it:

Drupal.ajax['my-id'].beforeSend: function (xmlhttprequest, options) {   if(confirm('Are you sure?')){       ajax.ajaxing = true;       return ajax.beforeSend(xmlhttprequest, options);   }   return false; } 

I didn't have the time to test this snippet, upgrades and comment are welcome :)

 
 

相关问题

0  Views_embed_view使用上下文过滤器失败?  ( Views embed view fails with contextual filters ) 
我有一个用2个上下文过滤器的视图,每个滤波器都设置为显示所有结果,如果不存在。这是使用预览上下文过滤器在视图编辑屏幕上进行测试。两个上下文过滤器都过滤分类学术语ID。 无设置它会增加结果;用'152'返回三个结果;它以'152/366'返回一个结果。这些是预期的结果。 但是,我在我的Drupal 7代码中我尝试过以下...

2  获取Ajax回调中的当前URL?  ( Get current url inside ajax callback ) 
我已创建称为 mymodule 。 在此URL localhost / mymodule / name 中,我有这个字段: $form['name'] = array( '#title' => t('Enter name'), ... '#ajax' => array( 'event' =>...

0  如何检查问题是否在将数据库从一个服务器迁移到另一个服务器时清除URL?  ( How to check if the problem is of clean url when migrating the database from one ) 
上传我的本地DB在服务器上我的网站没有工作,我得到的是白屏死亡。在几个小时的努力之后,我发现,由于服务器未配置为CLEAT URL和数据库中的CLEAD URL设置,导致问题。 是否有任何方法我们可以知道问题是否在这种情况下的清洁网址。 此外,我不能使用备份和迁移模块,因为数据库大小太大。 ...

1  获取Ajax回调中的当前URL参数?  ( Get current url arguments inside ajax callback ) 
我创建了名为'mymodule'的自定义模块。 在此URL localhost / es / mymodule / name / 1/2/3 中,我有这个字段: $form['name'] = array( '#title' => t('Enter name'), ... '#ajax' => ar...

2  单击WebForm提交的下载文件  ( One click download files from webform submission ) 
我的内容编辑器需要一个"一点击" 下载解决方案的所有文件,适用于带有给定的WebForm提交的所有文件。 ftp不是一个选项。 有谁知道这个解决方案? ...

3  使用#element_validate添加到现有表单的验证  ( Adding validation to existing forms using element validate ) 
问题 我正在使用 #element_validate 来验证创建节点的自定义表单上的输入。我正在使用 element_validate_integer_positive 作为验证的函数。它完美地工作。 当我尝试将相同的代码挂钩到现有节点编辑表单中时部分地工作。表单仍然突破并显示正确的消息,但它也会引起两个错误引...

3  太多了503错误  ( Too many 503 errors ) 
我使用CloudFlare作为CDN。它最近开始给出520个错误,然后使用服务器脱机。我询问他们的客户支持。他们说我的服务器给出了503个错误,这是原因。这就是他们从错误日志中拉出的东西: 09/14 07:04:39 adda0ac581c038e www.exmple.com /favicon.ico 115...

3  如何防止模块卸载时自动删除数据库表?  ( How do i prevent the automatic removal of a database table when a module is unin ) 
在drupal 7中,通过 hook_schema() 创建的数据库表在模块安装上创建,并在卸载时删除。 我想在定义它的模块卸载时删除数据库表,因为我存储的数据非常重要,所以我想确保即使有人甚至卸载模块以获得某些目的数据也保留。之前备份表肯定是一个解决方案,但我正在寻找一些更好的替代方案。 ...

7  如何导入和出口Drupal商务产品?  ( How can i import and export drupal commerce products ) 
我有一个drupal 7站点并安装了 drupal commerce 模块。 其中我已添加商务产品,其中类别如: 软件产品 硬件产品 电子产品 其他 我想从我的发展中导出那些商业产品 服务器到生产服务器。 所以,对于 Drupal.org 所提供的任何模块,我可以导出 99887661 并导入我的服务器。...

10  如何使用SMTP配置WebForm  ( How to configure webform with smtp ) 
我创建了一个webform,我想配置它通过smtp身份验证发送电子邮件。我也安装了SMTP身份验证模块,但我无法找到任何选项,允许我使用SMTP设置WebForm。 这可能吗?任何建议? ...

4  SELLEMEST上由AJAX加载的SELECT字段  ( Simpletest on select field loaded by ajax ) 
我通过谷歌搜索并没有找到答案。堆栈交换是我的最后一个手段。 在我的表单中,我有两个选择字段: $form['system']['foo'] = array( ... '#type' => 'select', '#options' => array('A', 'B', 'C'), ... '#a...

0  创建新用户但不管理它们的权限  ( Permission to create new users but not to manage them ) 
我需要创建一个允许任何用户创建其他用户的权限而不允许它们管理所有用户(即不授予它们'管理用户权限)。 我的方法正在改变菜单'admin / people / create',但它 - 出于未知原因 - 不起作用。尽管菜单的权限被授予带有链接的菜单项是不可见的,但是当我转到特定的URL时 - 如果我没有'管理用户的权限...

1  如何使用jQuery禁用WebForm选择框,而无需将选择值重置为默认值  ( How to disable webform select box with jquery without resetting selection value ) 
我有一个webform,下面的表单的一部分(选择字段) [master:sub_group_1:tokan_A]1 我现在使用jquery动态设置这个字段。 [master:sub_group_1:tokan_A]2 这有效。当用户输入其年龄时,此方法会自动将选择更改为"否" (如果在19岁以下),并...

0  未经扩展,上传文本文件  ( Upload text file without extension ) 
我在一个项目中工作,我必须通过drupal网站上传文件。自从我尝试上传的文件没有扩展,我有一个问题。文件是文本文件,但没有.txt最后,诚实地说实话,我不介意drupal在文件名后添加.txt。 如何为没有扩展的文件定义文件验证器? ...

8  是否可以挂钩变量_set()事件?  ( Is it possible to hook to variable set event ) 
我想跟踪系统更改事件,使它们可恢复。检查变量_set()时,我看到该事件没有提供挂钩。我有没有办法这样做? 我可以更改挂钩设置表单,但是有很多设置表单来跟踪,如果我可以直接挂钩变量_set(),代码变得更加简单。 我还可以跟踪功能+ strongArm模块的变量变化,但如果Drupal admin可以浏览无需代码触摸...

4  将db_query转换为db_select或EntityFieldQuery  ( Convert db query to db select or entityfieldquery ) 
任何人都可以帮助我使用 db_query 到 db_select 或 entityfieldquery 我已经尝试了很多东西,但总是得到错误。我是新的drupal,我的查询很好地运作良好,但我认为它更好地将这一致转换为 db_select 或 entityfieldquery ,您认为? 更新 我的查询: f...

1  如何在允许安装我的模块之前,我如何要求浏览浏览器.ini / get_browser()正在运行?  ( How can i require that browscap ini get browser is functioning before allow ) 
我有一个模块,我的drupal 7.x安装需要browscap.ini / get_browser()。 模块完美地工作,但我希望在安装启用模块之前,请确保安装浏览器。除非正确安装浏览器,否则模块无法运行的方式。 如何这样做? ...

0  IMCE CKEDITOR无法上传图像  ( Imce ckeditor cant upload image ) 
所以我将我的网站从本地移动到服务器,现在我不能再上传服务器上的任何图片。单击"浏览服务器" 并击中"上载" ,AJAX加载圆圈工作有点并返回步骤一步。没有什么发生的! 我也可以通过ftp或filefield上传文件,但不是通过imce上传,认为它可能是imce,更新到最新版本。仍然没有变化。 我的dblog和客户端错...

3  删除或隐藏节点上的“视图”选项卡[已关闭]  ( Remove or hide the view tab on a node ) 
关闭。这个问题需要更多聚焦。它目前不接受答案。 想要改进这个问题?更新问题,因此它仅拍摄了一个问题,仅通过编辑此帖。 关闭 1年前。 ...

0  在表单提交后重定向页面[重复]  ( Redirecting a page after form submission ) 
这个问题已经在这里有答案: 如何在提交表单后重定向到页面 (6个答案) 关...




© 2021 it.wenda123.org All Rights Reserved. 问答之家 版权所有


Licensed under cc by-sa 3.0 with attribution required.