UpdatePanel and ModalPopupExtender control

Hello all

For my error messages I'm using a ModalPopupExtender with a red background to show the user has done something wrong.
If for example the user types in a bad username/password combination, it does a postback and after that it shows me the ModalPopup.

This works fine!

But I want to use the UpdatePanel control of course to make it more smooth, nicer and application alike.

When I put the ModalPopupExtender and Panel (both are on my masterpage) in an UpdatePanel like this:

<ajax:UpdatePanel id="myUpdatePanel" runat="server">
<ContentTemplate>

<toolkit:ModalPopupExtender ID="errorModalPopup"
runat="server"
TargetControlID="btnHidden"
PopupControlID="ErrorPanel"
CancelControlID="btnApply"
DropShadow="true"
BackgroundCssClass="ErrorModalPopupClass"
BehaviorID="test2">
</toolkit:ModalPopupExtender>

<asp:Panel ID="ErrorPanel" runat="server" CssClass="ErrorPanelSettingsClass" Style='display:none' DefaultButton='btnApply'>
<asp:Label ID="lblErrorMessage" runat="server"></asp:Label><br />
<asp:ImageButton ID="btnApply" ImageUrl="~/Images/icons/apply.png" runat="server" CssClass="ApplyButton" />
</asp:Panel>

<div style='display: none'>
<asp:Button ID="btnHidden" runat="server" />
</div>

</ContentTemplate>
</ajax:UpdatePanel>

When I now put my Login Control on my Login.aspx page also into an UpdatePanel, it doens't work as expected. When I click the Login button, nothing happens...

Does anybody know how to achieve this? I really like this solution.

thx !

Gerrie

Please try your scenario with the recently available61106 release of the Toolkit (and ASP.NET AJAX Beta 2). If the problem persists, then please reply with acomplete, self-contained sample page that demonstrates the problem so that we can investigate the specific behavior you're seeing. Thank you!

David,

I don't know if you finally got the sample you needed or not. But so you know, I do have the latest update to the toolkit. However I can't get the modalpopup and updatepanel to work together properly. And that's not to mention the funny issue of the popup sometimes showing up automatically and without being triggered from the code. I saw others had that problem, too.

Anyways, here is a self-contained test page for you. It is based on some code initiallyborrowedfrom Ted Glaza, changed to VB, then AJAX, then simplified and then changed to fit this sample! :)

Any solution or workaround you can provide me with, is highly appreciated. I'm already in a time crunch and don't have the luxury of playing around with these controls. By the way, in real life,my popup control has to be launched from imagebuttons in a DataGrid. All are created on the server-side and I can't change that design easily.

Thanks,

Kathy

<%

@.PageLanguage="VB" %>

<%

@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

scriptrunat="server">ProtectedSub CommandButton_OnSelect(ByVal senderAsObject,ByVal eAs CommandEventArgs)Dim IDAsInteger =CInt(e.CommandArgument)Dim xAs System.Xml.XmlNode = Data.GetXmlDocument.SelectSingleNode(String.Format("descendant::item[@.id='{0}']", ID))IfNot IsNothing(x)Then

myDynamicLabel.Text =

"The URL is: " & x.Attributes("url").ValueElse

myDynamicLabel.Text =

"Item with ID: " & ID.ToString &" could not be found."EndIf

ModalPopupExtender.Show()

EndSub

</

script>

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><title>Untitled Page</title><styletype="text/css">

/*Modal Popup*/

.modalBackground

{background-color:Gray;filter:alpha(opacity=70);opacity:0.7;

}

.modalPopup

{background-color:#FFF8C6;border-width:3px;border-style:solid;border-color:Gray;padding:3px;width:350px;

}

</style>

</

head>

<

body><formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering=true/><p>

Some nonsense text to show the postback. blah di blah.

kjdhfjkh ksdhhsdfhj haunnsdju urfh kjhdjkf kjhdflgkh hr ujseopop';ui;j m[plio;l hjyryawre ghvnb mdfb jyutet ihe lijj huhiut hiuhvnmx mnbuyteruy gwerbmbnhfghtf jhel/krtjk ih banvdhtsfr cvnhfhtfd wklieth bnhdchzgf dejhfgkuhgr jwhg

lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f

</p><p>

Some nonsense text to show the postback. blah di blah.

kjdhfjkh ksdhhsdfhj hak kkfguhe mndfgkjh dkjg hzsnmbrtulk typi ,bngf aytwr eb mbhjvu ;orijnjm BFMhbmhdfbv ghvme hjmhg fbmbmnb mnbz

unnsdju urfh lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f

</p><p>

Some nonsense text to show the postback. blah di blah.

kjdhfjkh ksdhhsdfhj haunnsdju urfh lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f

</p><asp:XmlDataSourceID="Data"runat="server"><Data><items><itemid="1"name="ASP.NET"url="http://msdn.microsoft.com"/><itemid="2"name="AJAX"url="http://ajax.asp.net"/><itemid="3"name="AJAX Control Toolkit"url="http://ajax.asp.net/ajaxtoolkit"/></items></Data></asp:XmlDataSource><!-- If you start the UpdatePanel here, clicking the links won't work -->

<!-- Databound list of LinkButtons that fire server side Command events passing in their ID --><asp:DataListID="List"runat="server"DataSourceID="Data"><HeaderTemplate>Microsoft Web Development Technologies:</HeaderTemplate><ItemTemplate><asp:LinkButtonID="CommandButton"runat="server"Text='<%# Eval("name") %>'CommandName="Select"CommandArgument='<%# Eval("id") %>'OnCommand="CommandButton_OnSelect"/></ItemTemplate></asp:DataList><!-- If you start the UpdatePanel here, you need some ControlID for the trigger.

Try CommandButton and you get an error that it doesn't exit.

Try List and the popup doesn't show.

What else?!

You can set it to something totally unrelated, like btnTest for the popup to work

or you can remove the UpdatePanel altogether, since it's no good anyways...

-->

<asp:UpdatePanelID="UPPnl"runat="Server"UpdateMode="Conditional"><ContentTemplate><asp:PanelID="Panel1"runat="server"width=630CssClass="modalPopup"style="display:none">

<asp:LabelID="myDynamicLabel"runat="server"></asp:Label>

<asp:ButtonCssClass="command"ID="Cancel"runat="server"Text="Cancel"CausesValidation="False"/></asp:Panel></ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="btnTest"/></Triggers></asp:UpdatePanel>

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender"runat="server"TargetControlID="btnTest"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="Cancel"CancelControlID="Cancel"/><br/><br/><asp:ButtonID="btnTest"runat="server"Text="Don't Click Me!"/></form>

</

body>

</

html>

David,

I don't know if you finally got the sample you needed or not. But so you know, I do have the latest update to the toolkit. However I can't get the modalpopup and updatepanel to work together properly. And that's not to mention the funny issue of the popup sometimes showing up automatically and without being triggered from the code. I saw others had that problem, too.

Anyways, here is a self-contained test page for you. It is based on some code initiallyborrowedfrom Ted Glaza, changed to VB, then AJAX, then simplified and then changed to fit this sample! :)

Any solution or workaround you can provide me with, is highly appreciated. I'm already in a time crunch and don't have the luxury of playing around with these controls. By the way, in real life,my popup control has to be launched from imagebuttons in a DataGrid. All are created on the server-side and I can't change that design easily.

Thanks,

Kathy

<%

@.PageLanguage="VB" %>

<%

@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

scriptrunat="server">ProtectedSub CommandButton_OnSelect(ByVal senderAsObject,ByVal eAs CommandEventArgs)Dim IDAsInteger =CInt(e.CommandArgument)Dim xAs System.Xml.XmlNode = Data.GetXmlDocument.SelectSingleNode(String.Format("descendant::item[@.id='{0}']", ID))IfNot IsNothing(x)Then

myDynamicLabel.Text =

"The URL is: " & x.Attributes("url").ValueElse

myDynamicLabel.Text =

"Item with ID: " & ID.ToString &" could not be found."EndIf

ModalPopupExtender.Show()

EndSub

</

script>

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><title>Untitled Page</title><styletype="text/css">

/*Modal Popup*/

.modalBackground

{background-color:Gray;filter:alpha(opacity=70);opacity:0.7;

}

.modalPopup

{background-color:#FFF8C6;border-width:3px;border-style:solid;border-color:Gray;padding:3px;width:350px;

}

</style>

</

head>

<

body><formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering=true/><p>

Some nonsense text to show the postback. blah di blah.

kjdhfjkh ksdhhsdfhj haunnsdju urfh kjhdjkf kjhdflgkh hr ujseopop';ui;j m[plio;l hjyryawre ghvnb mdfb jyutet ihe lijj huhiut hiuhvnmx mnbuyteruy gwerbmbnhfghtf jhel/krtjk ih banvdhtsfr cvnhfhtfd wklieth bnhdchzgf dejhfgkuhgr jwhg

lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f

</p><p>

Some nonsense text to show the postback. blah di blah.

kjdhfjkh ksdhhsdfhj hak kkfguhe mndfgkjh dkjg hzsnmbrtulk typi ,bngf aytwr eb mbhjvu ;orijnjm BFMhbmhdfbv ghvme hjmhg fbmbmnb mnbz

unnsdju urfh lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f

</p><p>

Some nonsense text to show the postback. blah di blah.

kjdhfjkh ksdhhsdfhj haunnsdju urfh lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f

</p><asp:XmlDataSourceID="Data"runat="server"><Data><items><itemid="1"name="ASP.NET"url="http://msdn.microsoft.com"/><itemid="2"name="AJAX"url="http://ajax.asp.net"/><itemid="3"name="AJAX Control Toolkit"url="http://ajax.asp.net/ajaxtoolkit"/></items></Data></asp:XmlDataSource><!-- If you start the UpdatePanel here, clicking the links won't work -->

<!-- Databound list of LinkButtons that fire server side Command events passing in their ID --><asp:DataListID="List"runat="server"DataSourceID="Data"><HeaderTemplate>Microsoft Web Development Technologies:</HeaderTemplate><ItemTemplate><asp:LinkButtonID="CommandButton"runat="server"Text='<%# Eval("name") %>'CommandName="Select"CommandArgument='<%# Eval("id") %>'OnCommand="CommandButton_OnSelect"/></ItemTemplate></asp:DataList><!-- If you start the UpdatePanel here, you need some ControlID for the trigger.

Try CommandButton and you get an error that it doesn't exit.

Try List and the popup doesn't show.

What else?!

You can set it to something totally unrelated, like btnTest for the popup to work

or you can remove the UpdatePanel altogether, since it's no good anyways...

-->

<asp:UpdatePanelID="UPPnl"runat="Server"UpdateMode="Conditional"><ContentTemplate><asp:PanelID="Panel1"runat="server"width=630CssClass="modalPopup"style="display:none">

<asp:LabelID="myDynamicLabel"runat="server"></asp:Label>

<asp:ButtonCssClass="command"ID="Cancel"runat="server"Text="Cancel"CausesValidation="False"/></asp:Panel></ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="btnTest"/></Triggers></asp:UpdatePanel>

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender"runat="server"TargetControlID="btnTest"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="Cancel"CancelControlID="Cancel"/><br/><br/><asp:ButtonID="btnTest"runat="server"Text="Don't Click Me!"/></form>

</

body>

</

html>

Kathy,

You seem to be trying to do dynamic population. If so, then I'd recommend the approach I blog here:http://blogs.msdn.com/delay/archive/2006/09/19/762609.aspx.

Alternatively, if you're willing to have slightly larger pages, the below is your sample transformed into a solution that doesn't use postbacks and therefore doesn't need UpdatePanels:

<%@. Page Language="VB" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><!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>Untitled Page</title> <style type="text/css"> /*Modal Popup*/.modalBackground{ background-color:Gray; filter:alpha(opacity=70); opacity:0.7; }.modalPopup{ background-color:#FFF8C6; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:350px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> <p> Some nonsense text to show the postback. blah di blah. kjdhfjkh ksdhhsdfhj haunnsdju urfh kjhdjkf kjhdflgkh hr ujseopop';ui;j m[plio;l hjyryawre ghvnb mdfb jyutet ihe lijj huhiut hiuhvnmx mnbuyteruy gwerbmbnhfghtf jhel/krtjk ih banvdhtsfr cvnhfhtfd wklieth bnhdchzgf dejhfgkuhgr jwhg lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f </p> <p> Some nonsense text to show the postback. blah di blah. kjdhfjkh ksdhhsdfhj hak kkfguhe mndfgkjh dkjg hzsnmbrtulk typi ,bngf aytwr eb mbhjvu ;orijnjm BFMhbmhdfbv ghvme hjmhg fbmbmnb mnbz unnsdju urfh lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f </p> <p> Some nonsense text to show the postback. blah di blah. kjdhfjkh ksdhhsdfhj haunnsdju urfh lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f </p> <asp:XmlDataSource ID="Data" runat="server"> <Data> <items> <item id="1" name="ASP.NET" url="http://msdn.microsoft.com" /> <item id="2" name="AJAX" url="http://ajax.asp.net" /> <item id="3" name="AJAX Control Toolkit" url="http://ajax.asp.net/ajaxtoolkit" /> </items> </Data> </asp:XmlDataSource> <asp:DataList ID="List" runat="server" DataSourceID="Data"> <HeaderTemplate> Microsoft Web Development Technologies:</HeaderTemplate> <ItemTemplate> <asp:LinkButton ID="CommandButton" runat="server" Text='<%# Eval("name")%>' CommandName="Select" CommandArgument='<%# Eval("id")%>'/> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="CommandButton" PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="Cancel" CancelControlID="Cancel" /> <asp:Panel ID="Panel1" runat="server" Width="630" CssClass="modalPopup" Style="display: none"> <asp:Label ID="myDynamicLabel" runat="server" Text='<%# Eval("url")%>'></asp:Label> <asp:Button CssClass="command" ID="Cancel" runat="server" Text="Cancel" CausesValidation="False" /> </asp:Panel> </ItemTemplate> </asp:DataList> </form></body></html>

Sorry, for my bad english. Maybe this is the solution for some...

This is a part of a code of ASCX user control in C# and works

....

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

<%--CONTROL USER (Not important)... --%>
<delta:filtro ID="Filtro" runat="server" />

<br />

<asp:Button runat="server" ID="btnBuscar" OnClick="btnBuscar_Click" Text="Buscar" />

<%--1. CONTROL USER--%>
<delta:resultado ID="Resultado" runat="server" OnSeleccionar="Seleccionar_Click"/
<%--2. Button invisible ... --%>
<div style="display:none">
<asp:LinkButton ID="btnPrevio" runat="server" Text="Any text... " />
</div>

<asp:Panel ID="pnlConfirma" runat="server" CssClass="modalPopup" Style="display: none">
<asp:Panel ID="Panel3" runat="server" Style="cursor: move; background-color: #DDDDDD;
border: solid 1px Gray; color: Black">
<div>
<p>
De aca arrastro...</p>
</div>
</asp:Panel>
<asp:Label ID="lblConfirmacion" runat="server" />
<br />
<asp:Button ID="btnOk" runat="server" Text="Ok" />
<asp:Button ID="btnCancelar" runat="server" Text="Cancelar" />
</asp:Panel>

<ajax:ModalPopupExtender ID="modalConfirmar" runat="server" BackgroundCssClass="modalBackground"
CancelControlID="btnCancelar" DropShadow="true" OkControlID="btnOK" PopupControlID="pnlConfirma"
PopupDragHandleControlID="Panel3" TargetControlID="btnPrevio">
</ajax:ModalPopupExtender
</ContentTemplate>
<Triggers>

<%--3. Trigger of my control user--%>
<asp:AsyncPostBackTrigger ControlID="Resultado" EventName="Seleccionar" />

<%--4. IMPORTANT: Trigger of Invisible Button--%>
<asp:AsyncPostBackTrigger ControlID="btnPrevio" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

.........................................................

in code:

protected voidSeleccionar_Click(object sender, EventArgs e) {

//BLA BLA BLA...

//personalize my modal pop up, previously... (bad english)
lblConfirmacion.Text ="Personalizar el control..."; //Text personalized..

//The event of my control user... trigger the modal pop up...
modalConfirmar.Show();
//BLA BLA BLA...

}

UpdatePanel and OnBlur

Background: I have a script which attaches event listeners to OnFocus and OnBlur of my form controls after the page has loaded. The script updates a DIV with information about the element when focused and resets the DIV when blurred. My controls are wrapped inside an UpdatePanel.

The Problem: After the AsyncPostBack has occured my event listeners no longer work. The page is meant to redirect if all the fields are valid, so I am using validators - if the page is invalid it will not redirect and it is at this point that the event listeners stop working.

The Questions: Why are my event listeners not working after the AsyncPostBack? Is there a way to permanently register an event listener?

Also, now that I think about it... Are my validators overwriting the events? The validators only do custom server-side validation, no client-side.

how did you add the javascript to your controls?
like so:
textbox1.attributes.add("onblur","checkme(self);"); ?

could you perhaps post some more code?

I'm using javascript to gather all my form fields and add the listeners through the javascript. This works just fine, my code executes correctly. The problem is right after an AsyncPostBack.

My javascript load:

var fh = new formHelper();
fh.form = 'fm'; // Starting element
fh.divDisplay = 'divNote'; // DIV to display info
fh.helpForm(); // Load the event handlers

This is what adds the event handlers (this uses Prototype)

// Add event handler
if (elementsFound[x].title.length > 0) {
Event.observe(elementsFound[x], 'focus', this.getElementNote.bindAsEventListener(this));
Event.observe(elementsFound[x], 'blur', this.getElementNote.bindAsEventListener(this));
}

Everything works until the AsyncPostBack. My update panel is set to conditional and trigger is set to my btnSubmit.Click

I see..I had the exact same problem, but couldnt get it to work..
check here, perhaps it does help you:http://forums.asp.net/thread/1545416.aspx

if not I suggest you attach the javascript code via the attributes.add method..(if possble)

HTH

I managed to find a way to accomplish it.

In my btnSubmit_Click before I do the page.isValid check I re-register the script through the ScriptManager:

ScriptManager.RegisterStartupScript(btnSubmit, Page.GetType(),"fh", _ "var fh = new formHelper();fh.form ='fm';fh.divDisplay = 'divNote';fh.helpForm();", _True)

Thanks for helping me get started in the right direction