INVALID_ACCESS_ERR: DOM Exception 15 in Chrome

[Rafal]

Hi Guys,

I ran into an issue in Chrome where if I post back a Rad Editor wrapped in a jquery dialog I will get a
javascript error: Uncaught Error: INVALID_ACCESS_ERR: DOM Exception 15.
Does anybody have any idea how to resolve this? I attached code to reproduce this issue

Thanks in advance!


$(document).ready(function ()

       {

           $("#testDialogInfo").dialog(

               {

                   autoOpen: false,

                   modal: true,

                   resizable: false,

                   scrollable: false,

                   width: "860px"

               });

 

               $("#testDialogInfo").parent().appendTo($("form:first")); 

       });

         

       function OpenDialog()

       {

 

           $find("<%= ajaxPanel.ClientID %>").ajaxRequest("");

 

          

 

       }

 

       function ResponseEnd(sender, eventArgs)

       {

 

           $("#testDialogInfo").dialog("open");

 

           var editor = $find("<%= rteFullDescription.ClientID%>");

 

 

           //$("#testDialogInfo").parent().appendTo($("form:first"));

           editor.onParentNodeChanged();

          

       }

<div id="testDialogInfo">
           <telerik:RadAjaxPanel  ID="ajaxPanel" runat="server" OnAjaxRequest="AjaxPanel_AjaxRequest" ClientEvents-OnResponseEnd="ResponseEnd">
          <telerik:RadEditor ID="rteFullDescription" Runat="server" style="margin-bottom:10px;" Height="200px"
               Editable="True"
               ToolsFile="~/RadControls/Editor/Phonebook/ToolsFile.xml"
               LicenseFile="~/RadControls/LicenseFile.xml"

               StripFormattingOptions="ConvertWordLists, MSWordRemoveAll"
               EditModes="Design">
                       <ImageManager   ViewPaths="~/Uploads/DefaultImages/"
                                       UploadPaths="~/Uploads/DefaultImages/"
                                       DeletePaths="~/Uploads/DefaultImages/"
                                       SearchPatterns="*.jpg, *.jpeg, *.gif, *.png, *.bmp"
                                       MaxUploadFileSize="5000000"   />
                       <CssFiles>
                           <telerik:EditorCssFile Value="~/Includes/Style/Editor.css" />
                       </CssFiles>
           </telerik:RadEditor>
      </telerik:RadAjaxPanel>
       </div>

[Rumen]

Hello Rafal,

Please, see the following forum thread on the subject: Problem with Rad Editor.

Best wishes,
Rumen
the Telerik team

[Rafal]

I took a look at that forum post unfortunately I already do it and it does not solve my problem.

[Rumen]

Hi Rafal,

You can download a sample working project from the following forum thread RadEditor and Jquery Dialog, in which the editor works as expected in a jQuery dialog in Chrome. You can compare both projects and see the difference in both configurations.

Regards,
Rumen
the Telerik team

[Rafal]

Hi Rumen,

I looked over the example code and the configuration difference is the lack of update panel which I need on that page.

The issue happens when you wrap the radeditor in a telerik update panel and pop the jquery dialog once the update panel finishes updating as demonstrated by the example that I included in my post. This works fine in FF and IE.

Thanks,
Rafal

[Rumen]

Hello Rafal,

Here is the solution for Chrome:

<div id="testDialogInfo">
    <telerik:RadAjaxPanel ID="ajaxPanel" runat="server" ClientEvents-OnResponseEnd="ResponseEnd">
        <telerik:RadEditor ID="rteFullDescription" runat="server" Style="margin-bottom: 10px;"
            Height="200px" Editable="True" StripFormattingOptions="ConvertWordLists, MSWordRemoveAll"
            EditModes="Design">
            <ImageManager ViewPaths="~/Uploads/DefaultImages/" UploadPaths="~/Uploads/DefaultImages/"
                DeletePaths="~/Uploads/DefaultImages/" SearchPatterns="*.jpg, *.jpeg, *.gif, *.png, *.bmp"
                MaxUploadFileSize="5000000" />
            <CssFiles>
                <telerik:EditorCssFile Value="~/Includes/Style/Editor.css" />
            </CssFiles>
        </telerik:RadEditor>
    </telerik:RadAjaxPanel>
</div>
<asp:Button ID="Button2" Text="text" runat="server" OnClientClick="OpenDialog(); return false;" />
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $("#testDialogInfo").dialog(
           {
               autoOpen: false,
               modal: true,
               resizable: false,
               scrollable: false,
               width: "860px",
               open: function (event, ui) {
                   var dialogOpenInterval = setInterval(function () {
                       var isOpen = $(event.target).dialog("isOpen");
                       if (isOpen) {
                           var editor = $find("rteFullDescription");
                           editor.onParentNodeChanged();
                           clearInterval(dialogOpenInterval);
                       }
                   }, 30);
               }
           });

        $("#testDialogInfo").parent().appendTo($("form:first"));
    });

    function OpenDialog() {
        $find("ajaxPanel").ajaxRequest("");
    }

    function ResponseEnd(sender, eventArgs) {
        $("#testDialogInfo").dialog("open");
    }
</script>

Kind regards,
Rumen
the Telerik team

[Hardik]

Hello All,

I am also getting the same error. I am not able to get the design mode and the preview mode of the RadEditor. Only HTML mode is working.

I have added the RadEditor in the RadWindow. It is working fine in all the browsers except the Google chrome and only in the specific version. It is working fine with the Chrome 11.0 but not working in the 15.0.

I have tried all the solutions available for this like editor.onParentNodeChanged() and also using the protoTypeJS but still not able to find the solution for this.

I have also added the radrditor on page and then in the RadWindow. The editor which simply on the page works well but the only problem with the RadWindow.

It will be a great help if anyone can give me the solutions.

[Marin Bratanov]

Hello Hardik,

Please try placing the following script at the end of the page (just below the closing form tag) that contains the RadEditor in the RadWindow.:

<script type="text/javascript">
    var $T = Telerik.Web.UI;
    $T.RadEditor.prototype.toggleEnhancedEdit = function (newValue)
    {
        if (this.get_contentAreaMode() == $T.EditorContentAreaMode.Div)
        {
            var conentArea = this.get_contentArea();
            if (typeof (newValue) == "undefined" || null == newValue)
                newValue = (conentArea.className.indexOf("reContentAreaToggle") > -1) ? false : true;

            if (newValue)
                Sys.UI.DomElement.addCssClass(conentArea, "reContentAreaToggle");
            else
                Sys.UI.DomElement.removeCssClass(conentArea, "reContentAreaToggle");

            this.updateToggleTableBorderToolState(newValue);
            return newValue;
        }
        else
        {
            if ($telerik.isSafari && !$telerik.isChrome && typeof (newValue) != "undefined" && false == this.disableContentAreaStylesheet(newValue))
            {
                this.get_contentWindow().setTimeout(Function.createDelegate(this, function ()
                {
                    this.disableContentAreaStylesheet(newValue);
                }), 200);
            }
            else
            {
                return this.disableContentAreaStylesheet(newValue);
            }
        }
    }
</script>

You can also try removing the VisibleOnPageLoad property of the RadWIndow if you are using it. In case you use it to open the RadWindow from the server please examine this thread on the correct way to do so.


Regards,
Marin
the Telerik team

[Hardik]

Thanks Marin.

It is working perfectly.

[Anthony]

Thank you Marin!!!