SharePoint 2010 - Content Editor Web Part Duplicating Entries

Question

I'm using Javascript inside of a SharePoint 2010 Content Editor Web Part to insert a Silverlight object. I need to do it this way instead of use a Silverlight Web Part because Silverlight Web Parts are not currently enabled. This is done entirely using Javascript.

The problem occurs when I go later to edit the Javascript inside of the CEWP - I can see the orginal Javascript requesting generation of Silverlight object and I can, this is the strange part, the CEWP has all of the generated HTML of the Silverlight object right there appended to the scrept.

So now, when I save, I save the script to generate the Silverlight object AND the HTML that was previously generated effectively duplicating the Silverlight object. If I edit again then I will now have three Silverlight objects and so on.

You can see this in action for yourself with the following sample code:

1. Add a new Content Editor Web Part to a page in SharePoint 2010
2. Edit the source HTML

3. Add the following code:

   <script type="text/javascript">document.write("Hello<br/>");</script>

Save the web part and you're done. Now, just keep editing the CEWP. Every time you click "Edit Web Part", "Hello" will be appended to your script.

How can I use Javascript to insert DOM elements and not have the generated HTML appear in the CEWP?

Answer 1

It's not working because SharePoint 2010 doesn't want you copying and pasting scripts into the editor. Instead, you should be putting your scripts inside a txt file (yes, that's right a txt file) stored in SharePoint and then pointing the CEWP to use that file as the source.

First, create a file with all of your code (both Javascript and HTML - basically everything you would have normally pasted into the content editor.) Make sure to wrap your Javascript in the <script type="text/javascript"> tag and save the file with a .txt extension like "scripts.txt".

Next, add a CEWP to your page and select "Edit Web Part." In the content editor pane on the right, under "Content Link", add the URL to your txt file and click "Apply" and you're done.

Take a look at the following URL for a full description of this change in SharePoint 2010: http://sptwentyten.wordpress.com/2010/08/31/insert-javascript-into-a-content-editor-web-part-cewp/

Answer 2

Use jQuery - probably far safer than a document.write which can break javascript further down the page.

Or use the code in this link to put pure HTML in the CEWP instead of dabbling with JavaScript:

http://karinebosch.wordpress.com/silverlight-meets-sharepoint/walkthrough-2-hosting-silverlight-3-in-a-content-query-web-part/

Answer 3

Another option is to the HTML Form Web Part (in the Forms category). This can be used to connect to other web parts, but more simply it can used to edit JavaScript directly in the web part. It seems that the rules for Content Editor Web Parts do not apply to the HTML Form Web Parts so it allows more flexibility.

More information from Microsoft is here:

http://office.microsoft.com/en-us/sharepoint-server-help/use-the-html-form-web-part-to-filter-and-display-data-in-another-web-part-HA101791813.aspx#_Toc274731120