$Find RadAjaxmanager fails second time it is called

[Tonie Venter]

Dear all
I have a problem which seems to be very common with the RadAjaxmanager but with no real solution in the forums. I have a very simple function which causes an ajax postback from client side. This works fine once. After the first postback it gets a JavaScript client side error that the object is null - it cannot find the RadAjaxManager the second time..

 function OnClientResize() {
            var action = "CLIENTRESIZE|" + BrowserHeight() + "," + BrowserWidth();
            $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(action);
            return false;
        }

There has been multiple posts on this issue but no real cause and solution. Could someone please help us out here?

Cheers

Tonie

[Tonie Venter]

I have tried a few things and seem to have found the solution.
I started from scratch and re-added all the telerik items in the masterpage etc exactly as per the example given by Telerik. It seems the order in which these items are added in the masterpage makes all the difference, you may add it in any order and it would seem to work but you will get a problem if they are not happily living together on the page. Anyway this specific order of the controls solved this issue:
1.) <form id="form1" runat="server">
2.) <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
3.)  <telerik:RadAjaxManager id="RadAjaxManager1" runat="server"
4.)  <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
inside the code block the calls to  $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(action); now works fine every time where previously it would only find the control once and not again after the postback.

Hope this is usefull info for someone else as well.

Cheers

Tonie

[Gotcha]

Thanks this saved me from wasting time !

[Netfinity]

We also encountered this issue. The reason was separation anxiety between the RadScriptManager and the RadAjaxManager. We had our RadScriptManager in a master page and the RadAjaxManager within a web control. In this scenario it seems the RadAjaxManager can only be found before the first ajax request. Telerik actually recommend that you only have one RadAjaxManager per page (see here http://www.telerik.com/help/aspnet-ajax/ajax-user-controls.html) so it made sense to move the RadAjaxManager to the master page as well as the RadScriptManager and then access the RadAjaxManager within the control like so:

private Telerik.Web.UI.RadAjaxManager _ajaxManager = null;

protected Telerik.Web.UI.RadAjaxManager AjaxManager
{
    get
    {
        if (_ajaxManager == null)
            _ajaxManager = (Telerik.Web.UI.RadAjaxManager)FindControl(Page.Master.Controls, typeof(Telerik.Web.UI.RadAjaxManager), "ajaxManager");

        return _ajaxManager;
    }
}

private Control FindControl(ControlCollection Controls, Type ControlType, string ControlID)
{
    Control controlFound = null;

    foreach (Control control in Controls)
    {
        if (control.GetType() == ControlType && control.ID == ControlID)
            controlFound = control;
        else if (control.HasControls())
            controlFound = FindControl(control.Controls, ControlType, ControlID);

        if (controlFound != null)
            break;
    }

    return controlFound;
}

protected void Page_Init(object sender, EventArgs e)
{
    if (AjaxManager != null)
    {
        AjaxManager.AjaxSettings.AddAjaxSetting(AjaxManager, panelAjax);  // ASP:Panel used for ajax update

        AjaxManager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(AjaxManager_AjaxRequest);

        AjaxManager.ClientEvents.OnRequestStart = "requestStart"; // javascript function executed before ajax request
        AjaxManager.ClientEvents.OnResponseEnd = "responseEnd"; // javascript function executed after ajax request
    }
}

Once this was done it solved a lot of issues. If it's not possible to move both the RadScriptManager and RadAjaxManager to the master page then another workaround is to create a global javascript variable to hold a reference to the RadAjaxManager and set this before the first ajax request is made like so:

<telerik:RadCodeBlock ID="codeBlock" runat="server">
    <script type="text/javascript" language="javascript">
        var ajaxManager = null;

        function initiateAjaxRequest(argument) {
            if (!ajaxManager) ajaxManager = $find('<%= ajaxManager.ClientID %>');
            ajaxManager.ajaxRequest(argument);
        }

        //...
    </script>
</telerik:RadCodeBlock>

Cheers,
Netfinity

[Karl Wilkens]

Hi all, I am in the same situation and have tried all the combinations in these posts to no avail. I have a ScriptManager in a master Page, an AjaxManager in the content page. This code is from this page in the client side api - http://www.telerik.com/help/aspnet-ajax/ajax-client-side-api.html

It fails with an error the first time it is called. We are using a masterpage with RadScriptManager, and AjaxManager in the content page. The order of code in the content page is -

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>

<telerik:RadScriptBlock ID="rsb1" runat="server">

<script language="javascript" type="text/javascript">

    function InitiateAjaxRequest(arguments) {

        try {

            var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

            ajaxManager.ajaxRequest(arguments);

        }

        catch (Error) {

            alert(Error);

        }

    }

</script>
</RadScriptBlock>

It errors each and every time with cannot call method ajaxRequest of null. Any thoughts? We cannot restructure the masterpage BTW.

[Martin]

Hello Karl Wilkens,

I have tried to reproduce the issue locally, but without success. I am attaching a small runnable project based on your code that runs as expected on my side. Please give it a try and let me know whether further assistance is needed.

Greetings,
Martin
the Telerik team

[Sniedze]

Looks like your demo on
 http://demos.telerik.com/aspnet-ajax/upload/examples/async/ajaxprocessing/defaultcs.aspx?product=asyncupload 
suffers from the same problem

[Vasil]

Hello Sniedze,

I tested the demo and was able to upload several images one after another without getting any error. Could you write steps for replicating the issue? Additional information like browser and OS that you are using will be also in help.

Regards,
Vasil
the Telerik team

[Sniedze]

Hello Vasil!
I experienced the problem using Google Chrome. OS is Windows 7 Enterprise.
The first picture uploads and shows. The second picture uploads and does not show - the progress bar and button "Remove" remains visible.
Tried in other browsers - in IE and Firefox it works OK.

[Vasil]

Hello,

Indeed the demo is not working properly in Chrome. And the problem is caused by unexpected CSS syntax, that breaks the page head update of RadAjaxManager. After the first upload, the manager tries to parse the css and update them, and it fails on this row:

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #RadButton1 { padding-right: 4px }
}

We will fix the demo soon, and there are two solutions for the issue. First is to place this CSS in external file. And second is to set EnablePageHeadUpdate="false" for the manager.

If you have similar problem you can try to comment out your CSS in the page to see if it will make any difference.
If this does not fixes it, please make sure the debugger in your browser is enabled and see if you get any error after the first Ajax call. Any JS error during the initialization will interrupt the creation of client side object of the manager. If the manager is not recreated, it will not be found later in your scripts.

Kind regards,
Vasil
the Telerik team

[Karl Wilkens]

This fixed it!

EnablePageHeadUpdate="false"

For the record, we are using Chrome 21.0.1180.89
VS 2008, NO MasterPages, Q2 2012 Telerik Aspnet.AJAX, Visual Basic, and on the .aspx page in question, we had a RadScriptManager, RadAjaxManager, RadScheduler and a RadWindowManager on the page. If EnablePageHeaderUpdate="true" (default), then after the 2nd Ajax call, you get TypeError: Cannot call method 'ajaxRequest' of null client-side. Simply setting EnablePageHeadUpdate="false" fixes the issue. Thanks.!

[Mahmoud]

Thanks Karl.

You Saved my Day after Months of suffering of this creepy issue :)

EnablePageHeadUpdate="false"   fixed it like a magic.