More in this section

Forums / Developing with Sitefinity / RadRating javascript not working in IE

RadRating javascript not working in IE

5 posts, 1 answered
  1. Bruno Michels
    Bruno Michels avatar
    125 posts
    Registered:
    16 Apr 2010
    14 May 2010
    Link to this post
    I added the RadRating control on my page

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <telerik:RadRating ID="Rating" runat="server" />

    Works nicely. But, when I try to get the object using javascript in IE 8 it returns null.

    <script type="text/javascript">
        var rating = $find("<%= Rating.ClientID %>");
         
        alert(rating + "\n\n" + $find);
    </script>

    The rating show as null and $find shows the correct function.
    This behavior only happens on IE.

    Errors on IE Javascript console:
    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MDDS; InfoPath.2; Tablet PC 2.0)
    Carimbo de data/hora: Fri, 14 May 2010 14:11:46 UTC
     
     
    Message: Invalid argument.
    Line: 212
    Character: 1
    Code: 0
     
     
    Message: 'null' is null or not an object
    Line: 626
    Character: 13
    Code: 0


    Tested on Firefox 3.6 and Chrome 4.1.

    Outputs:
    - IE http://img9.imageshack.us/img9/4320/71599833.png
    - Firefox http://img704.imageshack.us/img704/5008/firefoxv.png
    - Chrome http://img718.imageshack.us/img718/4008/chromed.png

    What could be causing this behavior? How can I fix it?
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    14 May 2010
    Link to this post
    Hi Bruno Michels,

    Actually your code does not show  on which event you are trying to find the RadRating object. There are three Client-side events:

    • OnClientLoad - raised when the Rating control is initialized.
    • OnClientRating - raised when the user is rating and before the new value is set to the control.
    • OnClientRated - raised after the user has rated.
    I prepared a very basic sample and it works without problems in IE. you could take a look at the attached screencast.

    <script type="text/javascript">
     
        function OnClientLoad(sender) {
            alert(sender._uniqueID);
        }
     
    </script>
     
     
     <telerik:RadRating ID="RadRating1" runat="server" Precision="Exact" SelectionMode="Continuous"
                OnClientLoad="OnClientLoad" ItemCount="7" />


    Regards,
    Ivan Dimitrov
    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.
  3. Bruno Michels
    Bruno Michels avatar
    125 posts
    Registered:
    16 Apr 2010
    14 May 2010
    Link to this post
    I tested on a blank page and it worked, but on the page I want it's not working.

    The only error in the console now is
    Message: Invalid argument.
    Line: 212
    Character: 1
    Code: 0
    URI: http://localhost/ScriptResource.axd?d=WfMToHjGFCF_7wTxkVN2y7njbX2Q9lReXKa5LpnJM_HGuQMVe1bPXGAcfIQooLNQ0&t=ffffffffd0a667b1

    I have no clue what's wrong with this script, the control doesn't work but that's only in IE.

    The scripts on my MasterPage
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <asp:ScriptManager ID="scriptManager" runat="server"/>
      
    <script type="text/javascript">
        google.load("jquery", "1.4.2");
    </script>  
          
    <script type="text/javascript" src="/App_Themes/Default/inc/js/jquery.tabs.js"></script>
    <script type="text/javascript" src="/App_Themes/Default/inc/js/init.js"></script>

    I have two NewsView on this page.

    The control on a blank page with the MasterPage also works...

    What could be causing this error?
  4. Bruno Michels
    Bruno Michels avatar
    125 posts
    Registered:
    16 Apr 2010
    14 May 2010
    Link to this post
    I found out that the CSS is causing this behavior on IE, here is the code that produces the error:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
         
        <style>
            /** #region RadRating **/
            div.RadRating
            {
                color:#333333;
                font-size:11px;
                margin:0;
                padding:0;
                width: 90px !important;
                float: left;
            }
            div.RadRating ul
            {
                margin: 0 0 -4px 0;
                padding: 0;
                width: 90px;
            }
            div.RadRating ul li.rrtSelected ,
                div.RadRating ul li.rrtOver  /* Star on */
            {
                display: inline-block;
                background: url(img/icones.gif) no-repeat -50px 0;
                width: 16px;
                height: 16px;
            }
            div.RadRating ul li,
                div.RadRating ul li.rrtItem  /* Star off */
            {
                display: inline-block;
                background: url(img/icones.gif) no-repeat -75px 0;
                width: 16px;
                height: 16px;
            }
            div.RadRating ul li  a { display: none; }
            /** #endregion RadRating **/
        </style>
         
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
         
            <script type="text/javascript">
            function Rating_Load()
            {
                var rating = $find("<%= Rating.ClientID %>");
                alert("<%= Rating.ClientID %>" + " == " + rating + "\n\n" + $find);
            }
            </script>
             
     
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <telerik:RadRating ID="Rating" runat="server" OnClientLoad="Rating_Load" />
         
        </div>
        </form>
    </body>
    </html>

    How may I fix it?
  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    15 May 2010
    Link to this post
    Hi Bruno Michels,

    • The bottom unit of the div.RadRating ul margin should be no more than -2, otherwise the value is negative and this breaks the control js. You could also remove div.RadRating ul li  a { display: none; } which will allow you to use bottom unit for the margin -4
    • You cannot set width: 90px !important; - you should use the control width property. 
    • The style attribute should have a type  - <style type="text/css">
    • In your sample the div is not presented.

    All the best,
    Ivan Dimitrov
    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.
    Answered
Register for webinar
5 posts, 1 answered