|
This is a great control. It gives a professional feel to my web apps.
I am, however, having trouble with my select controls or dropdownlists disappearing when I use this control. You can reproduce the problem by simply adding a select control anywhere outside of the update panels on the DEMO project's default.aspx. Run the app, click one of the buttons and the control disappears.
In trying to debug this I noticed that _disableTabs() function was running twice. I tried to find what code was calling it so I looked at the call stack. I noticed that the bottom call in the stack is startRequest() which is called by an anonymous function. The funny thing is that this function (startRequest) is being called twice in a row. Because it runs twice the select controls loose their original visibility state and stay hidden.
Should the startRequest function be executing twice? If not, does anyone have any idea on how to fix it.
(I think this was the source of a problem I was having with the _attachPopup() function as well but I hacked around that already.)
Dan
-- modified at 16:41 Monday 14th May, 2007
|
|
|
|
|
i able to duplicate with dropdownlist and list-box, not sure what else...
just add dropdownlist to the page and run your page and when you click on the button you will see that dropdownlist is disappear.
what is the fix to that?
thanks.
|
|
|
|
|
Here is my version of the ModalUpdateProgress.js. On each line that I have changed I added a "// added" to the end of the line. I hope this helps. (Sorry about the tabbing, it looks like message editor is removing it.)
<br />
Sys.UI._ModalUpdateProgress = function Sys$UI$_ModalUpdateProgress(element) {<br />
Sys.UI._ModalUpdateProgress.initializeBase(this,[element]);<br />
this._backgroundCssClass = null;<br />
this._cancelControlID = null; <br />
this._backgroundElement = null;<br />
this._foregroundElement = null;<br />
this._cancelHandler = null;<br />
this._scrollHandler = null;<br />
this._resizeHandler = null;<br />
this._windowHandlersAttached = false; <br />
this._beginRequestHandlerDelegate = null;<br />
this._startDelegate = null;<br />
this._endRequestHandlerDelegate = null;<br />
this._pageRequestManager = null;<br />
this._timerCookie = null; <br />
this._saveTabIndexes = new Array();<br />
this._saveDisableSelect = new Array();<br />
this._saveDisableSelectExecuted = false;
this._tagWithTabIndex = new Array('A','AREA','BUTTON','INPUT','OBJECT','SELECT','TEXTAREA','IFRAME');<br />
}<br />
function Sys$UI$_ModalUpdateProgress$get_backgroundCssClass() {<br />
if (arguments.length !== 0) throw Error.parameterCount();<br />
return this._backgroundCssClass;<br />
}<br />
function Sys$UI$_ModalUpdateProgress$set_backgroundCssClass(value) {<br />
this._backgroundCssClass = value;<br />
}<br />
function Sys$UI$_ModalUpdateProgress$get_cancelControlID() {<br />
if (arguments.length !== 0) throw Error.parameterCount();<br />
return this._cancelControlID;<br />
}<br />
function Sys$UI$_ModalUpdateProgress$set_cancelControlID(value) {<br />
this._cancelControlID = value;<br />
}<br />
function Sys$UI$_ModalUpdateProgress$_attachPopup() {<br />
if (this._windowHandlersAttached)
return;
if (!this._scrollHandler)<br />
{<br />
this._scrollHandler = Function.createDelegate(this, this._onLayout);<br />
}<br />
if (!this._resizeHandler)<br />
{<br />
this._resizeHandler = Function.createDelegate(this, this._onLayout);<br />
}<br />
$addHandler(window, 'resize', this._resizeHandler);<br />
$addHandler(window, 'scroll', this._scrollHandler);<br />
this._windowHandlersAttached = true;<br />
}<br />
function Sys$UI$_ModalUpdateProgress$_detachPopup() {<br />
if (this._windowHandlersAttached) {<br />
if (this._scrollHandler) {<br />
$removeHandler(window, 'scroll', this._scrollHandler);<br />
}<br />
if (this._resizeHandler) {<br />
$removeHandler(window, 'resize', this._resizeHandler);<br />
}<br />
this._windowHandlersAttached = false;
}<br />
}<br />
function Sys$UI$_ModalUpdateProgress$_onCancel(e) {<br />
var element = $get(this._cancelControlID);<br />
if (element && !element.disabled) {<br />
if (this._pageRequestManager !== null) {<br />
this._pageRequestManager.abortPostBack();<br />
}<br />
this._hide();<br />
e.preventDefault();<br />
return false;<br />
}<br />
}<br />
function Sys$UI$_ModalUpdateProgress$_onLayout(e) {<br />
this._layout();<br />
}<br />
function Sys$UI$_ModalUpdateProgress$_layout() {<br />
var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);<br />
var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);<br />
var clientWidth;<br />
if (window.innerWidth) {<br />
clientWidth = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));<br />
} else {<br />
clientWidth = document.documentElement.clientWidth;<br />
}<br />
var clientHeight;<br />
if (window.innerHeight) {<br />
clientHeight = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));<br />
} else {<br />
clientHeight = document.documentElement.clientHeight;<br />
}<br />
this._backgroundElement.style.left = scrollLeft+'px';<br />
this._backgroundElement.style.top = scrollTop+'px';<br />
this._backgroundElement.style.width = clientWidth+'px';<br />
this._backgroundElement.style.height = clientHeight+'px';<br />
this._foregroundElement.style.left = scrollLeft+((clientWidth-this._foregroundElement.offsetWidth)/2)+'px';<br />
this._foregroundElement.style.top = scrollTop+((clientHeight-this._foregroundElement.offsetHeight)/2)+'px';<br />
}<br />
function Sys$UI$_ModalUpdateProgress$_show() {<br />
this._attachPopup();<br />
this._backgroundElement.style.display = '';<br />
if (this._dynamicLayout) {<br />
this._foregroundElement.style.display = 'block';<br />
} else {<br />
this._foregroundElement.style.visibility = 'visible';<br />
}<br />
this._disableTabs();<br />
this._layout();<br />
this._layout();<br />
}<br />
function Sys$UI$_ModalUpdateProgress$_disableTabs() {<br />
var i = 0;<br />
var tagElements;<br />
var tagElementsInPopUp = new Array();<br />
Array.clear(this._saveTabIndexes);<br />
for (var j = 0; j < this._tagWithTabIndex.length; j++) {<br />
tagElements = this._foregroundElement.getElementsByTagName(this._tagWithTabIndex[j]);<br />
for (var k = 0 ; k < tagElements.length; k++) {<br />
tagElementsInPopUp[i] = tagElements[k];<br />
i++;<br />
}<br />
}<br />
i = 0;<br />
for (var j = 0; j < this._tagWithTabIndex.length; j++) {<br />
tagElements = document.getElementsByTagName(this._tagWithTabIndex[j]);<br />
for (var k = 0 ; k < tagElements.length; k++) {<br />
if (Array.indexOf(tagElementsInPopUp, tagElements[k]) == -1) {<br />
this._saveTabIndexes[i] = {tag: tagElements[k], index: tagElements[k].tabIndex};<br />
tagElements[k].tabIndex="-1";<br />
i++;<br />
}<br />
}<br />
}<br />
i = 0;<br />
if ((Sys.Browser.agent === Sys.Browser.InternetExplorer) && (Sys.Browser.version < 7)) {<br />
if (!(this._saveDisableSelectExecuted)) {
var tagSelectInPopUp = new Array();<br />
tagElements = this._foregroundElement.getElementsByTagName('SELECT');<br />
for (var k = 0 ; k < tagElements.length; k++) {<br />
tagSelectInPopUp[i] = tagElements[k];<br />
i++;<br />
}<br />
i = 0;<br />
Array.clear(this._saveDisableSelect);<br />
tagElements = document.getElementsByTagName('SELECT');<br />
for (var k = 0 ; k < tagElements.length; k++) {<br />
if (Array.indexOf(tagSelectInPopUp, tagElements[k]) == -1) {<br />
this._saveDisableSelect[i] = {tag: tagElements[k], visib: this._getCurrentStyle(tagElements[k], 'visibility')} ;<br />
tagElements[k].style.visibility = 'hidden';<br />
i++;<br />
}<br />
}<br />
this._saveDisableSelectExecuted = true;
}<br />
}<br />
}<br />
function Sys$UI$_ModalUpdateProgress$_restoreTabs() {<br />
for (var i = 0; i < this._saveTabIndexes.length; i++) {<br />
this._saveTabIndexes[i].tag.tabIndex = this._saveTabIndexes[i].index;<br />
}<br />
if ((Sys.Browser.agent === Sys.Browser.InternetExplorer) && (Sys.Browser.version < 7)) {<br />
for (var k = 0 ; k < this._saveDisableSelect.length; k++) {<br />
this._saveDisableSelect[k].tag.style.visibility = this._saveDisableSelect[k].visib;<br />
}<br />
this._saveDisableSelectExecuted = false;
}<br />
}<br />
function Sys$UI$_ModalUpdateProgress$_hide() {<br />
this._backgroundElement.style.display = 'none';<br />
this._foregroundElement.style.display = 'none';<br />
this._restoreTabs();<br />
this._detachPopup();<br />
}<br />
function Sys$UI$_ModalUpdateProgress$_handleBeginRequest(sender, arg) {<br />
var curElem = arg.get_postBackElement();<br />
var showProgress = !this._associatedUpdatePanelId; <br />
while (!showProgress && curElem) {<br />
if (curElem.id && this._associatedUpdatePanelId === curElem.id) {<br />
showProgress = true; <br />
}<br />
curElem = curElem.parentNode; <br />
} <br />
if (showProgress) {<br />
this._timerCookie = window.setTimeout(this._startDelegate, this._displayAfter);<br />
}<br />
}<br />
function Sys$UI$_ModalUpdateProgress$_startRequest() {<br />
if (this._pageRequestManager.get_isInAsyncPostBack()) {<br />
this._show();<br />
}<br />
this._timerCookie = null;<br />
}<br />
function Sys$UI$_ModalUpdateProgress$_handleEndRequest(sender, arg) {<br />
this._hide();<br />
if (this._timerCookie) {<br />
window.clearTimeout(this._timerCookie);<br />
this._timerCookie = null;<br />
}<br />
}<br />
function Sys$UI$_ModalUpdateProgress$_getCurrentStyle(element, attribute, defaultValue) {<br />
var currentValue = null;<br />
if (element) {<br />
if (element.currentStyle) {<br />
currentValue = element.currentStyle[attribute];<br />
} else if (document.defaultView && document.defaultView.getComputedStyle) {<br />
var style = document.defaultView.getComputedStyle(element, null);<br />
if (style) {<br />
currentValue = style[attribute];<br />
}<br />
}<br />
<br />
if (!currentValue && element.style.getPropertyValue) {<br />
currentValue = element.style.getPropertyValue(attribute);<br />
}<br />
else if (!currentValue && element.style.getAttribute) {<br />
currentValue = element.style.getAttribute(attribute);<br />
} <br />
}<br />
<br />
if ((!currentValue || currentValue == "" || typeof(currentValue) === 'undefined')) {<br />
if (typeof(defaultValue) != 'undefined') {<br />
currentValue = defaultValue;<br />
}<br />
else {<br />
currentValue = null;<br />
}<br />
} <br />
return currentValue; <br />
}<br />
function Sys$UI$_ModalUpdateProgress$dispose() {<br />
this._detachPopup();<br />
this._scrollHandler = null;<br />
this._resizeHandler = null;<br />
if (this._cancelHandler && $get(this._cancelControlID)) {<br />
$removeHandler($get(this._cancelControlID), 'click', this._cancelHandler);<br />
this._cancelHandler = null;<br />
}<br />
if (this._pageRequestManager !== null) {<br />
this._pageRequestManager.remove_beginRequest(this._beginRequestHandlerDelegate);<br />
this._pageRequestManager.remove_endRequest(this._endRequestHandlerDelegate);<br />
}<br />
Sys.UI._ModalUpdateProgress.callBaseMethod(this,"dispose");<br />
}<br />
function Sys$UI$_ModalUpdateProgress$initialize() {<br />
Sys.UI._ModalUpdateProgress.callBaseMethod(this, 'initialize');<br />
<br />
this._foregroundElement = this.get_element();<br />
this._backgroundElement = document.createElement('div');<br />
this._backgroundElement.style.display = 'none';<br />
this._backgroundElement.style.position = 'absolute';<br />
this._backgroundElement.style.zIndex = 100000;<br />
if (this._backgroundCssClass) {<br />
this._backgroundElement.className = this._backgroundCssClass;<br />
}<br />
this._foregroundElement.parentNode.appendChild(this._backgroundElement);<br />
this._foregroundElement.style.display = 'none';<br />
this._foregroundElement.style.position = 'absolute';<br />
this._foregroundElement.style.zIndex = this._getCurrentStyle(this._backgroundElement, 'zIndex', this._backgroundElement.style.zIndex) + 1;<br />
<br />
if (this._cancelControlID) {<br />
this._cancelHandler = Function.createDelegate(this, this._onCancel);<br />
$addHandler($get(this._cancelControlID), 'click', this._cancelHandler);<br />
}<br />
<br />
this._scrollHandler = Function.createDelegate(this, this._onLayout);<br />
this._resizeHandler = Function.createDelegate(this, this._onLayout);<br />
<br />
this._beginRequestHandlerDelegate = Function.createDelegate(this, this._handleBeginRequest);<br />
this._endRequestHandlerDelegate = Function.createDelegate(this, this._handleEndRequest);<br />
this._startDelegate = Function.createDelegate(this, this._startRequest);<br />
if (Sys.WebForms && Sys.WebForms.PageRequestManager) {<br />
this._pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();<br />
}<br />
if (this._pageRequestManager !== null ) {<br />
this._pageRequestManager.add_beginRequest(this._beginRequestHandlerDelegate);<br />
this._pageRequestManager.add_endRequest(this._endRequestHandlerDelegate);<br />
}<br />
}<br />
<br />
Sys.UI._ModalUpdateProgress.prototype = {<br />
get_backgroundCssClass: Sys$UI$_ModalUpdateProgress$get_backgroundCssClass,<br />
set_backgroundCssClass: Sys$UI$_ModalUpdateProgress$set_backgroundCssClass,<br />
get_cancelControlID: Sys$UI$_ModalUpdateProgress$get_cancelControlID,<br />
set_cancelControlID: Sys$UI$_ModalUpdateProgress$set_cancelControlID,<br />
_attachPopup: Sys$UI$_ModalUpdateProgress$_attachPopup,<br />
_detachPopup: Sys$UI$_ModalUpdateProgress$_detachPopup,<br />
_onCancel: Sys$UI$_ModalUpdateProgress$_onCancel,<br />
_onLayout: Sys$UI$_ModalUpdateProgress$_onLayout,<br />
_layout: Sys$UI$_ModalUpdateProgress$_layout,<br />
_show: Sys$UI$_ModalUpdateProgress$_show,<br />
_disableTabs: Sys$UI$_ModalUpdateProgress$_disableTabs,<br />
_restoreTabs: Sys$UI$_ModalUpdateProgress$_restoreTabs,<br />
_hide: Sys$UI$_ModalUpdateProgress$_hide,<br />
_handleBeginRequest: Sys$UI$_ModalUpdateProgress$_handleBeginRequest,<br />
_startRequest: Sys$UI$_ModalUpdateProgress$_startRequest,<br />
_handleEndRequest: Sys$UI$_ModalUpdateProgress$_handleEndRequest,<br />
_getCurrentStyle: Sys$UI$_ModalUpdateProgress$_getCurrentStyle,<br />
dispose: Sys$UI$_ModalUpdateProgress$dispose,<br />
initialize: Sys$UI$_ModalUpdateProgress$initialize<br />
}<br />
Sys.UI._ModalUpdateProgress.registerClass('Sys.UI._ModalUpdateProgress', Sys.UI._UpdateProgress);<br />
<br />
<br />
|
|
|
|
|
I confirmed the double calls problem of the startRequest.
|
|
|
|
|
This is my version of the js file that solves the problem of calling '_handleBeginRequest' twice based on dan's change.
Sys.UI._ModalUpdateProgress = function Sys$UI$_ModalUpdateProgress(element) {
Sys.UI._ModalUpdateProgress.initializeBase(this,[element]);
this._backgroundCssClass = null;
this._cancelControlID = null;
this._backgroundElement = null;
this._foregroundElement = null;
this._cancelHandler = null;
this._scrollHandler = null;
this._resizeHandler = null;
this._windowHandlersAttached = false;
this._beginRequestHandlerDelegate = null;
this._startDelegate = null;
this._endRequestHandlerDelegate = null;
this._pageRequestManager = null;
this._timerCookie = null;
this._saveTabIndexes = new Array();
this._saveDisableSelect = new Array();
this._saveDisableSelectExecuted = false; // added
this._tagWithTabIndex = new Array('A','AREA','BUTTON','INPUT','OBJECT','SELECT','TEXTAREA','IFRAME');
}
function Sys$UI$_ModalUpdateProgress$get_backgroundCssClass() {
/// <value type="String">
if (arguments.length !== 0) throw Error.parameterCount();
return this._backgroundCssClass;
}
function Sys$UI$_ModalUpdateProgress$set_backgroundCssClass(value) {
this._backgroundCssClass = value;
}
function Sys$UI$_ModalUpdateProgress$get_cancelControlID() {
/// <value type="String">
if (arguments.length !== 0) throw Error.parameterCount();
return this._cancelControlID;
}
function Sys$UI$_ModalUpdateProgress$set_cancelControlID(value) {
this._cancelControlID = value;
}
function Sys$UI$_ModalUpdateProgress$_attachPopup() {
if (this._windowHandlersAttached) // added
return; // added
if (!this._scrollHandler)
{
this._scrollHandler = Function.createDelegate(this, this._onLayout);
}
if (!this._resizeHandler)
{
this._resizeHandler = Function.createDelegate(this, this._onLayout);
}
$addHandler(window, 'resize', this._resizeHandler);
$addHandler(window, 'scroll', this._scrollHandler);
this._windowHandlersAttached = true;
}
function Sys$UI$_ModalUpdateProgress$_detachPopup() {
if (this._windowHandlersAttached) {
if (this._scrollHandler) {
$removeHandler(window, 'scroll', this._scrollHandler);
}
if (this._resizeHandler) {
$removeHandler(window, 'resize', this._resizeHandler);
}
this._windowHandlersAttached = false; // Added
}
}
function Sys$UI$_ModalUpdateProgress$_onCancel(e) {
var element = $get(this._cancelControlID);
if (element && !element.disabled) {
if (this._pageRequestManager !== null) {
this._pageRequestManager.abortPostBack();
}
this._hide();
e.preventDefault();
return false;
}
}
function Sys$UI$_ModalUpdateProgress$_onLayout(e) {
this._layout();
}
function Sys$UI$_ModalUpdateProgress$_layout() {
var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
var clientWidth;
if (window.innerWidth) {
clientWidth = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));
} else {
clientWidth = document.documentElement.clientWidth;
}
var clientHeight;
if (window.innerHeight) {
clientHeight = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));
} else {
clientHeight = document.documentElement.clientHeight;
}
this._backgroundElement.style.left = scrollLeft+'px';
this._backgroundElement.style.top = scrollTop+'px';
this._backgroundElement.style.width = clientWidth+'px';
this._backgroundElement.style.height = clientHeight+'px';
this._foregroundElement.style.left = scrollLeft+((clientWidth-this._foregroundElement.offsetWidth)/2)+'px';
this._foregroundElement.style.top = scrollTop+((clientHeight-this._foregroundElement.offsetHeight)/2)+'px';
}
function Sys$UI$_ModalUpdateProgress$_show() {
this._attachPopup();
this._backgroundElement.style.display = '';
if (this._dynamicLayout) {
this._foregroundElement.style.display = 'block';
} else {
this._foregroundElement.style.visibility = 'visible';
}
this._disableTabs();
this._layout();
this._layout();
}
function Sys$UI$_ModalUpdateProgress$_disableTabs() {
var i = 0;
var tagElements;
var tagElementsInPopUp = new Array();
Array.clear(this._saveTabIndexes);
for (var j = 0; j < this._tagWithTabIndex.length; j++) {
tagElements = this._foregroundElement.getElementsByTagName(this._tagWithTabIndex[j]);
for (var k = 0 ; k < tagElements.length; k++) {
tagElementsInPopUp[i] = tagElements[k];
i++;
}
}
i = 0;
for (var j = 0; j < this._tagWithTabIndex.length; j++) {
tagElements = document.getElementsByTagName(this._tagWithTabIndex[j]);
for (var k = 0 ; k < tagElements.length; k++) {
if (Array.indexOf(tagElementsInPopUp, tagElements[k]) == -1) {
this._saveTabIndexes[i] = {tag: tagElements[k], index: tagElements[k].tabIndex};
tagElements[k].tabIndex="-1";
i++;
}
}
}
i = 0;
if ((Sys.Browser.agent === Sys.Browser.InternetExplorer) && (Sys.Browser.version < 7)) {
if (!(this._saveDisableSelectExecuted)) { // added
var tagSelectInPopUp = new Array();
tagElements = this._foregroundElement.getElementsByTagName('SELECT');
for (var k = 0 ; k < tagElements.length; k++) {
tagSelectInPopUp[i] = tagElements[k];
i++;
}
i = 0;
Array.clear(this._saveDisableSelect);
tagElements = document.getElementsByTagName('SELECT');
for (var k = 0 ; k < tagElements.length; k++) {
if (Array.indexOf(tagSelectInPopUp, tagElements[k]) == -1) {
this._saveDisableSelect[i] = {tag: tagElements[k], visib: this._getCurrentStyle(tagElements[k], 'visibility')} ;
tagElements[k].style.visibility = 'hidden';
i++;
}
}
this._saveDisableSelectExecuted = true; // added
}
}
}
function Sys$UI$_ModalUpdateProgress$_restoreTabs() {
for (var i = 0; i < this._saveTabIndexes.length; i++) {
this._saveTabIndexes[i].tag.tabIndex = this._saveTabIndexes[i].index;
}
if ((Sys.Browser.agent === Sys.Browser.InternetExplorer) && (Sys.Browser.version < 7)) {
for (var k = 0 ; k < this._saveDisableSelect.length; k++) {
this._saveDisableSelect[k].tag.style.visibility = this._saveDisableSelect[k].visib;
}
this._saveDisableSelectExecuted = false; // added
}
}
function Sys$UI$_ModalUpdateProgress$_hide() {
this._backgroundElement.style.display = 'none';
this._foregroundElement.style.display = 'none';
this._restoreTabs();
this._detachPopup();
}
function Sys$UI$_ModalUpdateProgress$_handleBeginRequest(sender, arg) {
var curElem = arg.get_postBackElement();
var showProgress = !this._associatedUpdatePanelId;
while (!showProgress && curElem) {
if (curElem.id && this._associatedUpdatePanelId === curElem.id) {
showProgress = true;
}
curElem = curElem.parentNode;
}
if (showProgress) {
this._timerCookie = window.setTimeout(this._startDelegate, this._displayAfter);
}
}
function Sys$UI$_ModalUpdateProgress$_startRequest() {
if (this._pageRequestManager.get_isInAsyncPostBack()) {
this._show();
}
this._timerCookie = null;
}
function Sys$UI$_ModalUpdateProgress$_handleEndRequest(sender, arg) {
this._hide();
if (this._timerCookie) {
window.clearTimeout(this._timerCookie);
this._timerCookie = null;
}
}
function Sys$UI$_ModalUpdateProgress$_getCurrentStyle(element, attribute, defaultValue) {
var currentValue = null;
if (element) {
if (element.currentStyle) {
currentValue = element.currentStyle[attribute];
} else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle(element, null);
if (style) {
currentValue = style[attribute];
}
}
if (!currentValue && element.style.getPropertyValue) {
currentValue = element.style.getPropertyValue(attribute);
}
else if (!currentValue && element.style.getAttribute) {
currentValue = element.style.getAttribute(attribute);
}
}
if ((!currentValue || currentValue == "" || typeof(currentValue) === 'undefined')) {
if (typeof(defaultValue) != 'undefined') {
currentValue = defaultValue;
}
else {
currentValue = null;
}
}
return currentValue;
}
function Sys$UI$_ModalUpdateProgress$dispose() {
this._detachPopup();
this._scrollHandler = null;
this._resizeHandler = null;
if (this._cancelHandler && $get(this._cancelControlID)) {
$removeHandler($get(this._cancelControlID), 'click', this._cancelHandler);
this._cancelHandler = null;
}
if (this._pageRequestManager !== null) {
this._pageRequestManager.remove_beginRequest(this._beginRequestHandlerDelegate);
this._pageRequestManager.remove_endRequest(this._endRequestHandlerDelegate);
}
Sys.UI._ModalUpdateProgress.callBaseMethod(this,"dispose");
}
function Sys$UI$_ModalUpdateProgress$initialize() {
this._foregroundElement = this.get_element();
this._backgroundElement = document.createElement('div');
this._backgroundElement.style.display = 'none';
this._backgroundElement.style.position = 'absolute';
this._backgroundElement.style.zIndex = 100000;
if (this._backgroundCssClass) {
this._backgroundElement.className = this._backgroundCssClass;
}
this._foregroundElement.parentNode.appendChild(this._backgroundElement);
this._foregroundElement.style.display = 'none';
this._foregroundElement.style.position = 'absolute';
this._foregroundElement.style.zIndex = this._getCurrentStyle(this._backgroundElement, 'zIndex', this._backgroundElement.style.zIndex) + 1;
if (this._cancelControlID) {
this._cancelHandler = Function.createDelegate(this, this._onCancel);
$addHandler($get(this._cancelControlID), 'click', this._cancelHandler);
}
this._scrollHandler = Function.createDelegate(this, this._onLayout);
this._resizeHandler = Function.createDelegate(this, this._onLayout);
this._beginRequestHandlerDelegate = Function.createDelegate(this, this._handleBeginRequest);
this._endRequestHandlerDelegate = Function.createDelegate(this, this._handleEndRequest);
this._startDelegate = Function.createDelegate(this, this._startRequest);
if (Sys.WebForms && Sys.WebForms.PageRequestManager) {
this._pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
}
if (this._pageRequestManager !== null ) {
this._pageRequestManager.add_beginRequest(this._beginRequestHandlerDelegate);
this._pageRequestManager.add_endRequest(this._endRequestHandlerDelegate);
}
}
Sys.UI._ModalUpdateProgress.prototype = {
get_backgroundCssClass: Sys$UI$_ModalUpdateProgress$get_backgroundCssClass,
set_backgroundCssClass: Sys$UI$_ModalUpdateProgress$set_backgroundCssClass,
get_cancelControlID: Sys$UI$_ModalUpdateProgress$get_cancelControlID,
set_cancelControlID: Sys$UI$_ModalUpdateProgress$set_cancelControlID,
_attachPopup: Sys$UI$_ModalUpdateProgress$_attachPopup,
_detachPopup: Sys$UI$_ModalUpdateProgress$_detachPopup,
_onCancel: Sys$UI$_ModalUpdateProgress$_onCancel,
_onLayout: Sys$UI$_ModalUpdateProgress$_onLayout,
_layout: Sys$UI$_ModalUpdateProgress$_layout,
_show: Sys$UI$_ModalUpdateProgress$_show,
_disableTabs: Sys$UI$_ModalUpdateProgress$_disableTabs,
_restoreTabs: Sys$UI$_ModalUpdateProgress$_restoreTabs,
_hide: Sys$UI$_ModalUpdateProgress$_hide,
_handleBeginRequest: Sys$UI$_ModalUpdateProgress$_handleBeginRequest,
_startRequest: Sys$UI$_ModalUpdateProgress$_startRequest,
_handleEndRequest: Sys$UI$_ModalUpdateProgress$_handleEndRequest,
_getCurrentStyle: Sys$UI$_ModalUpdateProgress$_getCurrentStyle,
dispose: Sys$UI$_ModalUpdateProgress$dispose,
initialize: Sys$UI$_ModalUpdateProgress$initialize
}
Sys.UI._ModalUpdateProgress.registerClass('Sys.UI._ModalUpdateProgress', Sys.UI._UpdateProgress);
|
|
|
|
|
i copy and paste .js of both but still no luck
i have a combobox on my page and when i click on button, my combobox disappears.
any help?
here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Demo</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
This page shows how to associate ModelUpdateProgress to individual UpdatePanels on the page.<br /><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<h1 style="border: solid 1 black;">
Panel #1:
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></h1>
<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem Value="2"></asp:ListItem>
<asp:ListItem Value="3"></asp:ListItem>
<asp:ListItem Value="4"></asp:ListItem>
<asp:ListItem Value="5"></asp:ListItem>
<asp:ListItem Value="6"></asp:ListItem>
</asp:DropDownList>
<asp1:ModelUpdateProgress ID="ModalUpdateProgress1" runat="server" DisplayAfter="0"
AssociatedUpdatePanelID="UpdatePanel1" BackgroundCssClass="modalProgressGreyBackground">
<ProgressTemplate>
<div class="modalPopup">
Loading
<img src="indicator.gif" align="middle" />
</div>
</ProgressTemplate>
</asp1:ModelUpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<h1 style="border: solid 1 black;">
Panel #2:
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></h1>
<asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" />
<asp1:ModelUpdateProgress ID="ModalUpdateProgress2" runat="server" DisplayAfter="300"
CancelControlID="Cancel" AssociatedUpdatePanelID="UpdatePanel2" BackgroundCssClass="modalProgressRedBackground">
<ProgressTemplate>
<div class="modalPopup">
Loading
<img src="indicator.gif" align="middle" />
<p>
<asp:Button ID="Cancel" runat="server" Text="Cancel" OnClick="Cancel_Click" /></p>
</div>
</ProgressTemplate>
</asp1:ModelUpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
|
|
|
|
|
i'm getting the error when i close my browser or if i click on of those buttons like button1 or button2
Line: 3109
Error: Sys.InvalidOperationException: Handler was not added through the Sys.UI.DomEvent.addHandler method
|
|
|
|
|
here is the error happening:
var $removeHandler = Sys.UI.DomEvent.removeHandler = function Sys$UI$DomEvent$removeHandler(element, eventName, handler) {
/// <param name="element" domelement="true" />
/// <param name="eventName" type="String" />
/// <param name="handler" type="Function" />
var e = Function._validateParams(arguments, [
{name: "element", domElement: true},
{name: "eventName", type: String},
{name: "handler", type: Function}
]);
if (e) throw e;
var browserHandler = null;
if ((typeof(element._events) !== 'object') || (element._events == null)) throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
var cache = element._events[eventName];
if (!(cache instanceof Array)) throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
var browserHandler = null;
for (var i = 0, l = cache.length; i < l; i++) {
if (cache[i].handler === handler) {
browserHandler = cache[i].browserHandler;
break;
}
}
if (typeof(browserHandler) !== 'function') throw Error.invalidOperation(Sys.Res.eventHandlerInvalid); <<<<<<<<<<<<< ERROR >>>>>>>>
if (element.removeEventListener) {
element.removeEventListener(eventName, browserHandler, false);
}
else if (element.detachEvent) {
element.detachEvent('on' + eventName, browserHandler);
}
cache.splice(i, 1);
}
|
|
|
|
|
It's probably problems in how you setup your page and code. Some scenarios are not supported. Please compare your code with the demo project. If you find problems in running the demo project, then post your question here. Otherwise, you will have to post some simple repro'able code for me to look into it...
|
|
|
|
|
I faced the same problem...
Someone else had this problem with ModalPopup (of AjaxControlToolkit) migrating from atlas to ajax: http://forums.asp.net/thread/1705462.aspx.
I've solved the problem setting ScriptMode property of ScriptManager to Release instead of Debug.
I don't know why but it works....
|
|
|
|
|
thank you so much for your reply and i did see the effect
if i have: compilation debug="false" then it works fine.
and if i have: compilation debug="true" then it throws me the error which i posted above.
i guess i have to live with compilation debug="false"
please update here if anybody has better idea of fixing this error.
thanks
|
|
|
|
|
Ting, fantastic code.
I generally don't like asking folks to modify their way of doing things (i.e., setting ScriptMode) and/or modifying config files that I didn't provide them (setting debug='true'). So I did some poking through the code and found that you set a flag called _windowHandlersAttached to true in the _attachPopup method when you set the resize and scroll event handlers. In the _detachPopup you then check this flag and only remove those handlers if its true. However, you never reset this flag to false, so subsequent calls to _detachPopup attempt to remove handlers that are no longer there.
Resetting the flag to false in _detachPopup corrected the issue in every scenario I've seen it in. Hopefully it will help others.
Cheers.
|
|
|
|
|
I had the same problem when clicking on a cancel button, and I didn't really want to disable debug to make it work, so I modified the js file as you said and it works perfectly now, thanks a lot!
And thanks Ting too for this wonderful control!
|
|
|
|
|
like adding this code ajaxcontroltoolkit ????
|
|
|
|
|
Parser Error Message: Could not load file or assembly 'Validators, Version=1.0.0.0' or one of its dependencies. The system cannot find the file specified.
add tagType="System.Web.UI.WebControls.CompareValidator" mappedTagType="System.Web.UI.Compatibility.CompareValidator, Validators, Version=1.0.0.0
add tagType="System.Web.UI.WebControls.CustomValidator" mappedTagType="System.Web.UI.Compatibility.CustomValidator, Validators, Version=1.0.0.0
add tagType="System.Web.UI.WebControls.RangeValidator" mappedTagType="System.Web.UI.Compatibility.RangeValidator, Validators, Version=1.0.0.0
i'm using AjaxControlToolkit v1.0.61025
|
|
|
|
|
just overwrite the web.config with the one from C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\.
The web.config in demo project was before AJAX RTM, so it needs to be updated.
you don't need AjaxControlToolkit, only "ASP.NET 2.0 AJAX Extensions" is required.
|
|
|
|
|
The issue remains! The modal pop up makes few dropdown lists disappear! Otherwise it works flawlessly!! HELP!
|
|
|
|
|
Please clarify 'disappear'...
1 the list is empty but the dropdown is still visible.
2 you can't see the dropdown at all
let me know which case it is. For case 1, i would say it could be your data binding problem.
For case 2, please post simple code example for me to repro.
|
|
|
|
|
The dropdown list doesnt show at all. here is the code snippet.
Some dropdowns are still visible and some disappear!
Thanks for looking into this! much appreciated
1. The modal window
-------------------------------------------------------------------------
<cc2:ModalUpdateProgress ID="ModalUpdateProgress1" BackgroundCssClass="modalBackground" AssociatedUpdatePanelID="UpdatePanel3" runat="server">
<ProgressTemplate><img src="Images/indicator.gif" /></ProgressTemplate>
</cc2:ModalUpdateProgress>
--------------------------------------------------------------------------
2. The dropdownlist
-------------------------------------------------------------------------
<div align="right">
<asp:DropDownList runat="server" ID="ddlMilestoneTemplate" CssClass="dropdown" DataSourceID="odsMilestonesTemplate" DataTextField="TEMPLATE_NAME" DataValueField="TEMPLATE_NAME"></asp:DropDownList><asp:ObjectDataSource ID="odsMilestonesTemplate" runat="server"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetMilestoneTemplate"
TypeName="modMilestonesTableAdapters.nVisionMilestoneTemplateTableAdapter">
<SelectParameters>
<asp:QueryStringParameter Name="record_id" QueryStringField="ID" Type="Decimal" />
</SelectParameters>
</asp:ObjectDataSource>
<asp:Button runat="server" ID="btnAddTemplate" CssClass="button" OnClick="btnAddTemplate_Click" />
</div>
----------------------------------------------------------------
|
|
|
|
|
Try the following Default.aspx in the demo project(remember to hook up the event DropDownList1_SelectedIndexChanged in code behind). And I couldn't repro.
<!--------------Default.aspx-------------->
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="Demo._Default" %>
<%@ Register Assembly="AjaxControls" Namespace="AjaxControls" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Demo</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
This page shows that the ModalUpdateProgress works for all async postbacks on the
page.<br />
<br />
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Text="Option A"></asp:ListItem>
<asp:ListItem Text="Option B"></asp:ListItem>
<asp:ListItem Text="Option C"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server">
<asp:ListItem Text="Option A"></asp:ListItem>
<asp:ListItem Text="Option B"></asp:ListItem>
<asp:ListItem Text="Option C"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" />
<asp:LinkButton ID="Button3" runat="server" Text="Button3" OnClick="Button3_Click" />
<asp:ModalUpdateProgress ID="ModalUpdateProgress1" runat="server" DisplayAfter="0"
BackgroundCssClass="modalProgressGreyBackground">
<ProgressTemplate>
<div class="modalPopup">
Loading
<img src="indicator.gif" align="middle" />
</div>
</ProgressTemplate>
</asp:ModalUpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<h1 style="border: solid 1 black;">
Panel #1:
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></h1>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
<asp:AsyncPostBackTrigger ControlID="Button2" />
<asp:AsyncPostBackTrigger ControlID="Button3" />
<asp:AsyncPostBackTrigger ControlID="DropDownList1" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
|
|
|
|
|
Hi,
Check out the above post. It says that it disappears when the dropdownlist is outside the updatepanel!!
Think you can crack the code?
thanks
|
|
|
|
|
We have this same problem and it seems to be related to multiple Conditional UpdatePanels.
When you have an updatepanel that triggers an ajax postback and you have dropdowns in other updatepanels (that aren't getting updated as part of the postback), then those dropdowns remain hidden.
Would be very keen to see a fix for this because it is a big problem for us. The workaround seems to be to manually update any other updatepanels that contain dropdowns during the postback...but that is an ugly workaround!
This is only a problem with IE6 by the way...works fine in IE7 and FF 2.0.
Thanks,
Jason
PS. Love this control by the way...really nice. Would be good to see this included into the toolkit...have you suggested this to the Ajax team? Would get my vote for sure.
|
|
|
|
|
OK...some further investigation has revealed that it seems to be a problem with ModalPopup in conjunction with ModalUpdateProgress.
When you display a modalpopup, it hides all your dropdowns so when the ModalUpdateProgress control saves its collection of dropdowns and their current visibility (_disableTabs), they are all saved as "hidden" so it restores them as hidden (_restoreTabs).
|
|
|
|
|
I encountered a problem that after the modalupdateprogress dissappeared (work done), all my dropdownlist also went dissappeared, someone advise ?
Thanks
*** i m using masterpage content and the dropdownlist is out of updatepanel ***
TQ
|
|
|
|
|
Same thing for me. Is there a solution?
|
|
|
|
|