ASP.NET AJAX Discussion and Suggestions

Re: UpdatePanel Shows, but doesn't Hide anymore?

Vince Xu - MSFT — Wed, 03 Sep 2008 03:12:29 GMT

Hi,

If you want to output the html characters from database to the page, you can use Server.HtmlEncode("The characters recieved from database") to transfer it before it is responsed to the page.

Re: UpdatePanel Shows, but doesn't Hide anymore?

Wyerarch — Tue, 02 Sep 2008 12:10:43 GMT

Vince,

I'd been experiecing similar problems as the user in the following post, and thought that the solution i'd suggested to him was correct, after reading around:

http://forums.asp.net/t/1313604.aspx

Following what his solution was, I tried that and it didn't solve this problem. However, I had a look in the database, to see if any weird data was in there, and I found some html in a field that a user had saved. When I removed it from the database, everything started working OK again!!!

For some reason, it was some html markup in the database that when being drawn to the updatepanel was throwing the modalpopup out - I don't understad why or how this would do it, but it seems apparent that it was.... any ideas?

Jamie.

Re: UpdatePanel Shows, but doesn't Hide anymore?

Wyerarch — Tue, 02 Sep 2008 11:02:17 GMT

Vince,

There are two update panels, basically one has "properties" in it (pnlPropsU), and the other contains the "fields" that the properties can be set for (upDesign).

When in use, I click on a field, which triggers the properties of that field to be loaded into pnlPropsU. When I change a value in pnlPropsU, those changes should be reflected in upDesign. Now, all this WORKS, when the modalPopupExtender is turned off, but when it is turned on, it works for when pnlPropsU is doing the async postback, but when upDesign is doing the async postback, it fails on the mdlProgress hide method - as if the modalPopupExtender has been removed entirely during the async postback on that updatepanel.

So my updatepanels are like so:

<cc1:CollapsiblePanelExtender ID="cpl3" runat="server" TargetControlID="pnlProps"

CollapsedSize="0"

Collapsed="True"

ExpandControlID="lblProps"

CollapseControlID="lblProps"

TextLabelID="lblProps"

CollapsedText=" Field Properties (Show Details)"

ExpandedText=" Field Properties (Hide Details)"

ImageControlID="imgProps"

ExpandedImage="images/collapse.jpg"

CollapsedImage="images/expand.jpg" Enabled="True"

</cc1:CollapsiblePanelExtender>

<asp:Image ID="imgProps" runat="server" />

<asp:Label ID="lblProps" runat="server"></asp:Label>

</div>

<asp:Panel runat="server" id="pnlProps" CssClass="cplContent">

<asp:UpdatePanel ID="pnlPropsU" runat="server" UpdateMode="Conditional">

<cc1:TabContainer ID="tabProps" runat="server" ActiveTabIndex="0" EnableViewState="true" >

<cc1:TabPanel ID="tabPropsSettings" runat="server" HeaderText="Settings">

Field Settings

</HeaderTemplate>

<asp:PlaceHolder ID="pnlUpdateSettingsProps" runat="server">

<p>Please select a field to view its settings</p>

</div>

</asp:PlaceHolder>

</ContentTemplate>

</cc1:TabPanel>

<cc1:TabPanel ID="tabPropsStyle" runat="server" HeaderText="Style">

Field Appearance

</HeaderTemplate>

<asp:PlaceHolder ID="pnlUpdateStyleProps" runat="server"></asp:PlaceHolder>

</ContentTemplate>

</cc1:TabPanel>

</cc1:TabContainer>

</div>

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="hdfEditTS" EventName="ValueChanged" />

</Triggers>

</asp:UpdatePanel>

</asp:Panel>

</div>

<asp:Panel ID="CssContainer" runat="server">

<asp:UpdatePanel runat="server" ID="upDesign" UpdateMode="Conditional">

<asp:PlaceHolder runat="server" ID="myPlaceHolder">

</asp:PlaceHolder>

<asp:Literal ID="LitScripts" runat="Server" Enableviewstate="false" Mode="PassThrough">

</asp:Literal>

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="hdfUpdate" EventName="ValueChanged" />

</Triggers>

</asp:UpdatePanel> <div runat="server" id="dropArea_0_handleRight" style="width:3px;

top:0px;cursor:e-resize;position:absolute;" class="handleRightDA" onmouseover="colourResize(this);" onmouseleave="colourResizeRemove(this);" >

</div>

<div runat="server" id="dropArea_0_handleCorner" style="width:3px;

height:3px;cursor:se-resize;position:absolute;" class="handleCornerDA" onmouseover="colourResize(this);" onmouseleave="colourResizeRemove(this);" >

</div>

<div runat="server" id="dropArea_0_handleBottom" style="height:3px;

left:0px;cursor:s-resize;position:absolute;" class="handleBottomDA" onmouseover="colourResize(this);" onmouseleave="colourResizeRemove(this);">

</div>

</asp:Panel>

</ContentTemplate>

</cc1:TabPanel>

</cc1:TabContainer>

The update panel is created outside of all of this as follows:

<asp:Panel ID="pnlProgress" runat="server" CssClass="modalPopup" Style="display: none" Width="255px">

<p>Updating...</p>

</div>

</asp:Panel>

<cc1:ModalPopupExtender ID="mdlProg" runat="server" BehaviorID="mdlProg"

TargetControlID="pnlProgress"

PopupControlID="pnlProgress"

BackgroundCssClass="modalBackground"

My code-behind for when the ValueChanged triggers are fired, are as so, they just call other methods that add controls to the placeholders, or set values in textboxes:

protected void hdfEditTS_ValueChanged(object sender, EventArgs e)

{

loadProperties();

}

protected void hdfUpdate_ValueChanged(object sender, EventArgs e)

{

startRender();

}

To trigger this, I use javascript events that are fired from within attached events to boxes etc:

e.g:

$find("tabContents_tabDesign_cpl2").set_Collapsed(true);

$find("tabContents_tabDesign_cpl3").set_Collapsed(false);

document.getElementById("hdfEditID").setAttribute("value",id);

document.getElementById("hdfEditTS").setAttribute("value",d.getHours()+d.getMinutes()+d.getSeconds+d.getMilliseconds());

__doPostBack('hdfEditTS','Editing');

Now, this works fine for the modal popup being triggered for the async postback on items loaded into pnlPropsU, but if I try and do it on upDesign, as such:

document.getElementById("hdfUpdate").setAttribute("value","0");

document.getElementById("hdfUpdate").setAttribute("value",element.id+element.value);

DynForms.DBAccess.InsertField(_formID,sElement,sObjType,element.style.width,element.style.height,diffX+"px",diffY+"px",sObjID,sSecID,sLabelPos,sHeight,sWidth,onGetDataComplete, onGetDataTimeOut);

var id = setTimeout(function(){__doPostBack('hdfUpdate','ValueChanged')},1000); //note, I have tried this without the timeout as well, this is just her because on VPN I get DB lag.

As soon as ANYTHING changes in hdfUpdate, i.e. the ValueChanged trigger occurs, the modal popup shows, the database is written to OK, the value in hdfUpdate is written to, but then the modalpopup cannot be found to be removed.

I'm sure I posted it earlier, but I am using the following to register the async events to show/hide the modalpop:

// register for our events

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

function beginRequest(sender, args){

// show the popup

$find('mdlProg').show();

}

function endRequest(sender, args) {

// hide the popup

$find('mdlProg').hide(); //THIS IS THE LINE THAT ERRORS - The modal cannot be found, but only during hdfUpdate having it's value changed....

}

I have ensured that it's not the code behind that is throwing the problem, as I have commented out everything that it does in the loadProperties, and startRender methods, just to make sure.

If you need any more information -please let me know, and THANKYOU! for your help.

James.

Re: UpdatePanel Shows, but doesn't Hide anymore?

Vince Xu - MSFT — Tue, 02 Sep 2008 10:37:03 GMT

What is the stucture of this UpdatePanel like? Maybe I can make a sample to try on it.

Re: UpdatePanel Shows, but doesn't Hide anymore?

Wyerarch — Tue, 02 Sep 2008 10:30:53 GMT

I still get the same error, and again,still only on that one update panel.

Re: UpdatePanel Shows, but doesn't Hide anymore?

Vince Xu - MSFT — Tue, 02 Sep 2008 10:07:37 GMT

Just create a new aspx page and copy the source to it to try it.

Re: UpdatePanel Shows, but doesn't Hide anymore?

Wyerarch — Tue, 02 Sep 2008 09:46:30 GMT

Copy and paste the source code out? or start from scratch? - as my page is HUGE!

Re: UpdatePanel Shows, but doesn't Hide anymore?

Vince Xu - MSFT — Tue, 02 Sep 2008 09:36:26 GMT

Hi,

It's weird. I met this issue some days ago. I suggest you create a new page to build the functionality.

Re: UpdatePanel Shows, but doesn't Hide anymore?

Wyerarch — Tue, 02 Sep 2008 08:59:10 GMT

Hi Vince,

Thank you for taking the time to reply. Unfortunately, this throws the same error. For that one UpdatePanel, anything that causes the $find('mdlProgress') to fire, comes back saying 'null' is null or not an object.

It only does it with this one updatepanel, and not the other

Jamie.

Re: UpdatePanel Shows, but doesn't Hide anymore?

Vince Xu - MSFT — Tue, 02 Sep 2008 03:14:09 GMT

Hi,

You can try to hide the modalpopup in pageLoad event.

function pageLoad()
{
$find('mdlProgress').hide();
}

So you can check if it can be found in pageLoad with the behavior id.

If it's not worked, please change the bahaviorid and rebuild again.

Re: UpdatePanel Shows, but doesn't Hide anymore?

Wyerarch — Mon, 01 Sep 2008 14:08:59 GMT

And the plot thickens...

This only occurs on one updatepanel. The other update panel works fine.

Both update panels have async postback triggers attached to hidden fields. Both hidden fields have their values changed by JavaScript. Both triggers are set by by doing a postback using __doPostBack from the javascript.

Only one throws the JS error on the .hide() method!

Re: UpdatePanel Shows, but doesn't Hide anymore?

Wyerarch — Fri, 29 Aug 2008 16:14:12 GMT

I've tested under a fresh install VM, and it works under that - but not on my browser on my pc.....

It's not the code...

Could it be a hotfix in .net or something?

How can I find what is blocking it?

Re: UpdatePanel Shows, but doesn't Hide anymore?

Wyerarch — Fri, 29 Aug 2008 16:07:42 GMT

But it doesn't happen in Firefox!

UpdatePanel Shows, but doesn't Hide anymore?

Wyerarch — Fri, 29 Aug 2008 11:41:36 GMT

Hi All,

I use the following, which detects updates with my updatepanels, and shows a modalpopup when the postback begins, and closes it when it completes.

// register for our events

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

function beginRequest(sender, args){

// show the popup

$find('mdlProgress').show();

}

function endRequest(sender, args) {

// hide the popup

//document.getElementById('mdlProgress').hide();

$find('mdlProgress').hide();

}

</script>

This has been working fine, and has been live fine. But when I came to use it this morning (after no changes that I can think of), whenever a postback/update occurs, I get a javascript error on $find('mdlProgress').hide();, saying 'null' is null or not a value. It still shows fine before the update/postback though.

I'm a little perplexed as I'm sure I haven't changed anything, and I left it with the boss checking it last night and he didn't report any problems.

Can ANYONE think of ANYTHING that could have caused this?

Thanks,

James.