欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

一个#AHAH事件发生后调用一个函数(Drupal的6)Calling a function after an #AHAH event (Drupal 6) 有大用 有大大用

Drupal的6

本教程是关于如何将Drupal的6 #AHAH事件发生后调用JavaScript函数。您可以查看如何调用一个Drupal 7 #AJAX事件发生后的JavaScript函数这里的教程:一个#AJAX事件之后调用JavaScript函数

介绍

在Drupal 6,我已经在过去的时代需要一个回调AHAH后,把火关功能。这里的问题是,AHAH是Drupal的一个预先建立的功能集,而据我所知,唯一的功能,它执行后完成是Drupal.behaviors不过,我个人没有看到任何的Drupal对象来区分是否Drupal.behaviors初始页面加载时被解雇,或AHAH事件之后。jQuery来救援!jQuery提供了一个可爱的小.ajaxComplete()是每个Ajax事件后被解雇关闭功能。我们可以利用这个功能来火过任何其他的功能,我们希望AHAH完成时。

要求

  • 要理解本教程中,你将需要如何建设Drupal模块,Drupal的形式API是如何工作的,怎么主题功能登录,以及如何将JavaScript添加到页面的深入理解。我不会去到很多细节上的究竟是什么我做的,我走,所以没有这方面的知识,你可能会发现很难在沿线一些景点跟进。

  • 本教程还使用的AHAH助手模块该模块需要大量的工作做出来的AHAH。我已经使用了本教程只是提供一个简单的方法来一些AHAH添加到教程。这个模块(然而一个AHAH事件后执行的函数)绝不核心点有这个模块的依赖关系,你将能够使用而没有触及此模块提供的主要思路。该模块的优点在于,没有AHAH回调函数需要创建,作为模块通吃的那照顾。

  • 在本教程中,我创建了一个名为模块ahah_callback。所有的命名约定将在此建成。

放弃

我是新来的这个方法。有这样做的更清洁的方法可以是可能的。如果有人知道的,我很想知道,所以我可以在将来使用它。请随意发表评论,并指出我朝着正确的方向。

设置:注册一个路径,并建立一个形式

我们需要做的第一件事是建立一个我们可以使用本教程的形式。因此,我们将注册一个路径,允许我们访问的形式:

 

功能ahah_callback_menu()
{
	返回的数组
	(
		“ahah_callback'=>阵列
		(
			'标题'=>'AHAH回调测试“,
			页面回调'=>'drupal_get_form',
			页面参数'=>阵列('ahah_callback_form'),
			“接入参数'=>阵列(”访问内容“),
		)
	);
}

接下来,我们需要建立我们的回调函数:

 

功能ahah_callback_form($ form_state)
{
	$形式=阵列();
	//该AHAH辅助模块要求,未来
	//功能在表单定义的开始被称为
	ahah_helper_register($形式,$ form_state);
	//首先我们创建一个包装由AHAH使用
	$表['容器'] =阵列
	(
		“#prefix'=>'<DIV ID =”ahah_container“>”,
		“#suffix'=>”</ DIV>',
	);
	//接下来我们在这个容器中添加一些数据
	$表['容器'] ['数据'] =阵列
	(
		“#VALUE'=>'<p>表单元素</ p>',
	);
	//最后,我们添加我们AHAH启用按钮
	$表['按钮'] =阵列
	(
		“#TYPE'=>'提交',
		“#VALUE'=>'提交',
		“#ahah'=>阵列
		(
			//下面的路径是怎样的AHAH帮助模块
			//注册路径。看看它的文档
			了解更多信息//模块
			'路径'=> ahah_helper_path(阵列('集装箱'))
			'包装'=>'ahah_container',
			'方法'=>'追加',
		)
	);
	//我们将重现上述表单元素,以示
	//在不同AHAH事件之间的对比稍后
	//教程。因此,我们重新创建容器,数据,和按钮。
	$表['container2的'] =阵列
	(
		“#prefix'=>'<DIV ID =”ahah_container2“>”,
		“#suffix'=>”</ DIV>',
	);
	$表['container2的'] ['数据'] =阵列
	(
		“#VALUE'=> <P>形式在element2 </ p>',
	);
	$表['按钮2'] =阵列
	(
		“#TYPE'=>'提交',
		“#VALUE'=>'提交',
		“#ahah'=>阵列
		(
			'路径'=> ahah_helper_path(阵列('container2的'))
			'包装'=>'ahah_container2',
			'方法'=>'追加',
		)
	);
	返回$形式;
}

在这一点上,你应该有一个工作的形式。当任一按钮被推动时,有关该按钮的增加的数据。注意:如果这是不是你在这一点上工作,确保你已经安装了AHAH助手模块。

我们只有剩下要做的一件事,那就是我们的jQuery(JavaScript)的文件添加到我们的表单。我想补充我的javascript中的主题功能,这超出了本教程的范围的原因。作为一个简短的说明,这让一切都有点更加稳定。因此,我们需要做两件事情。第一是使用注册一个主题函数hook_theme(),则第二是实施该主题的功能。

首先,hook_theme()

 

功能ahah_callback_theme()
{
	返回的数组
	(
		“ahah_callback_form'=>阵列
		(
			'参数'=>阵列('形式'=> NULL),
		)
	);
}

现在我已经注册的功能theme_ahah_callback_form。因为该功能具有相同的名称的实际形式中,它会自动调用,并没有什么需要被添加到表单定义。这个函数传递一个变量,$form(所有形式的主题函数传递这个变量,只有这个变量)。

其次,主题功能:

 

功能theme_ahah_callback_form($形式)
{
	//首先我们得到的路径,我们的模块
	$ PATH = drupal_get_path('模块','ahah_callback');
	//接下来我们中的JavaScript文件添加到页面。注:我把我的
	// JavaScript的文件名为“JS”文件夹中。如果你有你
	//脚本模块文件夹的根,一定要调整
	//相应路径
	drupal_add_js($路径“/js/ahah_callback.js');
	//最后我们返回呈现形式。
	返回drupal_render($形式);
}

注意:请确保您清除缓存添加此代码后,或主题的功能将不会进入和JavaScript将不会被添加。

本品:jQuery的魔力

现在,我们得到了本教程的肉 - jQuery的魔力。这是它一切发生。我们需要做的第一件事就是换我们的代码在一个匿名函数,传入jQuery对象,以防止命名空间冲突:

 

(函数($){
	//我们的代码会在这里
}(jQuery的));

接下来,我们需要使用.ajaxComplete()的功能。我将附加这个到文档,如本教程它不具有任何关系于任何特定的元件。

 

//下面这个就是 ahah_callback.js 的内容吧
(函数($){
	(文档)$ .ajaxComplete(函数()
	{
		//将AHAH完成后会去这里之后被解雇码
	});
}(jQuery的));

每个AHAH活动将有所回调路径。我们需要找出我们的是什么,为了能够专门针对我们希望在页面上AHAH电话,让我们的功能是不小心在页面上的另一个完全独立的AHAH回调触发。我这样做是使用以下:

 


//下面这个就是 ahah_callback.js 的内容吧
(函数($){ //我们需要一些变量添加到ajaxComplete() //回调函数。在一个大家最关心的 //是第三,“设置” (文档)$ .ajaxComplete(功能(即XHR,设置) { 警报(settings.url); }); }(jQuery的));

现在,当我们触发AHAH,它完成后,我们将得到一个javascript警报告诉我们,被访问的路径。在本教程的情况下,这两个按钮访问以下路径:

  • /[path_to_webroot]/ahah_helper/container

  • /[path_to_webroot]/ahah_helper/container2

注意:您到根目录路径将是从我的不同,也可能不存在。在我的情况下,Web根目录是一个名为“沙箱”文件夹中。你会看到我的下一个代码此参考沙箱。

最后,我们含有我们的代码添加一个条件(在这种情况下,或多个条件句)被触发时所讨论的AHAH事件被执行。

 


//下面这个就是 ahah_callback.js 的内容吧
(函数($){ (文档)$ .ajaxComplete(功能(即XHR,设置) { //按钮1 如果(settings.url ==“/沙箱/ ahah_helper /容器”) { 警报(“按钮1推”); } //按钮2 否则,如果(settings.url ==“/沙箱/ ahah_helper / container2的”) { 警报(“按钮2按下”); } }); }

这确实是我们!当页面上的第一个启用AHAH按钮完成其AHAH,文字“按钮,按下1”显示在一个JavaScript警告。当页面上的第二个启用AHAH按钮完成其AHAH,文字“按钮2按下”显示在一个JavaScript警告。

我希望本教程可以帮助你。祝你好运!

添加回复

15条评论

 
 
 
 
 
 
 

你不应该叫ajaxComplete()一次以上。这就是为什么你的函数被触发多次:您注册的每个Drupal.behaviors呼叫的其它附加ajaxComplete处理程序。
不需要Drupal.behaviors在所有在此情况下。
(文档)$ .ajaxComplete(功能(即XHR,设置){ 
警报(settings.url); 
});

 
 
 

我还是不明白这个“如果(!ahahCallback.i)”的考验。没有你的意思是:“如果(settings.url =='AAA')”呢?

感谢花在这个伟大的教程的时候:-)

 
 
 

我欠你一个啤酒先生!找到你的文章之前花在这几个小时。20分钟实现这一点,我是好去。客户现在是幸福的。

 

来自 http://www.jaypan.com/tutorial/calling-function-after-ahah-event-drupal-6

Page content

Calling a function after an #AHAH event (Drupal 6)


Drupal 6

This tutorial is on how to call a JavaScript function after a Drupal 6 #AHAH event. You can view the tutorial on how to call a JavaScript function after a Drupal 7 #AJAX event here: Calling a JavaScript function after an #AJAX event

Introduction

In Drupal 6, I've at times in the past needed to fire off a function after an AHAH callback. The problem here is that AHAH is a pre-built set of functions by Drupal, and as far as I can tell, the only function it executes after completion is Drupal.behaviors. However, I personally don't see anything in the Drupal object to differentiate whether Drupal.behaviors is being fired on initial page load, or after an AHAH event. jQuery to the rescue! jQuery offers a nice little .ajaxComplete() function that is fired off after every Ajax event. We can use this function to fire off whatever other function we want when AHAH is complete.

Requirements

  • To understand this tutorial, you will need a strong understanding of how to build Drupal modules, how the Drupal form API works, how theme functions are registered, and how to add JavaScript to pages. I won't be going into a lot of detail on what exactly I am doing as I go along, so without this knowledge you may find it difficult to follow along in some spots.

  • This tutorial also makes use of the AHAH Helper module. This module takes a lot of the work out of doing AHAH. I've used it for this tutorial simply to provide a simple way to add some AHAH to the tutorial. The core points of this module however (executing a function after an AHAH event) by no means have a dependency on this module, and you will be able to use the main ideas given without ever touching this module. The advantage of this module is that no AHAH callback functions need to be created, as the module takes care of all of that.

  • In this tutorial I am creating a module called ahah_callback. All naming conventions will be built upon this.

Disclaimer

I am new to this method. It may be possible that there is a much cleaner method of doing this. If anyone knows one, I would love to know it so I can use it in the future. Please feel free to leave a comment and point me in the right direction.

The setup: Register a path, and build a form

The first thing we need to do is build a form that we can use for the tutorial. So we will register a path allowing us to access the form:

 

function ahah_callback_menu()
{
	return array
	(
		'ahah_callback' => array
		(
			'title' => 'AHAH callback test',
			'page callback' => 'drupal_get_form',
			'page arguments' => array('ahah_callback_form'),
			'access arguments' => array('access content'),
		),
	);
}

Next we need to build our callback function:

 

function ahah_callback_form($form_state)
{
	$form = array();
	// The AHAH helper module requires that the next
	// function be called at the beginning of the form definition
	ahah_helper_register($form, $form_state);
	// First we create a wrapper to be used by the AHAH
	$form['container'] = array
	(
		'#prefix' => '<div id="ahah_container">',
		'#suffix' => '</div>',
	);
	// Next we add some data in this container
	$form['container']['data'] = array
	(
		'#value' => '<p>Form element</p>',
	);
	// And finally we add our AHAH enabled button
	$form['button'] = array
	(
		'#type' => 'submit',
		'#value' => 'submit',
		'#ahah' => array
		(
			// The following path is how the AHAH helper module
			// registers paths. See the documentation for that
			// module for more information
			'path' => ahah_helper_path(array('container')),
			'wrapper' => 'ahah_container',
			'method' => 'append',
		),
	);
	// We will reproduce the above form elements in order to show
	// the contrast between different AHAH events later on in the
	// tutorial. So we recreate the container, the data, and the button.
	$form['container2'] = array
	(
		'#prefix' => '<div id="ahah_container2">',
		'#suffix' => '</div>',
	);
	$form['container2']['data'] = array
	(
		'#value' => '<p>form element2</p>',
	);
	$form['button2'] = array
	(
		'#type' => 'submit',
		'#value' => 'submit',
		'#ahah' => array
		(
			'path' => ahah_helper_path(array('container2')),
			'wrapper' => 'ahah_container2',
			'method' => 'append',
		),
	);
	return $form;
}

At this point, you should have a working form. When either of the buttons is pushed, the data relevant to that button increases. Note: if this isn't working for you at this point, make sure you have installed the AHAH Helper module.

We only have one thing left to do, and that is add our jQuery (JavaScript) document to our form. I add my javascript in theme functions, for reasons that are beyond the scope of this tutorial. As a short explanation, it makes everything a little more stable. So we need to do two things. The first is to register a theme function using hook_theme(), then second is to implement that theme function.

First, hook_theme():

 

function ahah_callback_theme()
{
	return array
	(
		'ahah_callback_form' => array
		(
			'arguments' => array('form' => NULL),
		),
	);
}

I've now registered the function theme_ahah_callback_form. As this function has the same name as the actual form, it will be automatically called, and nothing needs to be added to the form definition. This function is passed one variable, $form (all form theme functions are passed this variable, and only this variable).

Next, the theme function:

 

function theme_ahah_callback_form($form)
{
	// First we get the path to our module
	$path = drupal_get_path('module', 'ahah_callback');
	// Next we add the JavaScript document to the page. Note: I keep my
	// JavaScript documents in a folder called 'js'. If you have your
	// script in the root of the module folder, make sure to adjust your
	// path accordingly
	drupal_add_js($path . '/js/ahah_callback.js');
	// Finally we return the rendered form.
	return drupal_render($form);
}

Note: make sure you clear your cache after adding this code, or the the theme function won't be entered and the javascript will not be added.

The goods: jQuery magic

Now we get to the meat of this tutorial - the jQuery magic. This is where it all happens. The first thing we need to do is wrap our code in an anonymous function, passing in the jQuery object in order to prevent namespace collisions:

 

(function($) {
	// Our code will go in here
}(jQuery));

Next, we need to use the .ajaxComplete() function. I will attach this to the document, as in this tutorial it doesn't have any relation to any particular element.

 

(function($) {
	$(document).ajaxComplete(function()
	{
		// the code to be fired after the AHAH is completed will go here
	});
}(jQuery));

Each AHAH event will have a callback path. We need to find out what ours is, in order to be able to specifically target the AHAH call on the page that we want, so that our function isn't accidentally triggered by another completely separate AHAH callback on the page. I do this using the following:

 

(function($) {
	// we need to add some variables to the ajaxComplete()
	// callback function. The one we are most concerned with
	// is the 3rd, 'settings'
	$(document).ajaxComplete(function(e, xhr, settings)
	{
		alert(settings.url);
	});
}(jQuery));

Now, when we trigger the AHAH, after it is complete, we will get a javascript alert telling us the path that was accessed. In the case of this tutorial, the two buttons access the following paths:

  • /[path_to_webroot]/ahah_helper/container

  • /[path_to_webroot]/ahah_helper/container2

Note: your path to webroot will be different from mine, or possibly non-existent. In my case, the webroot is a folder called 'sandbox'. You will see this reference to sandbox in my next code.

Finally, we add a conditional (or multiple conditionals in this case) containing our code to be executed when the AHAH event in question is triggered.

 

(function($) {
	$(document).ajaxComplete(function(e, xhr, settings)
	{
		// button 1
		if(settings.url == "/sandbox/ahah_helper/container")
		{
			alert("button 1 pushed");
		}
		// button 2
		else if(settings.url == "/sandbox/ahah_helper/container2")
		{
			alert("button 2 pushed");
		}
	});
}

And that does it for us! When the first AHAH enabled button on the page has finished its AHAH, the text 'button 1 pushed' is shown in a javascript alert. When the second AHAH enabled button on the page has finished its AHAH, the text 'button 2 pushed' is shown in a javascript alert.

I hope this tutorial helps you out. Good luck!

Add a reply

15 Comments

 
 
 

This is the best thing ever written!
Very useful and detailed informartion.
Thanks to the author for writing this!

 
 

Excellent, awesome, superb job. The article was very well written and clear, and extremely useful. It saved me several hours of head-to-desk contact!

 
 

You should not call ajaxComplete() more than once. This is why your function is fired multiple times : you are registering an additionnal ajaxComplete handler on each Drupal.behaviors call.
You do not need Drupal.behaviors at all in this case.
$(document).ajaxComplete(function(e, xhr, settings) {
alert(settings.url);
});

 
 
 

I still don't get this "if(!ahahCallback.i)" test. Didn't you mean "if (settings.url == 'aaa')" instead?

Thanks for the time spent on this great tutorial :-)

 
 
 

I owe you a beer sir! Spent a few hours on this before finding your article. 20 minute to implement this and I was good to go. Client is now happy.

 


普通分类: