This is a migrated thread and some comments may be shown as answers.

radajaxmanager: calling Page_ClientValidate seems to break ajaxmanager

12 Answers 457 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
gunther
Top achievements
Rank 1
gunther asked on 19 Apr 2010, 06:27 PM
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.

12 Answers, 1 is accepted

Sort by
0
gunther
Top achievements
Rank 1
answered on 19 Apr 2010, 06:28 PM
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";
        }

0
gunther
Top achievements
Rank 1
answered on 21 Apr 2010, 06:23 PM
anyone?
0
Iana Tsolova
Telerik team
answered on 22 Apr 2010, 09:49 AM
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.
0
gunther
Top achievements
Rank 1
answered on 22 Apr 2010, 01:36 PM
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>

0
gunther
Top achievements
Rank 1
answered on 04 May 2010, 04:08 PM
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.
0
Iana Tsolova
Telerik team
answered on 10 May 2010, 12:26 PM
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.
0
ADH
Top achievements
Rank 1
answered on 01 Sep 2010, 09:42 PM
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.
0
Iana Tsolova
Telerik team
answered on 02 Sep 2010, 10:11 AM
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
0
ADH
Top achievements
Rank 1
answered on 02 Sep 2010, 02:47 PM
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!
0
Iana Tsolova
Telerik team
answered on 07 Sep 2010, 03:41 PM
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
0
ADH
Top achievements
Rank 1
answered on 08 Sep 2010, 05:49 PM
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.
0
Amro
Top achievements
Rank 1
answered on 05 Oct 2010, 01:15 PM
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.
Tags
Ajax
Asked by
gunther
Top achievements
Rank 1
Answers by
gunther
Top achievements
Rank 1
Iana Tsolova
Telerik team
ADH
Top achievements
Rank 1
Amro
Top achievements
Rank 1
Share this question
or