Radeditor set_html working but throws a javascript error that stops the rest of the function

Question

I have a table that contains a number of input boxes that represent custom tags within the RadEditor, something like this:

(td:0)      (td:1)
Foo value : [______________]
Bar value : [______________]
            [OK]

these are to replace text holders within the RadEditor, eg:

Lorem ipsum dolor sit amet, [Foo] consectetur adipiscing elit. 
Nulla ultrices dolor [Foo] ipsum, sit amet venenatis massa mollis at. 
Aliquam id fringilla [Bar]. Curabitur massa erat, feugiat.

On the click of the OK button, the text is replaced, and the table in which the values were entered should be hidden. Using the following javascript code

$('.populate-fields').click(function(e){
    e.preventDefault();
    var criteria = [];
    $('#<%= tableCriteria.ClientID %> tbody .js-criteria-row').each(function(index, el){
        var crit = {};
        crit.field = $(el).find('td:eq(0)').text();
        crit.value = $(el).find('td:eq(1) :input').val();
        criteria.push(crit);
    });
    var x = radeditor.get_html(true);
    $.each(criteria, function(index, value){
        var regex = new RegExp("\\["+value.field.toLowerCase()+"\\]", "gi");
        x = x.replace(regex, value.value);
    });
    radeditor.set_html(x);
    $('#<%= tableCriteria.ClientID %>').hide();
});

the content gets replaced, but is then followed by the following error (in chrome developer tools) on the radeditor.set_html(x) line.

Uncaught TypeError: Property '0' of object [object Array] is not a function VM333:6
(anonymous function) VM333:6
Telerik.Web.UI.RadWebControl.raiseEvent VM333:908
Type.callBaseMethod VM333:6
b.RadEditor.raiseEvent VM333:10347
(anonymous function) VM333:11720
b

where VM333 Line 6 is the following code in the MicrosoftAjax.js file :

Function.__typeName="Function";Function.__class=true;Function.createCallback=function(b,a){return function(){var e=arguments.length;if(e>0){var d=[];for(var ..........[trimmed]

Because of this error, the $('#criteria-table').hide(); line of code never gets run.

The page's aspx file, consists basically of this

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="true" ScriptMode="Release" OutputCompression="AutoDetect" ></telerik:RadScriptManager>

<asp:Table id="tableCriteria" runat="server" cellpadding="5" cellspacing="3" />
<telerik:RadEditor runat="server" ID="letterRadEdit" ToolbarMode="Default" EditModes="Design,Html" OnClientCommandExecuting="$pcmis._editor_command" 
    ToolsFile="~/App_Data/Editor.xml" Width="718px" EnableResize="false" EnableEmbeddedSkins="true" OnClientLoad="resizeMe" Skin="Windows7" OnClientSelectionChange="$page.setdirty" ContentFilters="DefaultFilters" EnableEmbeddedBaseStylesheet="true">
    <ExportSettings OpenInNewWindow="true" FileName="letter.pdf" />
    <SpellCheckSettings DictionaryLanguage="en-GB" AllowAddCustom="false" />
    <Languages>
        <telerik:SpellCheckerLanguage Code="en-GB" Title="English (UK)" />
    </Languages>
    <CssFiles>
        <telerik:EditorCssFile Value="/assets/css/radeditor.default.css" />
    </CssFiles>
</telerik:RadEditor>

For information The resizeMe javascript function is simply this:

var radeditor = null;
function resizeMe(editor, args){
    radeditor = editor;//
    radeditor.setSize('712', (($('#modal-holder').height()) * 0.85).toString());
}

score 0 · Accepted Answer · answered Dec 20 '13 at 12:15

I have solved this issue. It lay partially with the RadScriptManager, partially with the RadEditor, and mostly with me. The code for the RadEditor was copied from another page which worked. And altering the RadScriptManager to

<telerik:RadScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" EnableEmbeddedjQuery="false" EnableScriptCombine="false" OutputCompression="AutoDetect"  ></telerik:RadScriptManager>

got me all the javascript files in readable format, with a call stack of:

Uncaught Sys.InvalidOperationException: Sys.InvalidOperationException: Handler must be a function. ScriptResource.axd?d=z1j_eIkK4k91chMXx6nE6-OfQLfnfrzs-Xz1PXAu-rAigATL2C-Xu6Brfy2IdZxyqf7fYB2wE2tvDP…:222
Error$create ScriptResource.axd?d=z1j_eIkK4k91chMXx6nE6-OfQLfnfrzs-Xz1PXAu-rAigATL2C-Xu6Brfy2IdZxyqf7fYB2wE2tvDP…:222
Error$invalidOperation ScriptResource.axd?d=z1j_eIkK4k91chMXx6nE6-OfQLfnfrzs-Xz1PXAu-rAigATL2C-Xu6Brfy2IdZxyqf7fYB2wE2tvDP…:372
Sys$Component$create ScriptResource.axd?d=z1j_eIkK4k91chMXx6nE6-OfQLfnfrzs-Xz1PXAu-rAigATL2C-Xu6Brfy2IdZxyqf7fYB2wE2tvDP…:2723
(anonymous function) FootDesign.aspx:418
(anonymous function) ScriptResource.axd?d=z1j_eIkK4k91chMXx6nE6-OfQLfnfrzs-Xz1PXAu-rAigATL2C-Xu6Brfy2IdZxyqf7fYB2wE2tvDP…:2399
Sys$_Application$_doInitialize ScriptResource.axd?d=z1j_eIkK4k91chMXx6nE6-OfQLfnfrzs-Xz1PXAu-rAigATL2C-Xu6Brfy2IdZxyqf7fYB2wE2tvDP…:4280
(anonymous function)

Looking at the line in the ScriptResource that was referenced from my page FootDesign:418

if (events) {
        for (var name in events) {
            if (!(component["add_" + name] instanceof Function)) throw new Error.invalidOperation(String.format(Sys.Res.undefinedEvent, name));
            if (!(events[name] instanceof Function)) throw new Error.invalidOperation(Sys.Res.eventHandlerNotFunction);
            component["add_" + name](events[name]);
        }
    }

it turned out that it was falling over on the [name] variable in the above code, which happened to be selectionChange

TL;DR Solution

on the RadEditor my OnClientSelectionChange attribute pointed to the javascript function $page.setdirty which didn't exist on this page, but existed on the page I copied the RadEditor from adding this function to my local page, removed the error, and allowed the page to carry on working.

So the rule is here, check that all the relevant javascript functions exist. and use the above method for debugging similar errors.

Radeditor set_html working but throws a javascript error that stops the rest of the function

1 Answers1