In Firefox, 2nd instace of Editor does not render properly because of javascript - Ox12f is null

Last post 10-28-2010, 9:17 PM by Kenneth. 1 replies.
Sort Posts: Previous Next
  •  10-28-2010, 9:24 AM 64754

    In Firefox, 2nd instace of Editor does not render properly because of javascript - Ox12f is null

    The following code produces the error - only in Firefox.  Firebug shows the error - 
    Ox12f is null
    The problem goes away if I remove the code that hides the div on the document load - but I need this.  This does work in IE 8.
     
     
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestView.ascx.cs" Inherits="Jenzabar.LMS.Portlets.CourseworkPortlet.Views.TestView" %>
    <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>
    <script type="text/javascript" language="javascript">
        // When first loaded, hide the section
        $(document).ready(function () {
            document.getElementById("divToToggleVisiblity").style.display = "none";  // this is the code that causes the problem
        });

        function toggleInstructionsHeader() {
            if ($("#divToToggleVisiblity").css("display") == "none") {
                $("#divToToggleVisiblity").show("slow");
            }
            else {
                $("#divToToggleVisiblity").hide("slow");
            }
        }
    </script>
    <div id="divToDoTheToggling" onclick="toggleInstructionsHeader()">
        Toggle Below Div
    </div>
    <div id="divToToggleVisiblity">
        <CE:Editor ID="editor1" runat="server" Height="200" AutoConfigure="Simple">
        </CE:Editor>
        <CE:Editor ID="editor2" runat="server" Height="200" AutoConfigure="Simple">
        </CE:Editor>
    </div>
  •  10-28-2010, 9:17 PM 64770 in reply to 64754

    Re: In Firefox, 2nd instace of Editor does not render properly because of javascript - Ox12f is null

    Hi judebowman,
     
    Please try this way.
     
    Do not hide the  "divToToggleVisiblity" by javascript, hide it in the style. Like below
     
       <div id="divToToggleVisiblity" style="display:none">
        <CE:Editor ID="editor1" runat="server" Height="200" AutoConfigure="Simple">
        </CE:Editor>
        <CE:Editor ID="editor2" runat="server" Height="200" AutoConfigure="Simple">
        </CE:Editor>
    </div> 
     
    Try the example below
     
    1. <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestView.ascx.cs" Inherits="Jenzabar.LMS.Portlets.CourseworkPortlet.Views.TestView" %>  
    2. <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>  
    3. <script type="text/javascript" language="javascript">  
    4.     
    5.     function toggleInstructionsHeader() {  
    6.         if ($("#divToToggleVisiblity").css("display") == "none") {  
    7.             $("#divToToggleVisiblity").show("slow");  
    8.         }  
    9.         else {  
    10.             $("#divToToggleVisiblity").hide("slow");  
    11.         }  
    12.     }  
    13. </script>  
    14. <div id="divToDoTheToggling" onclick="toggleInstructionsHeader()">  
    15.     Toggle Below Div  
    16. </div>  
    17. <div id="divToToggleVisiblity" style="display:none">  
    18.     <CE:Editor ID="editor1" runat="server" Height="200" AutoConfigure="Simple">  
    19.     </CE:Editor>  
    20.     <CE:Editor ID="editor2" runat="server" Height="200" AutoConfigure="Simple">  
    21.     </CE:Editor>  
    22. </div>  
     
    Regards,
     
    ken 
View as RSS news feed in XML