在JQUERYUI的Dialog对话框中用Ajax Extensions实际两级分类的DorpDownList无刷新级联

如果你想在JQUERYUI的Dialog对话框中用Ajax Extensions实际两级分类的DorpDownList无刷新级联。

 

你会很郁闷地发现：在Dialog初始化前无刷新级联是没有问题的！而一旦初始化Dialog后就失效。

 

仔细检查，ScriptManager、UpdatePanel、DropDownList的AutoBack这些都没有问题。

 

用httpwatch抓，可以看到Ajax的Get是执行了的，可是DorpDownList的SelectIndexChange事件怎么也不生效！

 

仔细看了前后端代码都没有什么问题，用VS2008调试，发现服务端DorpDownList的SelectIndexChange事件是有执行的！

 

那么只有一种可能了：Ajax Extensions返回的JS代码没有成功执行！可能跟JQueryUi的Dialog有冲突！

 

有了思想后便开始翻看JQueryUi的源代码。

 

ui.dialog.js第48行：.appendTo(document.body)

 

 $.widget("ui.dialog", { _init: function() { this.originalTitle = this.element.attr('title'); var self = this, options = this.options, title = options.title || this.originalTitle || ' ', titleId = $.ui.dialog.getTitleId(this.element), uiDialog = (this.uiDialog = $('<div/>')) .appendTo(document.body) .hide() .addClass(uiDialogClasses + options.dialogClass) .css({ position: 'absolute', overflow: 'hidden', zIndex: options.zIndex }) // setting tabIndex makes the div focusable // setting outline to 0 prevents a border on focus in Mozilla .attr('tabIndex', -1).css('outline', 0).keydown(function(event) { (options.closeOnEscape && event.keyCode && event.keyCode == $.ui.keyCode.ESCAPE && self.close(event)); }) .attr({ role: 'dialog', 'aria-labelledby': titleId }) .mousedown(function(event) { self.moveToTop(false, event); }),

 

可以看到初始化的过程中，它将你的dialog容器appendTo到了document.body下，也就是说你的dialog容器将与form表单平级了。

 

在vs2008中使用Ajax Extensions必须将ScriptManager和UpdatePanel置于form之内，而不能与form表单平级。

 

没办法！只能动手改一下JQueryUi了。

 

在前面加个判断吧：

 

var obj=document.getElementsByTagName("form").item(0); if(!obj){obj= document.body}

 

这样第48行可以改为：.appendTo(obj)

 

在压制过的jquery-ui-1.7.2.custom.min.js找到相同位置，改一下就OK！