radajaxmanager: calling Page_ClientValidate seems to break ajaxmanager

13 posts, 0 answers
  1. gunther
    gunther avatar
    95 posts
    Member since:
    Mar 2009

    Posted 19 Apr 2010 Link to this post

    i found some kind of issue where calling Page_ClientValidate seems to cause issues with teh .ajaxRequest() client method of the radajaxmanager.

    calling Page_ClientValidate and causing the page to go invalid then calling .ajaxRequest() immediately afterward fails.  however, calling .ajaxRequest() again seems to work.

    i created a project that shows step-by-step how to reproduce the issue if anyone at telerik is interested in looking into it.
  2. gunther
    gunther avatar
    95 posts
    Member since:
    Mar 2009

    Posted 19 Apr 2010 Link to this post

    here, i'll just paste the code here:

    //markup code:

            <telerik:RadAjaxManager ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="cmSendRequest" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
           
            <div>
                <asp:DropDownList ID="ddItems" runat="server">
                    <asp:ListItem Text="Select One" Value="0" />
                    <asp:ListItem Text="Item 1" Value="1" />
                    <asp:ListItem Text="Item 2" Value="2" />
                </asp:DropDownList>
            </div>
            <div>
                <asp:Button ID="cmTriggerValidator" Text="Click to Trigger Validator" runat="server" />
            </div>
            <div>
                Clicking Send Ajax Request will send "Test" to the server which will then result in the text of the button
                to change to "Ajax Request Sent".<br />
                <asp:Button ID="cmSendRequest" Text="Send Ajax Request" OnClientClick="return SendAjaxRequest();" CausesValidation="false" runat="server" />
            </div>
            <div>
                <input type="button" id="Validat" value="Next &raquo;" onclick="TriggerValidator()" class="LogisticsButton" runat="server" />
            </div>

        <asp:CustomValidator ID="CustomValidator1" ClientValidationFunction="Validator" runat="server"
            ErrorMessage="You must select an option from the drop-down list!!!" Display="None" />
           
        Last Clicked: <span id="TimeStamp"></span>
           
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script language="javascript" type="text/javascript">

                function SendAjaxRequest() {
                    document.getElementById("lol").innerHTML = new Date();
                    var AjaxMan = $find("<%=RadAjaxManager1.ClientID %>");
                    AjaxMan.ajaxRequest("Test");
                    return false;
                }

                function TriggerValidator(sender, args) {
                    Page_ClientValidate();
                }

                function Validator(sender, args) {
                    var dd = document.getElementById("<%=ddItems.ClientID %>");
                    args.IsValid = dd.value != "0";
                }
           
            </script>
        </telerik:RadCodeBlock>

    //server-side code:

            protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
            {
                cmSendRequest.Text = "Ajax Request Sent";
            }

  3. gunther
    gunther avatar
    95 posts
    Member since:
    Mar 2009

    Posted 21 Apr 2010 Link to this post

    anyone?
  4. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 22 Apr 2010 Link to this post

    Hi gunther,

    Testing the code I observed it throws javascript error on the below line:

    document.getElementById("lol").innerHTML = new Date();

    because there is no control on the page with ID="lol". Try modifying it as below and see if the issue persists:

    function SendAjaxRequest() {
        document.getElementById("TimeStamp").innerHTML = new Date();
        var AjaxMan = $find("<%=RadAjaxManager1.ClientID %>");
        AjaxMan.ajaxRequest("Test");
        return false;
    }

    Regards,
    Iana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. gunther
    gunther avatar
    95 posts
    Member since:
    Mar 2009

    Posted 22 Apr 2010 Link to this post

    oops.. that was old code i pasted in here.  the project i am using actually has that corrected (that's what happens when you edit the code you pasted instead of the code in the solution).  i had a coworker test out the proper code and he was able to reproduce the results.  here it is corrected:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxIssue000.aspx.cs" Inherits="RadNumericTextbox.AjaxIssue000" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!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></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
       
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
       
            <telerik:RadAjaxManager ID="RadAjaxManager1" UpdatePanelsRenderMode="Inline" OnAjaxRequest="RadAjaxManager1_AjaxRequest" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="cmSendRequest" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
           
            <p>This is a test project to demonstrate how Page_ClientValidate breaks the AjaxManager.  Follow these steps to reproduce the issue:</p>
           
            <ul>
                <li>Click Button2 to call TriggerValidator() which calls Page_ClientValidate.</li>
                <li>Click AjaxButton to send "Test" to the server.  .ajaxRequest() should fail the first time.</li>
                <li>Click AjaxButton again second time and you will see that it works as expected.</li>
            </ul>
           
            <p>Follow these steps and it will work as expected every time:</p>
           
            <ul>
                <li>Click Button1.  It's an ASP button, so it will trigger validation automatically.</li>
                <li>Click AjaxButton and you'll notice that it works as expected.</li>
            </ul>
           
            <div>
                Leave this DropDownList alone so validation can be triggered.<br />
                <asp:DropDownList ID="ddItems" runat="server">
                    <asp:ListItem Text="Select An Item" Value="0" />
                    <asp:ListItem Text="Item 1" Value="1" />
                    <asp:ListItem Text="Item 2" Value="2" />
                </asp:DropDownList>
            </div>

            <p>
                Clicking AjaxButton will send "Test" to the server which will then result in the text of the button
                to change to "Ajax Request Sent".
                <asp:Button ID="cmSendRequest" Text="AjaxButton" OnClientClick="return SendAjaxRequest();" CausesValidation="false" runat="server" />
            </p>

            <p>
                Button1 is an ASP button which triggers the validator automatically.  Clicking AjaxButton immediately after clicking Button1
                does not break the AjaxManager.<br />
                <asp:Button ID="cmTriggerValidatorWorks" Text="Button1" runat="server" />
            </p>
               
            <p>
                Button2 is a standard INPUT element.  Since it does not trigger validation automatically, I have it call a client-side function called
                TriggerValidator which calls Page_ClientValidate.  Page_ClientValidate seems to break the AjaxManager.<br />
                <input type="button" id="Validat" value="Button2" onclick="TriggerValidator()" runat="server" />
            </p>

            <asp:CustomValidator ID="CustomValidator1" ClientValidationFunction="Validator" runat="server"
                ErrorMessage="You must select an option from the drop-down list" Display="None" />
               
            AjaxButton Last Clicked: <span id="TimeStamp"></span>
       
        </div>
       
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script language="javascript" type="text/javascript">

                function SendAjaxRequest() {
                    document.getElementById("TimeStamp").innerHTML = new Date();
                    $find("<%=RadAjaxManager1.ClientID %>").ajaxRequest("Test");
                    return false;
                }

                function TriggerValidator(sender, args) {
                    Page_ClientValidate();               
                }

                function Validator(sender, args) {
                    var dd = document.getElementById("<%=ddItems.ClientID %>");
                    args.IsValid = dd.value != "0";
                }

            </script>
        </telerik:RadCodeBlock>
        </form>
    </body>
    </html>

  6. gunther
    gunther avatar
    95 posts
    Member since:
    Mar 2009

    Posted 04 May 2010 Link to this post

    So, has anyone been able to take a look at this?  Another one of our devs has run into this issue, as well.  The code I posted in my previous post is the complete working code to reproduce this issue.
  7. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 10 May 2010 Link to this post

    Hello gunther,

    Try modifying the SentAjaxRequest method as below and see if the problem persists:

    function SendAjaxRequest() {
        document.getElementById("TimeStamp").innerHTML = new Date();
        Page_BlockSubmit = false;
        $find("<%=RadAjaxManager1.ClientID %>").ajaxRequest("Test");
        return false;               
    }

    I hope this helps.

    Sincerely yours,
    Iana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. ADH
    ADH avatar
    45 posts
    Member since:
    Nov 2006

    Posted 01 Sep 2010 Link to this post

    I ran into the same problem. Returning false did nothing. The relevant piece of code was:

    Page_BlockSubmit = false;

    which was not initially highlighted - including that and the return false did work. The last post was a bit confusing.

    I did find one other issue, however: AJAXified controls which are marked as AutoPostBack suffer from this same issue, and they are NOT sent through a client-side JS postback-initiating function. I've disabled my initial Page_ClientValidate();. Any fix for this would be welcome.
  9. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 02 Sep 2010 Link to this post

    Hello ADH,

    Can you share a piece of runnable code which illustrates the issue you are facing? We will thus be able to further investigate it.

    All the best,
    Iana
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. ADH
    ADH avatar
    45 posts
    Member since:
    Nov 2006

    Posted 02 Sep 2010 Link to this post

    OK, here you go.

    Page:
    <%@ Page Language="C#" AutoEventWireup="true" Codebehind="WebForm1.aspx.cs" Inherits="RadTextBoxAutoPostbackTest.WebForm1" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="ScriptManager1" runat="server" AllowCustomErrorsRedirect="false"
                EnableTheming="True">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Path="scripts.js" />
                </Scripts>
            </telerik:RadScriptManager>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
                UpdatePanelsRenderMode="Inline">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadTextBox1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadTextBox1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
                <ClientEvents OnRequestStart="fnOnPostBack" />
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"
                MinDisplayTime="500" IsSticky="true" Style="position: absolute; top: 0; left: 0;
                z-index: 9000;" Width="100%" Height="100%">
            </telerik:RadAjaxLoadingPanel>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"
                ControlToValidate="RadTextBox1" />
            <telerik:RadTextBox ID="RadTextBox1" runat="server" AutoPostBack="true" OnTextChanged="RadTextBox1_TextChanged">
            </telerik:RadTextBox>
            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
     
                <script type="text/javascript">
                    var strLoadingPanelID="<%=RadAjaxLoadingPanel1.ClientID %>";
                </script>
     
            </telerik:RadScriptBlock>
        </form>
    </body>
    </html>

    Code-behind:
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
     
    namespace RadTextBoxAutoPostbackTest
    {
        public partial class WebForm1 : System.Web.UI.Page
        {
            protected void RadTextBox1_TextChanged(object sender, EventArgs e)
            {
                RadTextBox1.Text = "";
                ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "TextChanged", "alert('Text changed!');", true);
            }
        }
    }

    And the JS:
    window.$ = window.jQuery = $telerik.$;
     
    $(document).ready(function() {
        $("form").submit(function(event) {
            if (event.preventDefault) event.preventDefault();
            if (event.stopPropagation) event.stopPropagation();
            return false;
        });
    });
     
    function fnOnPostBack() {
        $get(strLoadingPanelID).style.height=$(document).height()+"px";
    }
     
    function pageLoad() {
        Page_ClientValidate();
    }

    Note that the first postback (I tested this in IE8) is hindered. Hit enter a second time, however, and all is well. Since I'm just using the built-in code of RadAjaxManager to send the request, I can't just set Page_BlockSubmit to false before the submission. I suppose I could roll my own, but that does kind of defeat the purpose, doesn't it? Strange bug!
  11. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 07 Sep 2010 Link to this post

    Hi ADH,

    I dug further on this issue and it appeared that the same behavior can be replicated with regular ASP:TextBox and no ajax on the page. In this case the page postback on the second [Enter] click (you can check the attached test page). Therefore it seems this is how the Page_ClientValidate() method works as the Page_BlockSubmit value is set there to true in case the validation failed. And it is true to the next time validation is fire, e.g. your second try to submit the page. So in case you want to show the validators on initial load, then use the below code:

    function pageLoad() { 
        Page_ClientValidate(); 
        Page_BlockSubmit = false
    }



    Sincerely yours,
    Iana
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  12. ADH
    ADH avatar
    45 posts
    Member since:
    Nov 2006

    Posted 08 Sep 2010 Link to this post

    Worked like a charm - thank you! I'd mark your post as the answer if I could, but I didn't open the topic. This is answered though, as far as I'm concerned.
  13. Amro
    Amro avatar
    1 posts
    Member since:
    Oct 2010

    Posted 05 Oct 2010 Link to this post

    Wow, thank you very much.

    I was having a similar problem, where i needed to show the RequiredFieldValidators as soon as the page is shown, before i postback.
    so what i did is calling Page_ClientValidate() in a script at the end of the page, it worked ok.
    but the problem raised when i have any control that has a PostBack behaviour, like a DropDown having AutoPostback set to true,
    selecting an item from the dropdown does not fire the Postback event the first time, after that it works ok,
    so as you suggested; setting Page_BlockSubmit to false just after calling Page_ClientValidate fixed this issue like a charm!!!

    thank you again.
Back to Top