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

INVALID_ACCESS_ERR: DOM Exception 15 in Chrome

9 Answers 84 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Rafal
Top achievements
Rank 1
Rafal asked on 07 Nov 2011, 09:27 PM
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>

9 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 09 Nov 2011, 02:28 PM
Hello Rafal,

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

Best wishes,
Rumen
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
0
Rafal
Top achievements
Rank 1
answered on 11 Nov 2011, 07:38 PM
I took a look at that forum post unfortunately I already do it and it does not solve my problem.
0
Rumen
Telerik team
answered on 14 Nov 2011, 12:43 PM
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
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
0
Rafal
Top achievements
Rank 1
answered on 14 Nov 2011, 04:45 PM
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
0
Rumen
Telerik team
answered on 15 Nov 2011, 04:06 PM
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
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
0
Hardik
Top achievements
Rank 1
answered on 25 Nov 2011, 10:55 AM
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.
0
Marin Bratanov
Telerik team
answered on 25 Nov 2011, 04:49 PM
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
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
0
Hardik
Top achievements
Rank 1
answered on 20 Dec 2011, 06:09 AM
Thanks Marin.

It is working perfectly.
0
Anthony
Top achievements
Rank 1
answered on 05 Sep 2012, 06:57 PM
Thank you Marin!!!
Tags
Editor
Asked by
Rafal
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Rafal
Top achievements
Rank 1
Hardik
Top achievements
Rank 1
Marin Bratanov
Telerik team
Anthony
Top achievements
Rank 1
Share this question
or