JavaScript error when programatically opening panels

11 posts, 0 answers
  1. Hector
    Hector avatar
    92 posts
    Member since:
    May 2009

    Posted 06 May 2010 Link to this post

    Hello.  I have created a page with a PanelBar and three RadPanelItems.  I am using the code from one of the samples where only one panel is opened and the other two disabled.  You fill out text boxes and  you click on the Next button and it will close the current panel, enable and open the next panel.  When the next panel is opened, I am getting the following JS error:
    An invalid or illegal string was specified" code: "12}h.insertRule(f[b]+"}",b+1);
    This is only hapenning on firefox
    It seems like it is injecting CSS code into the styles.  Here is my code:

    ASPX:
    <%@ Page Title="" Language="C#" MasterPageFile="~/MSD.Master" AutoEventWireup="true" 
        Theme="AdGeo" CodeBehind="MemberRegistration.aspx.cs" Inherits="MSD_web.MemberRegistration" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadHolder" runat="server"
    <script type="text/javascript"
        function ValidateCombo(source, arguments) { 
            var panelbar = $find("<%= RadPanelBar1.ClientID %>"); 
            var item = panelbar.findItemByValue("AccountInformation"); 
            var secretQuestion = item.findControl("cmbSecretQuestion"); 
     
            if (secretQuestion._text == 'Choose a secret question ->') 
                arguments.IsValid = false
            else 
                        arguments.IsValid = true
     
        } 
    </script> 
    </asp:Content> 
    <asp:Content ID="Content4" ContentPlaceHolderID="MainContentPlaceHolder" runat="server"
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" > 
            <telerik:RadPanelBar runat="server" ID="RadPanelBar1" ExpandMode="SingleExpandedItem" 
                Width="740px" Skin="Forest" > 
                <Items> 
                    <telerik:RadPanelItem Expanded="True" Text="Step 1: Account Information" runat="server" 
                        Selected="true"
                        <Items> 
                            <telerik:RadPanelItem Value="AccountInformation"  runat="server"
                                <ItemTemplate> 
                                    <div class="text" style="background-color: #edf9fe"
                                        <ul class="formList" id="accountInfo"
                                            <li> 
                                                <asp:Label ID="FirstNameLabel" runat="server" AssociatedControlID="FirstName" CssClass="formLabel">First Name*:Account Name:</asp:Label> 
                                                <telerik:RadTextBox ID="FirstName" runat="server" EmptyMessage="Your first name" Width="200px" 
                                                    Skin="AdGeo" EnableEmbeddedSkins="false"  > 
                                                </telerik:RadTextBox> 
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="FirstName" 
                                                    CssClass="error" ErrorMessage="First Name is required." ToolTip="First Name is required." 
                                                    ValidationGroup="SubmitGroup">*</asp:RequiredFieldValidator> 
                                                 
                                            </li> 
                                            <li> 
                                                <asp:Label ID="LastNameLabel" runat="server" AssociatedControlID="LastName" CssClass="formLabel">Last Name*:Password:</asp:Label> 
                                                <telerik:RadTextBox ID="LastName" runat="server" EmptyMessage="Enter last name" Skin="AdGeo" 
                                                    EnableEmbeddedSkins="false" Width="200px" > 
                                                </telerik:RadTextBox> 
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="LastName" 
                                                    CssClass="error" ErrorMessage="Last Name is required." ToolTip="Last Name is required." 
                                                    ValidationGroup="SubmitGroup">*</asp:RequiredFieldValidator> 
                                                
                                            </li> 
                                            <li> 
                                                <asp:Label ID="EmailLabel" runat="server" AssociatedControlID="Email" CssClass="formLabel">E-mail address*:Confirm Password:</asp:Label> 
                                                <telerik:RadTextBox ID="Email" runat="server" EmptyMessage="Enter e-mail address" 
                                                    Skin="AdGeo" EnableEmbeddedSkins="false" Width="200px" > 
                                                </telerik:RadTextBox> 
                                                <asp:RequiredFieldValidator ID="EmailRequired" runat="server" ControlToValidate="Email" 
                                                    CssClass="error" ErrorMessage="E-mail is required." ToolTip="E-mail is required." 
                                                    ValidationGroup="SubmitGroup">*</asp:RequiredFieldValidator> 
                                                
                                            </li> 
                                            <li> 
                                                <asp:Label ID="PhoneLabel" runat="server" AssociatedControlID="Phone" CssClass="formLabel">Phone number:Email:</asp:Label> 
                                                <telerik:RadMaskedTextBox ID="Phone" runat="server" Mask="(###) ###-####" Width="200px" 
                                                    Skin="AdGeo" EnableEmbeddedSkins="false"
                                                </telerik:RadMaskedTextBox> 
                                                 
                                            </li> 
                                            <li> 
                                                <asp:Label ID="CellPhoneLable" runat="server" AssociatedControlID="CellPhone" CssClass="formLabel">Cell Phone:</asp:Label> 
                                                <telerik:RadMaskedTextBox ID="CellPhone" runat="server" Mask="(###) ###-####" Width="200px" 
                                                    Skin="AdGeo" EnableEmbeddedSkins="false"
                                                </telerik:RadMaskedTextBox> 
                                            </li> 
                                            <li> 
                                                <asp:Label ID="Label10" runat="server" AssociatedControlID="cmbSecretQuestion" CssClass="formLabel">Security Question*:</asp:Label> 
                                                <telerik:RadComboBox ID="cmbSecretQuestion" runat="server" Style="margin-right: 5px;" 
                                                    Skin="AdGeo" EnableEmbeddedSkins="false" Width="200px" 
                                                    BorderColor="#000066" BorderWidth="1px" MaxHeight="100px"
                                                    <ExpandAnimation Type="Linear" /> 
                                                    <Items> 
                                                        <telerik:RadComboBoxItem Text="Choose a secret question ->" Value="" /> 
                                                        <telerik:RadComboBoxItem Text="What is your mother's maiden name?" /> 
                                                        <telerik:RadComboBoxItem Text="What year did you graduate from high school?" /> 
                                                        <telerik:RadComboBoxItem Text="What was your highschool's mascot?" /> 
                                                        <telerik:RadComboBoxItem Text="What was your first pet's name?" /> 
                                                        <telerik:RadComboBoxItem Text="What was your first car?" /> 
                                                        <telerik:RadComboBoxItem Text="Where was your father born?" /> 
                                                    </Items> 
                                                </telerik:RadComboBox> 
                                                <asp:CustomValidator ID="CustomValidator4" runat="server" ControlToValidate="cmbSecretQuestion" 
                                                    ErrorMessage="Please choose a secret question." ToolTip="Secret question is required." 
                                                    ValidationGroup="SubmitGroup" CssClass="error" 
                                                    ClientValidationFunction="ValidateCombo">*</asp:CustomValidator> 
                                            </li> 
                                            <li> 
                                                    <asp:Label ID="Label11" runat="server" AssociatedControlID="SecretAnswer" CssClass="formLabel">Security Answer*:</asp:Label> 
                                                    <telerik:RadTextBox ID="SecretAnswer" runat="server" TextMode="SingleLine" Skin="AdGeo" 
                                                        EnableEmbeddedSkins="false" Width="200px" > 
                                                    </telerik:RadTextBox> 
                                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="SecretAnswer" 
                                                        ErrorMessage="Secret Answer is required." ToolTip="Secret answer is required." 
                                                        ValidationGroup="SubmitGroup" CssClass="error">*</asp:RequiredFieldValidator> 
                                            </li> 
                                            
                                        </ul> 
                                        <br /> 
                                        <asp:ValidationSummary ID="ValidationSummary1" runat="server" Font-Italic="True" ValidationGroup="SubmitGroup" /> 
                                        <br /> 
                                        <asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal> 
                                        <asp:Button runat="server" ID="nextButton" OnClick="nextButton_Click" Text="Next" 
                                            CssClass="nextButton" ValidationGroup="SubmitGroup" /><br /> 
                                        <br /> 
                                    </div> 
                                </ItemTemplate> 
                            </telerik:RadPanelItem> 
                        </Items> 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Expanded="false" Enabled="false" Text="Step 2: Options" runat="server" 
                        Selected="false"
                        <Items> 
                            <telerik:RadPanelItem Value="AccountInformation" runat="server"
                                <ItemTemplate> 
                                    <div class="text" style="background-color: #edf9fe"
                                        <ul class="formList" id="accountInfo"
                                            <li> 
                                                <asp:Label runat="server" ID="nameLabel" >Account Name:First Name*:</asp:Label> 
                                                 
                                            </li> 
                                            <li> 
                                                <asp:Label runat="server" ID="Label1" >Password:Last Name*:</asp:Label> 
                                                 
                                            </li> 
                                            <li> 
                                                <asp:Label runat="server" ID="Label2" >Confirm Password:E-mail address*:</asp:Label> 
                                               
                                            </li> 
                                            <li class="lastListItem"
                                                <asp:Label runat="server" ID="Label3" >Email:Phone number:</asp:Label> 
                                                
                                            </li> 
                                            <li> 
                                                <asp:Label ID="CellPhoneLable" runat="server" CssClass="formLabel">Cell Phone:</asp:Label> 
                                                
                                            </li> 
                                            <li> 
                                                <asp:Label ID="Label10" runat="server" AssociatedControlID="cmbTimeRange"  
                                                    CssClass="formLabel">Best time to call:</asp:Label> 
                                                <telerik:RadComboBox ID="cmbTimeRange" runat="server"  
                                                    BorderColor="#000066" BorderWidth="1px" EnableEmbeddedSkins="false"  
                                                    MaxHeight="100px" Skin="AdGeo" Style="margin-right: 5px;" Width="200px"
                                                    <ExpandAnimation Type="Linear" /> 
                                                    <Items> 
                                                        <telerik:RadComboBoxItem Text="Select your desired call time -&gt;" Value="" /> 
                                                        <telerik:RadComboBoxItem Text="6:00 AM to 8:00 AM" /> 
                                                        <telerik:RadComboBoxItem Text="8:00 AM to 10:00 AM" /> 
                                                        <telerik:RadComboBoxItem Text="10:00 AM to 12:00 PM" /> 
                                                        <telerik:RadComboBoxItem Text="12:00 PM to 2:00 PM" /> 
                                                        <telerik:RadComboBoxItem Text="2:00 PM to 4:00 PM" /> 
                                                        <telerik:RadComboBoxItem Text="4:00 PM to 6:00 PM" /> 
                                                        <telerik:RadComboBoxItem Text="6:00 PM to 8:00 PM" /> 
                                                        <telerik:RadComboBoxItem Text="8:00 PM to 10:00 PM" /> 
                                                        <telerik:RadComboBoxItem Text="10:00 PM to 12:00 AM" /> 
                                                    </Items> 
                                                </telerik:RadComboBox> 
                                                 
                                            </li> 
                                             
                                        </ul> 
                                        <br /> 
                                         
                                        <asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal> 
                                         
                                        <asp:Button runat="server" ID="nextButton" Text="Next" OnClick="nextButton_Click" CssClass="nextButton7"   /> 
                                         
                                        <br /> 
                                        <br /> 
                                        <br /> 
                                    </div> 
                                </ItemTemplate> 
                            </telerik:RadPanelItem> 
                        </Items> 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Enabled="False" Text="Step 3: Terms of use" runat="server"
                        <Items> 
                            <telerik:RadPanelItem Value="Register" runat="server"
                                <ItemTemplate> 
                                    <div class="text" style="background-color: #edf9fe"
                                        <ul class="formList" id="termsOfUse"
                                            <li class="lastListItem"
                                                <img src="Images/terms.gif" alt="sample terms" width="550" height="224" /> 
                                                <br /> 
                                                <br /> 
                                                <asp:CheckBox runat="server" ID="termsCheckBox" /><asp:Label ID="Label7" runat="server" 
                                                    CssClass="checkboxLabel" AssociatedControlID="termsCheckBox">I agree to the Terms &amp; Conditions</asp:Label> 
                                                <asp:CustomValidator runat="server" ValidationGroup="registerGroup" ErrorMessage="You should agree with the terms and conditions.!" 
                                                    ClientValidationFunction="validateTerms" ID="termsValidator" Text="*" /> 
                                                <br /> 
                                                <asp:Button runat="server" ID="registerButton" ValidationGroup="registerGroup" Text="Register" 
                                                    CssClass="nextButton" /> 
                                                <br /> 
                                                <br /> 
                                            </li> 
                                        </ul> 
                                    </div> 
                                </ItemTemplate> 
                            </telerik:RadPanelItem> 
                        </Items> 
                    </telerik:RadPanelItem> 
                </Items> 
                <CollapseAnimation Duration="100" Type="None" /> 
                <ExpandAnimation Duration="100" Type="None" /> 
            </telerik:RadPanelBar> 
        </telerik:RadAjaxPanel> 
    </asp:Content> 
     

    CS file:
    using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
     
    namespace MSD_web 
        public partial class MemberRegistration : System.Web.UI.Page 
        { 
             
            protected void Page_Load(object sender, EventArgs e) 
            { 
                
            } 
     
            protected void nextButton_Click(object sender, EventArgs e) 
            { 
                GoToNextItem(); 
            } 
     
            private void GoToNextItem() 
            { 
                int selectedIndex = RadPanelBar1.SelectedItem.Index; 
     
                RadPanelBar1.Items[selectedIndex + 1].Selected = true
                RadPanelBar1.Items[selectedIndex + 1].Expanded = true
                RadPanelBar1.Items[selectedIndex + 1].Enabled = true
                RadPanelBar1.Items[selectedIndex].Expanded = false
     
            } 
     
             
        } 
     
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 12 May 2010 Link to this post

    Hello Hector,

    I've tested the provided code but wasn't able to replicate this error, could you please prepare a sample page which will help us reproduce the issue and send  it to us? You should open a support ticket in order to be able to attach files. Thanks

    Greetings,
    Yana
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marc Messer
    Marc Messer avatar
    17 posts
    Member since:
    May 2009

    Posted 30 Jun 2010 Link to this post

    I'm having a similar issue.  The only thing that seems to be affected is the lack of loading panel after the first ajax load.  Once again this is only happening is firefox.
  5. Hector
    Hector avatar
    92 posts
    Member since:
    May 2009

    Posted 30 Jun 2010 Link to this post

    I have found the fix to this, and I forgot to post it here.  Here is the link to another forum on this:
    Solution: Remove /* comment */ tags from CSS
  6. Dan
    Dan avatar
    6 posts
    Member since:
    Apr 2013

    Posted 08 Dec 2014 in reply to Hector Link to this post

    Thanks Hector!  You saved hours of troubleshooting!
  7. Hernán Jr.
    Hernán Jr. avatar
    1 posts
    Member since:
    Aug 2015

    Posted 27 Nov 2015 Link to this post

    Hello,

     Same error, fixed removing css intructions with @

    like:
     @-ms-viewport { width: device-width; }

  8. Mark Caldwell
    Mark Caldwell avatar
    3 posts
    Member since:
    Sep 2009

    Posted 29 Dec 2015 Link to this post

    Thanks Hector!! You saved me so much time..
  9. Jeremy Yoder
    Jeremy Yoder avatar
    131 posts
    Member since:
    Dec 2009

    Posted 19 Jul Link to this post

     

    Thanks, Hector! This problem still exists, even in the newest Telerik code. But I'll give a few more details to help others and/or enable Telerik to fix it. The code resides in Telerik.Web.UI.Common.Core.js in this area...

     

    c<e.length;
    c++){if(e[c].replace(/\s*/,"")==""){continue;
    }if(e[c].indexOf("{")!=-1){f.insertRule(e[c]+"}",f.cssRules.length);
    }}}}},getHeadElement:function(){var b=document.getElementsByTagName("head");

     

    With this particular line highlighted...

    f.insertRule(e[c]+"}",f.cssRules.length)

     

    What's interesting, is you can have comments like this...

    /* blah blah This CSS does blah blah */

    But you get this error sometimes with comments like this...

            /*
            html body .RadMenu .rmGroup:before,
            html body .RadMenu .rmMultiColumn:before,
            html body .RadMenu .rmScrollWrap > .rmHorizontal:before,
            html body .RadMenu .rmScrollWrap > .rmVertical:before {
                width: 0px;
            }
            */

    So something isn't parsing right when you have actual styles in your comments.

     

  10. Jeremy Yoder
    Jeremy Yoder avatar
    131 posts
    Member since:
    Dec 2009

    Posted 19 Jul in reply to Jeremy Yoder Link to this post

     

    BTW, I was getting this error in IE, not firefox, which I hadn't even tried yet, but assume it still happens there too.

  11. Alex Dybenko
    Alex Dybenko avatar
    119 posts
    Member since:
    Jan 2005

    Posted 12 Sep in reply to Jeremy Yoder Link to this post

    Got the same error in IE, it was comment in CSS
  12. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 12 Sep Link to this post

    Hello,

    This issue is explained in the following article, together with solutions: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxmanager/troubleshooting/known-reasons-for-error-messages.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017