The forum operates in read-only mode. Please head to StackOverflow for support.

Wed, 09/28/2011 - 13:19

Joined: 28/09/2011

Posts: 6

CKEditor Script fails to load in Update Panel/Formview

I have CKEditor in a Formview inside an UpdatePanel.

Editor scripts fail to load when it's rendered for the first time on an asychronous postback i.e. item to edit/insert template. See error message below

Sys.ScriptLoadFailedException: The script 'http://localhost:64383/ckeditor/ckeditor.js?t=B8DJ5M3' failed to load

I can see in fiddler that the script downloads ok.

Same happens with just an UpdatePanel if the editor is rendered for the first time on an async postback

I'm using .net 3.5

Anyone know of a solution to this?

Thanks Gavin Ó hEaghra

Wed, 09/28/2011 - 15:28

Anna

Joined: 14/12/2010

Posts: 1369

Re: CKEditor Script fails to load in Update Panel/Formview

Which version of CKEditor for ASP.NET are you using? The latest release, CKEditor for ASP.NET 3.6.2, contains several fixes for postback issues. Can you check if you can still reproduce the problem in the latest version? Thanks!

Documentation Manager, CKSource

See CKEditor 5 docs, CKEditor 4 docs, CKEditor 3 docs, CKFinder 3 docs, CKFinder 2 docs for help.
Visit the new CKEditor SDK for samples showcasing editor features to try out and download!

Wed, 09/28/2011 - 15:57

gavinoheaghra

Joined: 28/09/2011

Posts: 6

Re: CKEditor Script fails to load in Update Panel/Formview

Hi Anna, it's 3.6.2, dowloaded it on Monday.

Here's my code for editor in an updatepanel.
Editor visible property is false initally .
Then visible is set to true on Async postback.
Textarea for editor rendered but script fails to load as per error.
Fiddler shows that the script is got ok.

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<CKEditor:CKEditorControl ID="CKEditor1" runat="server" Width="500" Height="200" Visible="false"></CKEditor:CKEditorControl>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</form>

protected void Page_Load(object sender, EventArgs e)
{
CKEditor1.Text = DateTime.Now.ToString();
if (ScriptManager1.IsInAsyncPostBack)
CKEditor1.Visible = true;
}

Html rendered on async postback

<textarea style="height: 200px; width: 500px;" id="CKEditor1" cols="20" rows="2" name="CKEditor1">28/09/2011 14:34:33</textarea>

Firebug error

Sys.ScriptLoadFailedException: The script 'http://localhost:64383/ckeditor/ckeditor.js?t=B8DJ5M3' failed to load. Check for:
Inaccessible path.
Script errors. (IE) Enable 'Display a notification about every script error' under advanced settings.
Missing call to Sys.Application.notifyScriptLoaded().
http://localhost:64383/ScriptResource.a ... ffbb6d64f2
Line 3661

Fiddler Traffic

Initial get
GET http://localhost:64383/admin/wysiwyg.aspx
200 OK (text/html)

Async post
POST http://localhost:64383/admin/wysiwyg.aspx
200 OK (text/plain)

GET http://localhost:64383/ckeditor/ckeditor.js?t=B8DJ5M3
200 OK (application/x-javascript)

Thanks for the reply

Fri, 09/30/2011 - 14:00

j.swiderski

Joined: 10/05/2011

Posts: 174

Re: CKEditor Script fails to load in Update Panel/Formview

Doesn't look to me like CKEditor problem. More like configuration/setup problem on your site:
Here are some links that say why this error occurs:
http://msdn.microsoft.com/en-us/library/bb397451.aspx
http://forums.asp.net/p/1170450/1958413.aspx

Read carefully especially that second one - it leads to:
http://blogs.visoftinc.com/2007/09/23/a ... -problems/
Not and official msdn source but might be helpful.

Tue, 10/04/2011 - 13:03

gavinoheaghra

Joined: 28/09/2011

Posts: 6

Re: CKEditor Script fails to load in Update Panel/Formview

Hi Jakub, thanks for your reply. I checked the links you recommended.

In my case:

Ajax seems to be working as expected, the update panel updates on async postback.
No custom scripts are being registered.
CKEditor in update panel, visible-false on pageload (not rendered).
Set to visible on async postback.
Script downloads but scriptload error occurs.

Adding an instance of CKEditor on pageload solves the error, script files are downloaded on pageload and don't need registered on asyc postback.

CKEditor rendered on asyn postback would seem to be a fairly common scenario, in a formview or a multipanel.
However I don't see a lot of posts about it so I presume others are not having a problem, maybe it is my setup.

It's not a big problem, I'll register a hidden editor instance on pageload

Regards Gavin

Tue, 12/20/2011 - 19:26

ptcc83

Joined: 20/12/2011

Posts: 1

Re: CKEditor Script fails to load in Update Panel/Formview

I have the same issue, any progress on this? i've seen lots of complaints from several people about this, but failed to find a solution.

Tue, 01/03/2012 - 11:48

j.swiderski

Joined: 10/05/2011

Posts: 174

Re: CKEditor Script fails to load in Update Panel/Formview

i've seen lots of complaints from several people about this

Could you provide any links to those complaints? I would like to look into this issue.

I have talked with our .NET developers, they have checked the issue but couldn't get the error @gavinoheaghra was talking about. It looked like problem in his configuration and not like CKEditor problem. I assume that you are having the same issue here.

@ptcc83 just to make sure try to create really simple application without any overhead and see if it loads any custom scripts. Try two scenarios with and without CKEditor (freshly downloaded from the http://ckeditor.com/download)

Wed, 10/03/2012 - 17:51

jdiolatzis

Joined: 03/10/2012

Posts: 5

Re: CKEditor Script fails to load in Update Panel/Formview

The solution proposed by @gavinoheaghra to add the control on page_load works fine in most cases.
If you have the editor in a div with visible="false" though and switch the visibility it still breaks.

Here is an example:

<form id="form1" runat="server">
    <asp:ScriptManager ID="scrpM" runat="server" EnablePageMethods="true">
    </asp:ScriptManager>
    
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnshow" runat="server" Text="Show Hidden Editor" />
            <div id="divEditor" runat="server" visible="false">
                <asp:PlaceHolder ID="plCKEditor" runat="server"></asp:PlaceHolder>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>

If on the button click you set visible="True" of the divEDitor you still get error message.
Any chance for a quick fix?

Thanks

Wed, 10/03/2012 - 18:40

jdiolatzis

Joined: 03/10/2012

Posts: 5

Re: CKEditor Script fails to load in Update Panel/Formview

A quick fix to the problem I posted just above is to put another instance of the CKEditor on the page within a div with disply:none.
That fixes the issue, I guess the javascript is registered at page load and both controls use the same javascript?

Thu, 10/04/2012 - 13:22

#10

j.swiderski

Joined: 10/05/2011

Posts: 174

Re: CKEditor Script fails to load in Update Panel/Formview

@jdiolatzis I don't see CKEditor control tags in your code.

Are you using plain JavaScript CKEditor? If that is the case then yes, you might be having problems with update panel.
When using .NET you should be using CKEditor control for .NET. That is why it was created in the first place.

Thu, 10/04/2012 - 13:31

#11

jdiolatzis

Joined: 03/10/2012

Posts: 5

Re: CKEditor Script fails to load in Update Panel/Formview

@ j.swiderski No, using the .NET version.
As per @gavinoheaghra suggestions we added the control on page load (that's why there is a place holder), although you don't really need to if you have two instances of the CKEditor on the page.

Thu, 10/04/2012 - 14:10

#12

j.swiderski

Joined: 10/05/2011

Posts: 174

Re: CKEditor Script fails to load in Update Panel/Formview

Thank you for clarifying that. I have seen your post but just needed to be sure.

I will post this question to our .NET developers once more. Like I have written before they were not able to reproduce the problem but perhaps with new information they will be able to say more.

@jdiolatzis could you tell me if you are getting the same problem as @gavinoheaghra i.e. the script doesn't load? Could you perhaps what error you were getting (message and part of stack trace) when this workaround was not used ?

Fri, 12/07/2012 - 20:13

(Reply to #12) #13

csharpnew

Joined: 04/12/2012

Posts: 5

any resolution?

Hello all,

I am having a similar issue. I am getting a script load error in the edittemplate of the gridview control. It however works in emptydatatemplate.

My post is here: http://ckeditor.com/forums/CKEditor/CKeditor-script-fails-to-load

Any help would be highly appreciated.

Thanks

Fri, 05/31/2013 - 05:50

#14

KanGuo

Joined: 31/05/2013

Posts: 2

Good news right answer!!!

You are very lucky!

Because I find a way to resolve this error

<asp:UpdatePanel>

..................

<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" Height="150" BasePath="~/Editor/ckeditor/"

                Skin="v2">

            </CKEditor:CKEditorControl>

..................

</asp:UpdatePanel>

        <div style="display: none">

            <CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" Height="150" BasePath="~/Editor/ckeditor/"

                Skin="v2">

            </CKEditor:CKEditorControl>

        </div>

You see?

We must define an other edit out of the UpdatePanel.

And we can't do like this:

<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" Height="150" BasePath="~/Editor/ckeditor/"

                Skin="v2" Visable="false">

            </CKEditor:CKEditorControl>

If you do this. Sorry the error still have.

I'm Chinese and my English is very poor. If you can't understand what I say you can send mail to me:gwf_25sz@163.com

Fri, 05/31/2013 - 05:50

#15

KanGuo

Joined: 31/05/2013

Posts: 2

Good news right answer!!!

You are very lucky!

Because I find a way to resolve this error

<asp:UpdatePanel>

..................

<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" Height="150" BasePath="~/Editor/ckeditor/"

                Skin="v2">

            </CKEditor:CKEditorControl>

..................

</asp:UpdatePanel>

        <div style="display: none">

            <CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" Height="150" BasePath="~/Editor/ckeditor/"

                Skin="v2">

            </CKEditor:CKEditorControl>

        </div>

You see?

We must define an other edit out of the UpdatePanel.

And we can't do like this:

<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" Height="150" BasePath="~/Editor/ckeditor/"

                Skin="v2" Visable="false">

            </CKEditor:CKEditorControl>

If you do this. Sorry the error still have.

I'm Chinese and my English is very poor. If you can't understand what I say you can send mail to me:gwf_25sz@163.com

Fri, 04/04/2014 - 22:41

(Reply to #15) #16

whiskey

Joined: 04/04/2014

Posts: 1

Hidden CKEditor Instance Work-Around

Thanks, Gavin, for the hint about including a hidden CKEditor instance somewhere on the page that loads on initial page-load. I was stumped to figure out a work-around, until I read your post. For others, here is an example with a hidden CKEditor that allows the View2 CKEditor to load properly. Without the first CKEditor, the error noted in this thread, will occur. The Example is based on a modification of the FirstUse.aspx file found in the samples:

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI.WebControls" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MultiView1.SetActiveView(View1);
}
}

protected void btnToView2_Click(object sender, EventArgs e)
{
MultiView1.SetActiveView(View2);
}

protected void btnToView1_Click(object sender, EventArgs e)
{
MultiView1.SetActiveView(View1);
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>First Use — CKEditor for ASP.NET Sample</title>
   <link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
   <h1 class="samples">
       CKEditor for ASP.NET Sample — Adding the CKEditor for ASP.NET Control to a Page
   </h1>
   <div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:UpdatePanel ID="AchievementUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="display: none;">
<CKEditor:CKEditorControl ID="CKEditorInitializer" runat="server" Height="200" BasePath="~/ckeditor">
       Exists solely to initialize CKEditor script recources for yet-to-be-shown view.
       </CKEditor:CKEditorControl>
</div>
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server" >
<h2>View One</h2>
<asp:Button ID="btnToView2" runat="server" Text="Switch"
onclick="btnToView2_Click" />
</asp:View>
<asp:View ID="View2" runat="server">
<h2>View Two</h2>
<asp:Button ID="btnToView1" runat="server" Text="Switch" onclick="btnToView1_Click" />
<CKEditor:CKEditorControl ID="CKEditor1" runat="server" Height="200" BasePath="~/ckeditor">
       Editor displayed in View2
       </CKEditor:CKEditorControl>
</asp:View>
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
   </div>
   <div id="footer">
       <hr />
       <p>
           CKEditor — The text editor for the Internet — <a class="samples" href="http://ckeditor.com/">
               http://ckeditor.com</a>
       </p>
       <p id="copy">
           Copyright © 2003–2011, <a class="samples" href="http://cksource.com/">CKSource</a>
           — Frederico Knabben. All rights reserved.
       </p>
   </div>
   </form>
</body>
</html>