SharePoint 2010 - Content Editor Duplicating Enteries

Question

I'm using jQuery inside of a SharePoint 2010 to create an image gallery. The gallery works perfectly and there are no problems. The gallery is entirely generated using jQuery and all HTML objects are inserted dynamically into the DOM (ie: there is ZERO HTML contained in the CEWP - Javascript only.)

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

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

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

Answer 1

My take is that you are doing this in a wiki page. In edit mode, the script keeps running and adds the HTML to the page. Then the HTML is saved with your other changes when you exit the edit mode.

Your options:

• prevent the script from running in edit mode (easier said than done)
• insert your gallery outside a wiki zone. This way SharePoint won't save it when it saves the changes in the wiki zone.
• use a Web Part page instead of a wiki page

Anyway a good practice is to store your script outside the CEWP. See these articles for details: http://blog.pathtosharepoint.com/2009/02/15/a-content-editor-web-part-for-every-home/ http://blog.pathtosharepoint.com/2010/10/27/about-scripts-web-parts-and-urban-myths/

Answer 2

I discovered that problem when I was working with the Twitter widget which also inserts code through jQuery. The problem is that the Content Editor web part doesnt clear all its code when you run the page again. It saves the inserted code the moment you leave edit mode.

You can do a $('div#YouInjectedCode').empty(); and run that code everytime onload that means you have to add the function

_spBodyOnLoadFunctionNames.push('YourClearFunction');

function YourClearFunction(){
 $('div#YouInjectedCode').empty();
}

that will clear the div or content area everytime the page loads. The solution I used in my case was to include the actuall code into the page itself since a page clear all Dom inserted elements on load.

Answer 3

We recently had the same issue. The work around for us was to rather than put the web part in a web part zone we added the CEWP right into the layout itself. We found that the problem surfaced when we users would go the edit the page. We wanted to avoid making this web part editable.

In the end I believe we used a DVWP for our needs so editing through the UI wasn't an issue in the end.
F

For your needs you might need add the web part right to the layout itself.

Answer 4

Have a look at another approach listed at HERE

Thanks,

Ashish Chotalia

Answer 5

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/