Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Ajax > .Net Validation with ajax enabled submit causes javascript issues with cancel button's return confirm()
RadControls for ASP.NET are no longer supported (see this page for reference). In case you have inquiries about the Telerik ASP.NET AJAX controls, post them in the pertinent ASP.NET AJAX forums.

Not answered .Net Validation with ajax enabled submit causes javascript issues with cancel button's return confirm()

Feed from this thread
  • Garth avatar

    Posted on Jan 21, 2008 (permalink)

    Perhaps we are doing something wrong here but I don't see where.  We have a form where the submit button is ajax enabled to that the data is submitted to the server, validated, saved and the user is presented a message indicating success/failure.  We have client side validation on a number of fields on the form.

    If we try to submit the form without all required data (or any other invalid data based on the validation controls) our cancel button does not work as expected.  We have a return confirm('are you sure') type onclick event on the cancel button to tell the user any changes will be lost before proceeding.  The server side event then directs them back to a search page. 

    If the validator fires client-side on the submit then when the user clicks Cancel, the js popup fires but when Yes is clicked the page does not postback.  The cancel button is set to CauseValidation=False.  Upon clicking the cancel button a second time, the js popup fires and when Yes is clicked the page post back normally.

    If, however I remove the Ajax settings for the submit button, the validator fires normally and when clicking cancel all works as expected. 

    It appears that the ajaxing of the Submit button is doing something funny to the overall javascript behaviour on the page.  Any ideas?

    Here is a sample project.  When you load the page the label will be displayed as label.  Enter data in the textbox and submit.  The label will be displayed as the text entered. Click cancel and the label will appear as Cancelled.  Delete all text form the box and click submit.  The validator will fire.  When the ajax settings for the submit button are enabled then clicking cancel will fire the js box but not submit the page.  Clicking a second time will post back.  With the ajax setting commented out the page behaves as expected, posting back once the js box returns true.

    ASPX:


    1 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="AjaxSubmitFailure.aspx.vb" Inherits="inventoryReports_AjaxSubmitFailure" %> 
    2  
    3 <%@ Register Assembly="RadAjax.Net2" Namespace="Telerik.WebControls" TagPrefix="radA" %> 
    4  
    5 <%@ Register Assembly="RadGrid.Net2" Namespace="Telerik.WebControls" TagPrefix="radG" %> 
    6  
    7 <html xmlns="http://www.w3.org/1999/xhtml"
    8 <head><title></title> 
    9 </head> 
    10 <body> 
    11 <form action="" runat="server" id="webForm"
    12     
    13     <div> 
    14         <asp:Panel ID="Panel1" runat="server" Height="400px" Width="500px"
    15             <table width="100%"><tr><td
    16             <asp:TextBox ID="txtRequired" runat="server"></asp:TextBox> 
    17                <asp:RequiredFieldValidator ID="valReqTxtRequired" runat="server"  Text="Required Field"         ErrorMessage="RequiredFieldValidator" ControlToValidate="txtRequired" Display="Dynamic"></asp:RequiredFieldValidator> 
    18             </td></tr
    19             <tr><td
    20             <asp:Button ID="btnSubmit" runat="server" Text="Submit" CausesValidation="True" /> 
    21             <asp:Button ID="btnCancel" runat="server" CausesValidation="False" OnClientClick='return confirm("are you sure?");' 
    22                 Text="Cancel" /></td></tr><tr><td><asp:Label ID="lblShowMe" runat="server" Text="Label"></asp:Label></td
    23                 </tr> 
    24                  
    25             </table> 
    26             &nbsp; &nbsp;&nbsp; 
    27             <radA:RadAjaxManager ID="RadAjaxManager1" runat="server"
    28                 <AjaxSettings> 
    29                     <radA:AjaxSetting AjaxControlID="btnSubmit"
    30                         <UpdatedControls> 
    31                            <radA:AjaxUpdatedControl ControlID="lblShowMe" /> 
    32                             
    33                         </UpdatedControls> 
    34                     </radA:AjaxSetting> 
    35                     
    36                 </AjaxSettings> 
    37             </radA:RadAjaxManager> 
    38             <radA:AjaxLoadingPanel ID="rgpnl1" runat="server" Height="75px" Width="75px"
    39                 <asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="~/RadControls/Ajax/Skins/Default/Loading.gif" /> 
    40             </radA:AjaxLoadingPanel> 
    41             <%--<asp:ValidationSummary ID="ValidationSummary1" runat="server" />--%> 
    42             
    43         </asp:Panel> 
    44         </div> 
    45     </form> 
    46 </body> 
    47 </html> 
    48  


    Codebehind:

    1 Partial Class inventoryReports_AjaxSubmitFailure 
    2     Inherits System.Web.UI.Page 
    3     Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click 
    4         lblShowMe.Text = txtRequired.Text 
    5     End Sub 
    6  
    7     Protected Sub btnCancel_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCancel.Click 
    8         lblShowMe.Text = "Cancelled" 
    9     End Sub 
    10  
    11      
    12 End Class 
    13  

  • Steve Steve admin's avatar

    Posted on Jan 22, 2008 (permalink)

    Hi Garth,

    As we have outlined in this help article, confirmation with ajax should be performed in a bit different manner:

    <asp:Button ID="btnCancel" runat="server" CausesValidation="False" OnClientClick="if (!confirm('Are you sure?')) return false;" Text="Cancel" />

    Let us know if further help is needed.


    Kind regards,
    Steve
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center

  • Garth avatar

    Posted on Jan 23, 2008 (permalink)

    The cancel button in our scenario is not ajaxed, only the submit button.  This does not resolve the behaviour as evidenced in the example provided.

    Do you have an update on this? 

  • Steve Steve admin's avatar

    Posted on Jan 24, 2008 (permalink)

    Hi guys,

    I forwarded this to our developers for investigation, and once they come up with a workaround or fix, we will get back to you with a fix/working solution.

    Please excuse us for the inconvenience.

    Regards,
    Steve
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center

  • Garth avatar

    Posted on Jan 24, 2008 (permalink)

    Thanks, I take it you were able to reproduce the problem?

  • Steve Steve admin's avatar

    Posted on Jan 24, 2008 (permalink)

    Hello Garth,

    Yes indeed. This is very weird and not related to the confirm at all. The very first click on the cancel button does not raise the server-side click event. It is weird that you are the first one to report this after being on the market for almost two years.

    Regards,
    Steve
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center

  • Chris avatar

    Posted on Apr 2, 2008 (permalink)

    We ran into what sounds like the exact same problem, and I came up with a one-line javascript 'hack' that works around the issue.

    Our situation sounds identical:
    • We have Telerik Ajax controls on the page
    • There is a button with CausesValidation="false".
    • The button doesn't do any AJAX calls. It just does a normal postback.
    • The button has a client-side onclick event to popup up a confirm box and return true if OK is clicked, which should allow postback through.

    When there is a validation error on the page, the first click of the button pops open the confirmation box, you click OK, and nothing happens; Upon second click, the confirmation pops up again, you click OK, and this time the postback goes through (as it should've the first time).

    After stepping into the ASP.NET javascript Validation functions, I could see that the Page_BlockSubmit variable was being set to "True" somehow the first time, which would cause it to disallow the postback. This shouldn't happen when CausesValidation is set to "false". I didn't have time to fully investigate to see how/why the state of things were getting messed up. It almost seems like a bug in the ASP.NET javascript validation functions.

    Anyway, my workaround was to just set ASP.NET's "Page_ValidationActive" javascript variable to false when the user chooses OK to the the confirmation. This disables client-side validation so that the postback is guaranteed to go through. You could probably alternatively set Page_BlockSubmit = false. The javascript validation variables automatically get reset when the page reloads, so this little hack shouldn't cause any other weird side effects.

    Example:
    // javascript on page:
    function DoConfirmation()
    {
        var proceed = confirm('Some question?');
        if (proceed)
        {
          // This is the one-line hack to fix ASP.NET client-side validation bug.
          // It disables ASP.NET's client side validation in order to allow the
          // the postback to go through. 
          Page_ValidationActive = false;
        }
        return proceed;
    }

    // ASPX button
    <asp:Button Id="btnDoSomething" OnClick="btnDoSomething_Click" Text="Do Something" CausesValidation="False" runat="Server" />

    // ASPX C# code-behind
    btnDoSomething.Attributes.Add("onclick", "return DoConfirmation();");

    Hope this helps someone :)

  • Vasssek avatar

    Posted on Feb 3, 2011 (permalink)

    Hello,

    I had similar issue with required validation on ajax asp.net page. When I clicked on cancel button and some of controls weren't validated yet, nothing happen. When I clicked second time on the same cancel button then the server side code fired.

    Your workaround did the job for me :))

    <asp:Button ID="btnCancel" runat="server" OnClientClick="Page_ValidationActive = false;"  CausesValidation="false" OnClick="btnCancel_Click"  TabIndex="13" Text="Zrušit" UseSubmitBehavior="false" Width="60px" />

    Thank you.

    Vasssek

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Ajax > .Net Validation with ajax enabled submit causes javascript issues with cancel button's return confirm()