$find not working with IE 8

[taeho]

Hi,

I am trying to reference a radTextBox through javascript to capitalize its value on blur and keypress event.
However, $find(client-Side-Object-Name) returns null in IE whereas it works fine in firefox (3.5.5).

The version of our telerik is 2008.3.1314.35

<telerik:RadScriptBlock ID="radScriptBlock" runat="server">
    <script type="text/javascript">

        AddPageLoadHandler(function()
        {
            AutoCapitaliseFirstChar('<%= FirstNameTextBox.ClientID %>');
        });

    </script>
    </telerik:RadScriptBlock>

function AddPageLoadHandler(fn)
{
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(fn);
}

// not created dynamically
<telerik:RadTextBox runat="server" ID="FirstNameTextBox" />

// These client-side functions auto-capitalises text in RadTextBox as user enters it
// The conversion is done after a short timeout to avoid interfering with normal onfocus behaviour
function AutoCapitaliseFirstChar(radTextBoxClientId) {

    var radTextBoxClientObject = $find(radTextBoxClientId);
    // here radTextBoxClientObject is null for IE but not for firefox
    // so it works fine with firefox not with IE 8

    // This converts the text when field loses focus
    $(radTextBoxClientObject.get_element()).blur(function() {
        setTimeout(function() {
            var val = radTextBoxClientObject.get_value();
            radTextBoxClientObject.set_value(val.substring(0, 1).toUpperCase() + val.substring(1))
        }, 200);
    });

    // Except in Safari, convert the text as it is typed
    // (in Safari this is incompatible with the field autocomplete behaviour)
    if (!$.browser.safari) {
        $(radTextBoxClientObject._textBoxElement).keypress(function() {
            setTimeout(function() {
                var val = $(radTextBoxClientObject._textBoxElement).val();
                radTextBoxClientObject.set_value(val.substring(0, 1).toUpperCase() + val.substring(1))
            }, 200);
        });
    }
}

Any ideas would be appreciated,

regards,

Toby

[Dimo]

Hello Toby,

If $find doesn't work, this generally means that:

1) The ID does not exist
2) There is no client control instance attached to the ID
3) $find() is executed before the client control instance has been initialized

In your case the problem is (3). Please use

Sys.Application.add_load(...);

instead of

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(...);

All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jose Granja]

Hi! I have a similar problem but my context is diferent!

on the page_load event I do a:

alert($find('RadEditorClientID'));

the page, I don't understand why, reloads twice. The first time the alert returns me an object and the second time it returns me nulls :S I don't now what causes the reload, I set de AutoEventWireup="False" and the in the code behind is defined as follows:

 this.Load += new EventHandler(Page_Load);

protected void Page_Load(object sender, EventArgs e)

I don't know what causing the problem. In IE it reloads twice also but the $find works fine all the time!

I'm using RadControls for ASP.NET AJAX Q3 2009

Can you please help me out?

cheers

[Dimo]

Hi Jose,

I am afraid the provided information is insufficient. Please provide a demo.

Sincerely yours,
Dimo
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Justin]

Good day Dimo,

You are probably tired of having to hear about IE issues but I am experiencing the same problem as below but I hope mine has a simpler solution.  Everything works in FF but not in IE8:

Here is the code in Javascript:

  //returns boolean not integer
       function GetBestValue()
        {
           var combo = $find("<%= rcbTopBottom.ClientID %>");
           if (combo == null) return;
               return combo.get_value();

        }

In IE8 this code when actioned during the Page_Load (this method is called from another Javascript function using Page.ClientScript.RegisterClientScriptBlock in the Page_Load).

FF returns the correct value but in IE8 this function returns always a null.  Its as if the ASP injection occurs too late in IE8.  I hope you can assist with this. (RadControls Q3 2009 SP1)

Regards,

Justin

[Dimo]

Hi Justin,

Scripts registered with Page.ClientScript.RegisterClientScriptBlock are executed before the ASP.NET AJAX library has been loaded and all client control instances have been initialized. You can use

http://www.asp.net/ajax/documentation/live/mref/M_System_Web_UI_ScriptManager_RegisterStartupScript_5_0feb167c.aspx

In this way, the script will be executed after the ASP.NET AJAX library has been loaded, but before the control instances have been created. So in the startup script you have to subscribe to the PageRequestManager pageLoaded client event:

http://www.asp.net/AJAX/Documentation/Live/ClientReference/Sys.WebForms/PageRequestManagerClass/PageRequestManagerPageLoadedEvent.aspx

Here is some more information:

http://blogs.telerik.com/dimodimov/posts/08-12-13/don_t_use_body_onload_in_asp_net_ajax_websites.aspx


Kind regards,
Dimo
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.

[Lyle Groome]

My $find() was also always coming back as null, but my usage was only looking things up on click events not pageloads so it wasn't timing. Turns out that $find will bomb if you have a javascript syntax issue in your functions. In my case an extra "{" in one of my page's JS functions was at fault and after finding it and correcting it $find worked again for me.

[Justin]

Hi Dimo

That worked brilliantly.  What I did was, I moved the Javascript method out of the Page.ClientScript.RegisterClientScriptBlock
and placed the following in the actual page itself.

<script type="text/javascript">
Sys.Application.add_load(LoadGrid);
</script>


This sorts out the whole problem I have been having.

Much appreciated and sorry for the late reply!

Justin

[Ganesh]

Hi Dimo

Even i m facing the same problem with $find("RadEditorID")
in my case i have a asp repeater control and in that i have a Radeditor control

and i have retrive the html text from all the RadEditor when the page is ready.

so i have tried to use document.ready function of jquery
the code is as follows

 $(document).ready(function () {
        $(".singleQuestion").find(".RadEditor").each(function () {
                var x = $(this).attr("id"); //i m able to the the ID  properly
                y = $find(x).get_html(true);
                alert(y);
         });
 });

the error i get is "'null' is null or not an object"
it work fine with FireFox.

can u please help me on this

[Vessy]

Hello Ganesh,

Could you try moving the desired functionality to the Application load handler, which will ensure that the controls in the page are loaded correctly and see if the problem still occurs?

Sys.Application.add_load(function () {
    $(".singleQuestion").find(".RadEditor").each(function () {
        var x = $(this).attr("id"); //i m able to the the ID  properly
        y = $find(x).get_html(true);
        alert(y);
    });
});

Regards,
Veselina Raykova
Telerik

[Ganesh]

Thanks a lot "Veselina Raykova"