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

$find issue in IE8

2 Answers 73 Views

Ajax

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

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>

</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

Accepted

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.