Showing posts with label modalpopup. Show all posts
Showing posts with label modalpopup. Show all posts

Wednesday, March 28, 2012

UpdateProgress not showing up

I have a page which has a FormView control and when I click one of the rows I get an ModalPopup for editing the detailed information. This works, however it takes too long for ModalPopup to open. Since I haven't found any solution for speeding up the ModalPopup, I thought I might as well inform the user that the data is loading on the background. I also thought that I might give UpdateProgress-control a try. I know that this is not the best solution for this (performance) issue but so far is the best I can figure out.

My page looks like this:

<Button> (hidden)
<ModalPopupExtender>
<Panel>
<UpdatePanel>
<FormView>
</UpdatePanel>
<UpdateProgress>
</Panel>

So what I would like is that before ModalPopup is visible, user gets an message presented by UpdateProgress, that something is going on. However with this current setup, nothing happens, UpdateProgress is not activated. Any ideas why ?

The ModalPopupExtender and the popup control have to be inside the UpdatePanel for UpdateProgress to be activated.



Hi,

Here an example of how to procede with.

<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">

<ContentTemplate>

<!-- Place here your ModalPopupExtender and the popup control -->

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgressID="UpdateProgress1"DynamicLayout="false"runat="server"DisplayAfter="50">

<ProgressTemplate>

<spanstyle="font-family: Trebuchet MS; color: #ffffff;">Chargement...</span</ProgressTemplate>

</asp:UpdateProgress>

<ajaxToolkit:AlwaysVisibleControlExtenderID="AlwaysVisibleControlExtender1"runat="server"TargetControlID="UpdateProgress1"HorizontalSide="Center"VerticalSide="Middle"HorizontalOffset="0" />

Kind regards,


Ok,

Thanks both, I try to take look at this bit more today.


I tried this and it works, thanks !

One question though, why is AlwaysVisibleControlExtender needed, because the examples I have seen are done without this ? I always thought that UpdateProgress would be the only control needed here.


Happy to see that it works.

k000der:

I tried this and it works, thanks !

One question though, why is AlwaysVisibleControlExtender needed, because the examples I have seen are done without this ?

This extender is just here for managing the UpdateProgressExtender position. As you can seeHorizontalSide="Center"VerticalSide="Middle"

are for specifying the position in the screen where you would like to have the loading displayed, and even if you are scrolling up and down inside the page, you'll see that the position will always stay where you define it.

Kind regards,


Ok, now I see why it's needed. Thanks again.

Updating a Text Box after the modalpopup closes.

Hi There

I'm attempting to create a function for users that allows them to browse their intranet site and save links within the intranet as a collection of 'my links'. To do this I'm using an iFrame embedded within the modalpopup extension. Everything is working with the exception of the final part (which is quite frustrating) - Basically I need to populate a textbox with the current location in the iFrame. I know that I'm ready the value correctly but the text box is just not updating. I've inserted the user control below - all you need to do is insert the control into a new page and then point the iframe at a starting page. Any help greatly appreciated as I could do with an answer to this issue as soon as possible.

<%@dotnet.itags.org. Control Language="C#" AutoEventWireup="true" CodeFile="test.ascx.cs" Inherits="includes_mylinks" %>
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<script type="text/javascript">
function onOk() {
var NewURLTextBox = parent.document.getElementById("<%= newurl.UniqueID %>");
var NavFrame = parent.frames(0);
NewURLTextBox.InnerText = NavFrame.location.href;
NewURLTextBox.InnerHTML = NavFrame.location.href;
NewURLTextBox.Value = NavFrame.location.href;
alert(NavFrame.location.href);
}
</script>
<asp:ScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager" />
<h3>Add a new link</h3>
<table width="100%">
<tr>
<td style="width: 100px">Title:<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="newurldescription"
ErrorMessage="Please supply a Title" SetFocusOnError="True" ValidationGroup="NewURL">*</asp:RequiredFieldValidator>
</td>
<td><asp:TextBox runat="server" Text ="" ID="newurldescription" /></td>
</tr>
<tr>
<td>Address:<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="newurl"
ErrorMessage="Please specify the URL you wish to save" SetFocusOnError="True" ValidationGroup="NewURL">*</asp:RequiredFieldValidator>
</td>
<td><asp:TextBox runat="server" ID="newurl" EnableViewState="false" /> <asp:LinkButton ID="cmdBrowse"
runat="server">[Browse]</asp:LinkButton></td>
</tr>
<tr>
<td>Position:<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="newurlposition"
ErrorMessage="Please enter a value between 1 and 9" MaximumValue="9" MinimumValue="1"
SetFocusOnError="True" Type="Integer" ValidationGroup="NewURL">*</asp:RangeValidator>
</td>
<td><asp:TextBox runat="server" Text ="" ID="newurlposition" MaxLength="1" Width="15px" /></td>
</tr>
</table>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
<asp:Panel ID="BrowsePanel" runat="server">
<asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
<div>
<p>Navigate to the Page that you would like to add to My Links:</p>
</div>
</asp:Panel>
<iframe id="BrowseIntranet" runat="server" src="http://pics.10026.com/?src=default.aspx" height="450px" width="850px" ></iframe>
<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="Select" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</p>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="cmdBrowse"
PopupControlID="BrowsePanel"
BackgroundCssClass="modalBackground"
OkControlID="OkButton"
OnOkScript="onOk()"
CancelControlID="CancelButton"
DropShadow="false"
PopupDragHandleControlID="Panel3" />

Hi,

I was searching for somethig, but came across your post. I read an artcle to update the server control on postback. the url ishttp://www.aspdotnetcodes.com/ModalPopup_Postback.aspx . in this article they make use of label control, please try it with your TextBox.. and let me know if if helps you.

Thanks

Monday, March 26, 2012

Updating Controls in a ModalPopup Possible?

Hello,

I am trying to use a modalpopup as a login prompt.

I've been able to put a couple textboxes in the modal, take input from those textboxes, and log a user in and redirect them or do whatever I would like. The problem I am having is when a user types in a wrong password, I need to display a "Invalid Password" lable to the user, hopefully in the modalpopup window.

The way I am validating a user is an XML call back to a third party server with custom software.

I havent tried to write a providor yet to use the .NET login things.

So my question boils down to, Can controls in an update panel be updated upon an OK click.

Thanks!

-Shane

Yes, it's possible. Though currently it will require a "work around". It will also require the reworked ModalPopupExtender that I know you are familiar with. There's a link in my sig.

First you need to do is create "fake buttons" for the OkControl and CancelControl property of the modalpopupextender. These buttons need to present at all times during your login routine, so place them at the very end of your popup panel. Also set them with a css style of display:none; The button controls visible property must be set to true.
Sean,

I will give this a try this tommarow when I'm back at the office.
I want to let you know that the Re-Worked ModalPopup is really good. It has solved quite a few problems.

Seeing as you seem so good with this stuff, thought I would ask a more diffucult question dealing with the modal popup.
I am using a modal in a gridview to display product information. To get the product information, I am using a web serivce (amazon webservice to be exact). On the click of the linkbutton on the gridview, I have the webservice kicked in to get the information, and sometimes it takes anywhere from 2 - 4 seconds to get the information about the product. I am using the onrowbound event to add attribs to the linkbutton for a window.timeout($object('modal')._show), 2000) or something like that to open the modal about 2 seconds after the linkbutton is clicked.
this works when the webservice returns the information before 2 seconds. If the request takes more than 2 seconds, the modal opens up, the request finishes, and the modal closes by itself. I have this modal setup with an update panel inside the modal, but currently, the update panel has the ok, cancel buttons included in it. I'll give it a try tommarow with those buttons outside of the update panel.
Anyways, seeing as you know more about all of this than me, I thought I would ask you :P
thanks for all your help
-shane

Hey Sean,

I got the login modal to update labels within it self doing just like you described.

However, I've ran into some minor problems that I thought I would see if you maybe have already solved.

1. How would I make a textbox get focus when the modal pops up?

2. How can I make the button the default button so when the user hits enter, it hits that button, and not a button on the page it self. Right now, if I hit enter, it fires an event tied to a button on the main page. if the main page does not have a button, then hitting enter works fine.

Any suggestions?

thanks for all the help, once again!

-Shane


Hi i live that problem. When i press Enter it opens the other Panel :S and it makes me crazy. By the way this is Header.ascx

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"BackgroundCssClass="modalBackground"

TargetControlID="lbLogin"PopupControlID="pnlLoginVisible"PopupDragHandleControlID="pnlLogin"

CancelControlID="lbClose">

</ajaxToolkit:ModalPopupExtender>

<asp:PanelID="pnlLoginVisible"runat="server"DefaultButton="LinkButton1"Style="display: none;">

<asp:PanelID="pnlLogin"runat="server"CssClass="modalPopup">

<asp:UpdatePanelID="UpdatePanelH"runat="server">

<ContentTemplate>

<divid="loginbackground">

<divid="logintop">

<divid="logintoptext1">

<asp:LabelID="Label6"runat="server"meta:resourceKey="lblLoginText"Text="Giri? Yap"></asp:Label>

</div>

<divid="logintopclose1">

<asp:LinkButtonID="lbClose"CssClass="logintopcloselink"runat="server"CausesValidation="false"

Text="Kapat"meta:resourceKey="lblClose"></asp:LinkButton>

</div>

</div>

<divid="loginbottom">

<divstyle="width: 290px; height: 40px; padding-left: 5px;">

<divclass="logintext2">

<asp:LabelID="Label7"runat="server"meta:resourceKey="lblUsernameText"Text="Kullan?c? Ad?:"></asp:Label>

</div>

<divclass="logininput2">

<asp:TextBoxID="txtLUserName"CssClass="logininputtext2"runat="server"></asp:TextBox>

<asp:RequiredFieldValidatorID="RequiredFieldValidator1"runat="server"ControlToValidate="txtLUserName"

ErrorMessage="*"ValidationGroup="Login"SetFocusOnError="True"></asp:RequiredFieldValidator>

</div>

</div>

<divstyle="width: 290px; height: 40px; padding-left: 5px;">

<divclass="logintext2">

<asp:LabelID="Label8"runat="server"meta:resourceKey="lblPassword"Text="Parola:"></asp:Label>

</div>

<divclass="logininput2">

<asp:TextBoxID="txtLPass"runat="server"CssClass="logininputtext2"TextMode="Password"></asp:TextBox>

<asp:RequiredFieldValidatorID="RequiredFieldValidator2"ValidationGroup="Login"

runat="server"ControlToValidate="txtLPass"ErrorMessage="*"SetFocusOnError="True"></asp:RequiredFieldValidator>

</div>

</div>

<divid="loginbottom2">

<asp:LabelID="Label1"meta:resourceKey="lbLoginFailed"Visible="False"runat="server"Text="Yanl?? Kullan?c? Bilgisi"></asp:Label>

<!-- hata mesaj?n?n cikacagi yer -->

</div>

<divstyle="float: left; width: 130px; padding-left: 20px; padding-top: 6px;">

<asp:HyperLinkID="HyperLink1"CssClass="loginbottomlink2"NavigateUrl="~/forgotpassword.aspx"

meta:resourceKey="lblForgotPass"Text="Parolam? Unuttum"runat="server"></asp:HyperLink></div>

<divid="loginbottom3">

<asp:LinkButtonID="LinkButton1"OnClick="btnLogin_Click"CssClass="logintext3"ValidationGroup="Login"

runat="server"Text="Giri?"></asp:LinkButton>

</div>

</div>

</div>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Panel>

</asp:Panel>

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender2"runat="server"BackgroundCssClass="modalBackground"

TargetControlID="lbRegister"PopupControlID="pnlRegisterVisible"PopupDragHandleControlID="PnlRegister"

CancelControlID="lbRClose">

</ajaxToolkit:ModalPopupExtender>

<asp:PanelID="pnlRegisterVisible"DefaultButton="btnRegister"runat="server"Style="display: none;">

<asp:PanelID="PnlRegister"runat="server"CssClass="modalPopup2">

<divid="registertop">

<divid="registertoptext1">

<asp:LabelID="lblSignup"runat="server"meta:resourceKey="lblSignup"Text="üye Ol"></asp:Label>

</div>

<divid="registertopclose1">

<asp:LinkButtonID="lbRClose"CssClass="logintopcloselink1"CausesValidation="false"

runat="server"Text="Kapat"></asp:LinkButton>

</div>

</div>

<asp:UpdatePanelID="UpdatePanel2"runat="server">

<ContentTemplate>

<divid="registerbackground">

<divid="registerbottom">

<divclass="registertext1">

<asp:LabelID="Label2"Text="E-Posta:"meta:resourceKey="lblMail"runat="server"></asp:Label>

</div>

<divclass="registerinputdiv1">

<asp:TextBoxID="txtEposta"runat="server"CssClass="registerinput1"></asp:TextBox>

<asp:RequiredFieldValidatorValidationGroup="Register"ID="RequiredFieldValidator3"

runat="server"ErrorMessage="*"ControlToValidate="txtEposta"/>

</div>

<divclass="registertext1">

<asp:LabelID="Label3"meta:resourceKey="lblUserName"runat="server"Text="Kullan?c? Ad?n?z:"></asp:Label>

</div>

<divclass="registerinputdiv1">

<asp:TextBoxID="txtRUsername"runat="server"CssClass="registerinput1"></asp:TextBox>

<asp:RequiredFieldValidatorID="RequiredFieldValidator4"runat="server"ValidationGroup="Register"

ControlToValidate="txtRUsername"ErrorMessage="*"></asp:RequiredFieldValidator>

</div>

<divclass="registertext1">

<asp:LabelID="Label4"meta:resourceKey="lblPass"runat="server"Text="Parola"></asp:Label>

</div>

<divclass="registerinputdiv1">

<asp:TextBoxID="txtSifre"runat="server"CssClass="registerinput1"TextMode="Password"></asp:TextBox>

<asp:RequiredFieldValidatorID="RequiredFieldValidator5"ValidationGroup="Register"

runat="server"ErrorMessage="*"ControlToValidate="txtSifre"/>

</div>

<divclass="registertext1">

<asp:LabelID="Label5"meta:resourceKey="lblPassRep"runat="server"Text="Parola Tekrar?:"></asp:Label>

</div>

<divclass="registerinputdiv1">

<asp:TextBoxID="txtSifreTekrar"runat="server"CssClass="registerinput1"TextMode="Password"></asp:TextBox>

<asp:RequiredFieldValidatorValidationGroup="Register"ID="RequiredFieldValidator6"

runat="server"ErrorMessage="*"ControlToValidate="txtSifreTekrar"/>

</div>

<div>

<divid="result"runat="server">

<asp:RegularExpressionValidatorID="RegularExpressionValidator1"runat="server"ControlToValidate="txtEposta"meta:resourceKey="RegUnValidEmail"ErrorMessage="Ge?ersiz e-mail adresi"SetFocusOnError="True"

ValidationGroup="Register"ValidationExpression="\w+([-+.']\w+)*@.\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator><br/>

<asp:CompareValidatorID="CompareValidator1"runat="server"ControlToCompare="txtSifre"

ControlToValidate="txtSifreTekrar"meta:resourceKey="RegUnMatchPass"ErrorMessage="?ifreler Uyu?muyor"

SetFocusOnError="True"></asp:CompareValidator><br/>

<asp:CustomValidatorID="CustomValidator2"ValidationGroup="Register"runat="server"

ClientValidationFunction="sifrevekullanici"meta:resourceKey="RegMinPasswordChr"

ControlToValidate="txtSifre"ErrorMessage="Parolan?z minimum 5 karakter olabilir."

SetFocusOnError="True"></asp:CustomValidator><br/>

<asp:CustomValidatorID="CustomValidator1"ValidationGroup="Register"runat="server"

ClientValidationFunction="sifrevekullanici"meta:resourceKey="RegMinUserChr"

ControlToValidate="txtRUsername"ErrorMessage="Kullan?c? ad?n?z minimum 5 karakter olabilir."

SetFocusOnError="True"></asp:CustomValidator><br/>

<asp:LabelID="lblRegisterError"CssClass="failed"runat="server"Text=""></asp:Label><br/>

<asp:LabelID="lbRegisterSucced"runat="server"CssClass="succes"meta:resourceKey="lbRegisterSucced"

Visible="false"Text="Kullan?c? kayd?n?z ba?ar?yla al?nm??t?r."></asp:Label>

<br/>

<asp:LabelID="lblRegisterFailed"runat="server"CssClass="failed"meta:resourceKey="lbRegisterFailed"Visible="false"Text="Hata olu?tu. Lütfen daha sonra tekrar deneyiniz."></asp:Label>

</div>

</div>

</div>

</div>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTriggerControlID="btnRegister"EventName="Click"/>

</Triggers>

</asp:UpdatePanel>

<divclass="registerbutton1">

<asp:LinkButtonID="btnRegister"runat="server"OnClick="btnRegister_Click"CssClass="registerbuttonlink"

Text="üye Ol"ValidationGroup="Register"meta:resourceKey="btnRegister"></asp:LinkButton>

</div>

</asp:Panel>

</asp:Panel>

<tableclass="style1"align="center"cellpadding="0"cellspacing="0">

<tr>

<tdclass="style2">

</td>

<tdclass="style3">

<divid="head">

</div>

<divid="headover">

<divid="logo">

<imgsrc="images/logo.png"width="187"height="103"class="png"></div>

<divid="girismenu">

<divid="uyeol">

<asp:ImageButtonID="lbRegister"meta:resourceKey="ibRegister"runat="server"ImageUrl="~/images/uyeol.png"Width="55"Height="45"CssClass="png"CausesValidation="False"/>

</div>

<divid="cizgi">

</div>

<divid="girisyap">

<asp:ImageButtonID="lbLogin"runat="server"meta:resourceKey="ibLogin"ImageUrl="~/images/girisyap.png"

Width="60"Height="40"CssClass="png"CausesValidation="False"/>

<asp:ImageButtonID="lbLogOut"runat="server"CssClass="png"Height="40px"ImageUrl="~/images/cikis.png"meta:resourceKey="ibLogOut"

Width="60px"OnClick="lbLogOut_Click"CausesValidation="False"Visible="False"/></div>

</div>