|
Hi Ting,
I managed to isolate the cause of the problem with the disappearing dropdowns in the following forums post:
http://www.codeproject.com/Ajax/ModalUpdateProgress.asp?df=100&forumid=347206&fr=26&select=2057010#xx2057010xx
Do you have a resolution for this?
Thanks,
Jason
|
|
|
|
|
It's an issue (or a bug?) in IE6 when rendering dropdown. The ModalPopup script chose to make the dropdown invisible to workaround the issue.
|
|
|
|
|
Hi Ting,
I understand the need for the ModalPopup to hide the dropdowns in IE6, but the problem is that your ModalUpdateProgress control does not work well with the modal popup and causes the dropdowns to remain hidden even after a ajax postback.
The sequence that causes the problem is as follows:
1. Modal popup is displayed and temporarily hides all of the dropdowns on the page.
2. Perform an ajax postback from the modal popup via a button.
3. Modal update progress control displays and captures a list of all of the dropdowns and their current visible status.
4. Modal popup hides and shows all the hidden dropdowns.
5. Modal update progress control hides and sets all the dropdowns back to hidden as that was the state they were all saved in when the modal popup was visible.
Possibly your modal update progress control needs to detect if a modal popup is visible and only save/restore the dropdowns within the modal popup rather than the whole page.
Cheers,
Jason
|
|
|
|
|
Interesting scenario. You are trying to get ModalPopup and ModalUpdateProgress to work together if my understanding is correct? My question is: do you really need a ModalUpdateProgress in this case? Can you simply place a regular UpdateProgress on the ModalPopup?
On the other hand, a possible solution would be to share the dropdown status in a global variable in js...Thanks for sharing the problem.
|
|
|
|
|
Yes, we use your ModalUpdateProgress in a master page so that all ajax activity is represented in the same way, even when modal popups are displayed.
Your control works very nicely with modal popups too, except for this one IE6 issue with dropdowns. If you could figure out a workaround that would be *fantastic*.
I have implemented a hack that will work for anyone that doesn't use hidden dropdowns - see the following post:
http://www.codeproject.com/Ajax/ModalUpdateProgress.asp?select=2057014&df=100&forumid=347206#xx2057014xx
|
|
|
|
|
Hi,
I have a javascript error when I try to add the CancelControlID parameter :
Sys.ArgumentNullException: Value cannot be null. Parameter name: element
Have someone ever seen this error ?
Thanks.
Philippe.
|
|
|
|
|
The CancelControlID has to reference a clickable server control(i.e. Button with runat=server) within the ProgressTemplate.
|
|
|
|
|
Thank you for your answer.
Here is my code :
<AjaxControls:ModalUpdateProgress ID="ModalUpdateProgress1" runat="server" DisplayAfter="500" BackgroundCssClass="modalProgressGreyBackground" CancelControlID="CancelButton"><br />
<ProgressTemplate><br />
<div class="modalPopup"><br />
<asp:Image ID="LoadingImage" SkinID="LoadingImage" runat="server" ImageAlign="Middle" /><br />
<br /><br />
<%=TraitementEnCours %><br />
</div><br />
<asp:Button runat="server" ID="CancelButton" /><br />
</ProgressTemplate><br />
</AjaxControls:ModalUpdateProgress><br />
When I remove CancelControlID="CancelButton", I have no javascript error.
But the Cancel button doesn't work...
Philippe.
|
|
|
|
|
In the demo project (MultiPanel.aspx) there is an example of cancel control. Please try it out and see if it works for you.
|
|
|
|
|
Yes it works.
But I have to remove :
<br />
<add tagType="System.Web.UI.WebControls.CompareValidator" mappedTagType="System.Web.UI.Compatibility.CompareValidator, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><br />
<add tagType="System.Web.UI.WebControls.CustomValidator" mappedTagType="System.Web.UI.Compatibility.CustomValidator, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><br />
<add tagType="System.Web.UI.WebControls.RangeValidator" mappedTagType="System.Web.UI.Compatibility.RangeValidator, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><br />
<add tagType="System.Web.UI.WebControls.RegularExpressionValidator" mappedTagType="System.Web.UI.Compatibility.RegularExpressionValidator, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><br />
<add tagType="System.Web.UI.WebControls.RequiredFieldValidator" mappedTagType="System.Web.UI.Compatibility.RequiredFieldValidator, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><br />
<add tagType="System.Web.UI.WebControls.ValidationSummary" mappedTagType="System.Web.UI.Compatibility.ValidationSummary, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><br />
in the web.config file.
In my project, ModalUpdateProgress is in a masterpage which contains 2 update panels.
Philippe.
|
|
|
|
|
There's a bug in ModalUpdateProgress.cs:
Replacing the section of cancelControlID with the following should fix the problem:
string cancelControlID = null;
if (!string.IsNullOrEmpty(this._cancelControlID))
{
Control control = this.NamingContainer.FindControl(this._cancelControlID);
if (control == null)
{
control = this.Page.FindControl(this._cancelControlID);
}
if (control == null)
{
throw new InvalidOperationException(string.Format(CultureInfo.InvariantCulture, "No control found for CancelControlID '{0}'.", new object[] { this._cancelControlID }));
}
cancelControlID = control.ClientID;
}
I will try to get the download updated along with an up-to-date web.config and anotehr bug fix on JS.
BTW: thanks for pointing out this problem! Please let me know if it works for you.
-- modified at 17:53 Thursday 21st June, 2007
|
|
|
|
|
Thank you for your help.
Your code works but it raises a javascript error :
Sys.InvalidOperationException: Sys.InvalidOperationException: Handler was not added through the Sys.UI.DomEvent.addHandler method
It doesn't seem to be a problem because everything is still working...
Thank you again.
Philippe.
|
|
|
|
|
If you disable debug mode in web.config, the exception should go away...
|
|
|
|
|
It seems to work.
Thank you very much for your help.
Philippe.
|
|
|
|
|
or Try to make that button visible!!!
|
|
|
|
|
Is there a way to capture the "Click" event when the "Cancel" button is clicked?
|
|
|
|
|
Anyone figure out a workaround for disappearing DropDownLists not in an UpdatePanel?
|
|
|
|
|
Our hack was to change the following line:
from:
//this._saveDisableSelect[i] = {tag: tagElements[k], visib: this._getCurrentStyle(tagElements[k], 'visibility')} ;
to:
this._saveDisableSelect[i] = {tag: tagElements[k], visib: 'visible'} ;
This works for us because we don't ever hide individual dropdowns in our application. It wouldn't work if you did hide individual dropdowns as they would be made visible every time by the modalupdateprogress control.
Another workaround seems to be to manually update the updatepanel that the dropdowns live in during the postback. This places an extra load on the data sent to the browser and we didn't want to do that.
Hopefully Ting can come up with a better solution.
Jason
|
|
|
|
|
|
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>
|
|
|
|
|