radajaxmanager: calling Page_ClientValidate seems to break ajaxmanager

[gunther]

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.

[gunther]

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";
        }

[gunther]

anyone?

[Iana Tsolova]

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.

[gunther]

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>

[gunther]

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.

[Iana Tsolova]

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.

[ADH]

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.

[Iana Tsolova]

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

[ADH]

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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!

[Iana Tsolova]

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

[ADH]

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.

[Amro]

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.