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

$find issue in IE8

2 Answers 33 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
KO
Top achievements
Rank 1
KO asked on 08 Aug 2012, 07:57 PM
So lately I have been working on getting our website cross browser compatible, and I just ran into a rather noticeable problem with one of our .ascx controls. The control's entire XML markup is shown below. Everything seems to be working good in the other internet browsers, but in internet explorer the $find just returns null!

Returns null here:

<telerik:RadScriptBlock ID="AddressBookScriptBlock" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {


            $("#<%= AddressGridDiv.ClientID %>").hide();


            AddressBook_InitializeClientSide(
                $find("<%= AddressBookListView.ClientID %>"),
                $("#<%= SelectedContacts.ClientID %>"));


        });
    </script>
</telerik:RadScriptBlock>

AddressBook.ascx:

<table id="AddressTable" style="width: 100%" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="top">
            <telerik:RadButton ID="ToButton" runat="server" Text="" Width="60px"
                AutoPostBack="false" OnClientClicked="ToggleAddressGrid" />
        </td>
        <td style="width: 100%; padding-left: 5px; padding-bottom: 5px; padding-right: 5px">
            <telerik:RadListView ID="AddressBookListView" runat="server" DataKeyNames="name,id"
                ClientDataKeyNames="name,id" ClientIDMode="AutoID" Width="100%" >
                <ClientSettings>
                    <DataBinding>
                        <LayoutTemplate>
                            <div ID="#= owner.get_id() #_itemContainer" class="DataLayoutTemplate"
                                onclick="ToggleAddressGrid(this, event, '#= owner.get_id() #')" />
                        </LayoutTemplate>
                        <EmptyDataTemplate>
                            <div class="TelerikFont EmptyDataTemplate" runat="server">
                                Click here or use the button to add contacts...
                            </div>
                        </EmptyDataTemplate>
                        <ItemTemplate>
                            <table runat="server" class="AddressContact TelerikFont" cellpadding="0" cellspacing="0"
                                onclick="AddressBook_DeSelectFromAddressGrid('#= owner.get_id() #','#= id #');">
                                <tr>
                                    <td style="padding-left: 5px; padding-right: 5px;">
                                        #= name #
                                    </td>
                                    <td style="width: 0; display: none; overflow: visible">
                                        #= id #
                                    </td>
                                    <td style="padding-right: 5px;">
                                        <img src="#= ResolveClientUrl('~/Main/Content/Images/Icons/msg_delete.gif') #" />
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </DataBinding>
                </ClientSettings>
            </telerik:RadListView>
            <div style="width: 100%; position: relative;">
            <div runat="server" id="AddressGridDiv" class="AddressGridDiv">
                <telerik:RadAjaxLoadingPanel ID="AddressBookLoadingPanel" runat="server" />
                <telerik:RadAjaxPanel ID="AddressGridAjaxPanel" runat="server" LoadingPanelID="AddressBookLoadingPanel">
                    <telerik:RadGrid ID="AddressBookGrid" runat="server" AutoGenerateColumns="false" AllowFilteringByColumn="true"
                        AllowSorting="true" AllowPaging="true" OnNeedDataSource="AddressGrid_NeedsDataSource"
                        AllowMultiRowSelection="true">
                        <MasterTableView DataKeyNames="Id,Name" ClientDataKeyNames="Id,Name" AllowNaturalSort="false" Width="100%">
                        <SortExpressions>
                            <telerik:GridSortExpression  />
                        </SortExpressions>
                            <Columns>
                                <telerik:GridClientSelectColumn>
                                    <HeaderStyle Width="40px" />
                                </telerik:GridClientSelectColumn>
                                <telerik:GridBoundColumn HeaderText="Name" SortExpression="Name" DataField="Name"
                                    FilterControlWidth="150" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
                                    ShowFilterIcon="false" />
                                <telerik:GridBoundColumn SortExpression="ParentCawClient.Name" DataField="ParentCawClient.Name"
                                    HeaderText="Client Name" FilterControlWidth="150px" ShowFilterIcon="false"
                                    CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" />
                                <telerik:GridBoundColumn HeaderText="Email Address" SortExpression="Email" DataField="Email"
                                    FilterControlWidth="150" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
                                    ShowFilterIcon="false" />
                            </Columns>
                        </MasterTableView>
                        <ClientSettings>
                            <Selecting AllowRowSelect="true" />
                            <ClientEvents OnRowSelected="AddressBook_AddRowToListView"
                                OnRowDeselected="AddressBook_RemoveRowFromListView"
                                OnGridCreated="AddressBook_InitGridContacts" />
                            <DataBinding EnableCaching="true" />
                        </ClientSettings>
                        <GroupingSettings CaseSensitive="false" />
                    </telerik:RadGrid>
                </telerik:RadAjaxPanel>
            </div>
            </div>
        </td>
    </tr>
</table>
 
<asp:HiddenField ID="SelectedContacts" runat="server" Value="" ClientIDMode="AutoID" />
 
<telerik:RadScriptBlock ID="AddressBookScriptBlock" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
 
            $("#<%= AddressGridDiv.ClientID %>").hide();
 
            AddressBook_InitializeClientSide(
                $find("<%= AddressBookListView.ClientID %>"),
                $("#<%= SelectedContacts.ClientID %>"));
 
        });
    </script>
</telerik:RadScriptBlock>

Page_Load code behind for the control:

protected void Page_Load(object sender, EventArgs e)
        {
            AddressBookListView.ClientSettings.DataBinding.ItemPlaceHolderID = AddressBookListView.ClientID +
                                                                               "_itemContainer";
            ClientIDMode = ClientIDMode.AutoID;
        }


The page that contains the .ascx control has no managers of any kind, and ends up getting loaded from the default page that has RadWindowManager:

<telerik:RadWindowManager  ID="ViewEditMessageWindow" ShowContentDuringLoad="false" VisibleStatusbar="false"
            ReloadOnShow="true" runat="server" EnableShadow="true" KeepInScreenBounds="true"
            Left="10px" Top="10px" MinHeight="600px" MinWidth="800px">
        <Windows>
            <telerik:RadWindow ID="ViewMessage" runat="server" Behaviors="Close" NavigateUrl="" MinHeight="600" MinWidth="800"
                Modal="true" Overlay="true" />
        </Windows>
    </telerik:RadWindowManager>

and the window getting created from this default page's javascript

function NewMessage(sender, eventArgs) {
                var oWnd = radopen("<%= Navigator.NewMessage() %>", "ViewEditMessageWindow");
            }

We need to get the find to work in IE V8.

2 Answers, 1 is accepted

Sort by
0
Accepted
Maria Ilieva
Telerik team
answered on 13 Aug 2012, 10:59 AM
Hi Kelson,

Please try to set a small timeout in the client code before calling $find. I suppose there could be an issue in the time for which the controls scripts are loaded in IE8 which a bit slower browser. Also please note that the   $(document).ready will ne fire after ajax which is generic framework behaviour. Therefore in case you need to keep the RadAjaxPanel around the controls on the page I would suggest you to use the client pageLoad event for triggering the needed client logic.

Greetings,
Maria Ilieva
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
KO
Top achievements
Rank 1
answered on 13 Aug 2012, 04:19 PM
Yep that was it thank you Maria! For others that come across this and need a code example here is the solution in slightly more depth:

http://www.telerik.com/community/forums/aspnet-ajax/mvc/document-ready-and-radcontrol-s-availability.aspx
Tags
Ajax
Asked by
KO
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
KO
Top achievements
Rank 1
Share this question
or