Showing posts with label modal. Show all posts
Showing posts with label modal. Show all posts

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>

Wednesday, March 21, 2012

urgent: Modal popup Extender is not closing after validation fires

I have an edit modalpopupextender inside the gridview that appear when linkbutton is clicked all of this inside an update panel and its working great.

when the modalpopupextender popsup i have two buttons "Close" and "Save" button and when the user click on "Close" it closes the modalpopupextender - again its working great.

but the problem isthat, when i click on "Save" button it FIRES validation and in the modalpoupextender i have twocustomvalidation controlsthat validates whether the user have check at least one checkbox or not so when the user hit on "Save" button the validation fires whic is great so far butwhen i clik on "Close" button its not closing my modalpopuextender ?

here is my close button looks like:

<ajaxToolkit:ModalPopupExtender ID="mpePerson" runat="server" TargetControlID="btnHiddenPerson"
PopupControlID="pnlPerson" OkControlID="bModalDialogCancel"CancelControlID="bModalDialogCancel" BackgroundCssClass="modalBackground"
PopupDragHandleControlID="PersonCaption">
</ajaxToolkit:ModalPopupExtender>

<asp:ButtonCausesValidation="false"ID="bModalDialogCancel" runat="server"Text=" Close "ToolTip="Close this window"/>

what is going on here?

You have your OkControlID and your CancelControlID both pointing to the same button ('bModalDialogCancel').

------------------
When you ask a question, remember to click "mark as answered" when you get a reply which answers your question.


i fixed myself, i was passing the wrong id.

thanks.