Trying to create a popup only after form validation 2

[dalec]

Hi,

I have a asp.net form that I have a login form on. I have validator's on the 2 textboxes, I have added a div tag in the code with the "please wait box and image" that I want to display after the user clicks the button for logging in (I use the onclick event, that runs java, to display the hidden div tag with my "please wait dialog").

My problem happens when the button is clicked, the "please wait" runs OK, but, it runs whether the form is valid or not. I want it to pop only when the validators are correct.

I tried to use the code behind to show the "please wait" popup in the login button click event (when the fields are not blank) but it won't display. (I think that's due to server side/client side issue.

I've searched around and have seen some examples, and if form validation wasnt needed this would work great with just the onclick and the java code. I don't know what else to try.

thanks in advance for help.

 

[NoCoolHandle]

First the validators run on the client. No postback gets done, so no server event to respond.

You might want to check out the ajax controlstoolkit at asp.net/ajax

(free to download and install) there might be something there.

My guess is you need to use ajax to perform the validation and based on a failure bring up a different box.

There are some nice modal box's that could solve your issue.

The other solution is to write your own javascript. I have been delving into jquery reciently and found it to be easy to learn and exceptionally reliable on "ALL" Browsers. There are also some great plugins to play with that provide the type of featurs you are looking for.

Rob
PS I am not saying you can't do what you are looking for, just that I don't know how to do this with traditional aspx.

 

[jmeckley]

1st your using javascript, not java. this is important so you know what language you are using. java to javascript is like VB to vbScript. there is no relation.

The "please wait" popout, won't work as you expect without ajax. if could probally do this with ms ajax.
1. wrap the button in an update panel.
2. drop a update progress control on the page as well.
3. associate the progress to the panel
4. set the progress delay to 1 second.

this should produce the desired effect.

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[dalec]

Thank you for the response. I've been using ajax, and I tried some of those solutions first. I've just been afraid that if I look for a stright java solution, I'll loose the ability to use the aspx validation with the cute little ajax popups that I've tagged along with it.

Problem to me is when they do hit the submit button on the login and I catch it using the on_click event (using the code behind), I test to see if the textboxes are empty if not I try to show the "please wait" panel (ie. pleasewait.show), but, noting happens. My reasoning is that while it's check the database there is no communication back to the browser to display the please wait.

If there is someway to for the browser to update after I've checked the textboxes, (and prior to the login at the server) I think that would work.

 

[dalec]

I might have reponded too quickly to nocoolhandle, I'll try out your suggestion jmeckly and post back what I've encountered.

thank you.

 

[jmeckley]

you also need to understand the web model.
server receives a request from the client.
server processes request.
server sends a response.
client receives the response from the server.
user interacts with the page and sends a new request.
the cycle repeats.

all this to say you cannot intermediately send data between the client and server. AJAX permits this, but all it does is wrap a full request into a "partial" request.

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[dalec]

jmeckley,

having a little problem, I get an error trying to put the button inside of an updatepanel. Do I need to add a placeholder there instead and add the updatepanel and button from the code behind to work?

Thanks in advance.

 

[dalec]

I might have solved it, stay tuned.

 

[dalec]

OK,

I think I'm really close using the update panel and update progress panel. When I press the button I get a "object expected error" in the browser. The error happens at the end of </td> tag.

Could it be that I can't have a login template nested inside the updatepanel?

 

[jmeckley]

the update panel doesn't care what it surrounds. post the relevant markup and code behind.

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[dalec]

The page load's fine, whenever I click on one of the textboxes or select the button I get the objected expected error. Here's the code where it occurs.

    <asp:ScriptManager ID="ScriptManager1" runat="server"/>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>             
    <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
         <td align="left" class="style6">
             <asp:Image ID="Image1" runat="server" src="images/BD_Title_Black.png" alt="Bedazzled Designs"/>
 [highlight]        </td> [/highlight]
         <td class="style1">
         </td>

I've checked all my tags to make sure they have a matching closing tags.

thank you.

 

[dalec]

Here's a complete listing. I'm stumped. Thank's again.

<form id="form1" runat="server" onclick="return form1_onclick()">
    <asp:ScriptManager ID="ScriptManager1" runat="server"/>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>             
    <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
         <td align="left" class="style6">
             <asp:Image ID="Image1" runat="server" src="images/BD_Title_Black.png" alt="Bedazzled Designs"/>
         </td>
         <td class="style1">
         </td>
         <td align="center">
             <asp:Login ID="Login1" runat="server" Width="100%">
                 <LayoutTemplate>
                     <table border="0" cellpadding="0" cellspacing="0" align="left" width="100%">
                         <tr>
                             <td>
                                 <table cellpadding="0" cellspacing="0">
                                     <tr>
                                         <td align="right">
                                             <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName" 
                                                 Font-Names="Verdana" Font-Size="XX-Small" ForeColor="#CCCC99">Login:</asp:Label>
                                         </td>
                                         <td>
                                             <asp:TextBox ID="UserName" runat="server" Font-Names="Verdana" 
                                                 Font-Size="X-Small"></asp:TextBox>
                                             <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" 
                                                 ControlToValidate="UserName" ErrorMessage="User Name is required." 
                                                 ToolTip="User Name is required." ValidationGroup="ctl00$Login1" Display="None">*</asp:RequiredFieldValidator>
                                             <cc1:ValidatorCalloutExtender ID="UserNameRequiredVCE" runat="server" TargetControlID="UserNameRequired"/>
                                         </td>
                                         <td colspan="2">
                                             <asp:CheckBox ID="RememberMe" runat="server" Font-Names="Verdana" 
                                                 Font-Size="X-Small" ForeColor="#CCCC99" Text="Remember me" />
                                         </td>
                                     </tr>
                                     <tr>
                                         <td align="right">
                                             <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" 
                                                 Font-Names="Verdana" Font-Size="XX-Small" ForeColor="#CCCC99">Password:</asp:Label>
                                         </td>
                                         <td>
                                             <asp:TextBox ID="Password" runat="server" TextMode="Password" 
                                                 Font-Names="Verdana" Font-Size="X-Small"></asp:TextBox>
                                             <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" 
                                                 ControlToValidate="Password" ErrorMessage="Password is required." 
                                                 ToolTip="Password is required." ValidationGroup="ctl00$Login1" Display="None">*</asp:RequiredFieldValidator>
                                             <cc1:ValidatorCalloutExtender ID="PasswordRequiredVCE" runat="server" TargetControlID="PasswordRequired"/>
                                         </td>
                                         <td align="left">
                                             
                                             <asp:Button ID="LoginButton" runat="server" CommandName="Login" 
                                                 Font-Names="Verdana" Font-Size="X-Small" Text="Log In" 
                                                 ValidationGroup="ctl00$Login1"/>
                                         </td>
                                         <td align="right" class="style11">
                                             <asp:HyperLink ID="HyperLink2" runat="server" Font-Names="Verdana" 
                                                 Font-Size="X-Small" ForeColor="#CCCC99" NavigateUrl="register.aspx">Click to Register</asp:HyperLink>
                                         </td>                                             
                                     </tr>
                                 </table>
                             </td>
                         </tr>
                     </table>
                 </LayoutTemplate>
             </asp:Login>
         </td>
        </tr> 
    </table> 
    </ContentTemplate>
       <triggers>
          <asp:AsyncPostBackTrigger ControlID="Login1" />
       </triggers>
    </asp:UpdatePanel>         
    <table cellpadding="0" cellspacing="0">
        <tr>
           <td class="Menu_Space">
           </td>
           <td>
              <uc1:rolloverimage id="RolloverImage1" runat="server"  
                  StatusText = "Home"  
                  LinkURL = "default.aspx"  
                  RolloverImageSrc = "images/home_over.png"  
                  NormalImageSrc = "images/home_up.png">
              </uc1:rolloverimage>  
           </td>
           <td class="Spacer">
           </td>
           <td>
              <uc1:rolloverimage id="RolloverImage2" runat="server"  
                  StatusText = "The Bedazzled Collection"  
                  LinkURL = "default.aspx"  
                  RolloverImageSrc = "images/collection_over.png"  
                  NormalImageSrc = "images/collection_up.png">
              </uc1:rolloverimage>  
           </td>
           <td class="Spacer">
           </td>
           <td>
              <uc1:rolloverimage id="RolloverImage3" runat="server"  
                  StatusText = "Semi-Precious Stones"  
                  LinkURL = "SemiPreciousStones.aspx"  
                  RolloverImageSrc = "images/semistones_over.png"  
                  NormalImageSrc = "images/semistones_up.png">
              </uc1:rolloverimage>  
           </td>
           <td class="Spacer">
           </td>
           <td>
              <uc1:rolloverimage id="RolloverImage4" runat="server"  
                  StatusText = "Birth Stone Chart"  
                  LinkURL = "BirthStones.aspx"  
                  RolloverImageSrc = "images/bsc_over.png"  
                  NormalImageSrc = "images/bsc_up.png">
              </uc1:rolloverimage>  
           </td>
           <td class="Spacer">
           </td>
           <td>
              <uc1:rolloverimage id="RolloverImage5" runat="server"  
                  StatusText = "About Bedazzled Designs"  
                  LinkURL = "default.aspx"  
                  RolloverImageSrc = "images/about_over.png"  
                  NormalImageSrc = "images/about_up.png">
              </uc1:rolloverimage>  
           </td>             
        </tr>
    </table>
    <%--Update Panel--%>

    <%--Login Error--%>
    <asp:HyperLink ID="Dummy" runat="server" NavigateUrl="LostPassword.aspx"></asp:HyperLink>
    <cc1:ModalPopupExtender ID="ModalLoginError" runat="server"
      PopupControlID="LoginErrorPanel" DropShadow="True" 
      OkControlID="Button1" BackgroundCssClass="modal" TargetControlID="Dummy" CancelControlID="Button2" />
    <asp:Panel ID="LoginErrorPanel" runat="server" BackColor="LemonChiffon" Width="35%" 
      Style="display: none" BorderColor="Black" BorderStyle="Solid" 
      BorderWidth="1px">
      <table>
         <tr>
            <td style="font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: normal" align="center">
               User name or password was not found! Would you like to recover your password?
               <asp:Literal ID="FailureText0" runat="server" EnableViewState="False"></asp:Literal>
            </td>
         </tr>
         <tr>
            <td align="center">
               <asp:Button ID="Button1" runat="server" Text="Yes" OnClientClick="window.navigate('LostPassword.aspx')"/>
               <asp:Button ID="Button2" runat="server" Text="No" />
            </td>
         </tr>
      </table>
    </asp:Panel>
    <%--For Logging on--%>
    <div id="pleasewait" runat="server"  
       style="border: 1px solid #cccc99; position:absolute; z-index:5; top:20%; left:40%; display:none;">
       <table bgcolor="#000000" cellpadding="0" cellspacing="0" style="border: 1px solid #cccc99">
         <tr>
            <td width="35" height="100%" bgcolor="Black" align="left" valign="middle">
               <img name="loadingImage" alt="" src="Images/flare_e0.gif" />
            </td>
            <td valign ="middle" align="left" width="100">
               <font face="Helvetica,Verdana,Arial" size="3" color="#CCCC99">
               <b>Please wait...</b></font>
            </td>
         </tr>
       </table>
    </div>     
    <%--Done Logon Message--%>
    <div class="Content">
       <%--Main Page End of all other page stuff--%>
       <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"/>     
    </div> 
    <div class="Footer">
       <table>
          <tr>
             <td class="style9">
                <img src="images/LowerLeftFairySmall.png" alt="Welcome"/>
             </td>
             <td valign="middle" class="style10">
                Copyright &copy All Right Reserved, By Bedazzled Designs. <a href="#">Contact Us</a>        
             </td>
             <td class="style12" align="center">
                <a href="#">Privicy Policy</a> 
             </td>
             <td>
                Proudly Designed by <a href="[URL unfurl="true"]http://www.econethosting.com"[/URL] target="_blank">ECONetHosting.com</a> 
             </td>
          </tr>
       </table> 
    </div> 
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" 
        AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="1000">
        <ProgressTemplate>
            <asp:Table ID="Table1" runat="server" Height="70px" Font-Bold="True" 
                Font-Italic="False" HorizontalAlign="Center" Width="204px">
                <asp:TableRow runat="server" BackColor="Black" BorderWidth="0">
                   <asp:TableCell VerticalAlign="Middle" HorizontalAlign="Center">
                      <img src="images/flare_e0.gif" alt="Please Wait" align="middle" />
                   </asp:TableCell>
                   <asp:TableCell>
                      <asp:Label ID="Label1" runat="server" Text="Please Wait..." ForeColor="White" />
                   </asp:TableCell> 
                </asp:TableRow>
            </asp:Table>
        </ProgressTemplate>
    </asp:UpdateProgress>
</form>

 

[dalec]

After I uploaded the code, I saw an onclick event in the form tag, I removed it and everything is working. Not sure how I ended up with that in there. but, removing it did the trick.

thanks so much, I had spent a about a trillion hours trying to get this to work.