mvc javascript multiple times

Question

if have a requirement in which certain fields uses htmleditor. so for each field that uses htmleditor, i have created a editor template which renders a htmleditor by using jquery and i use UIHint for that.

@model System.String

<script type="text/javascript" src="~/Scripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" language="javascript">
    tinyMCE.init({
        mode: "textareas",
        theme: "advanced",
        editor_selector: "htmlmarker",
        theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,         justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,    |,bullist,numlist,|,outdent,indent,     blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,    |,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3: "hr,removeformat,visualaid,|,sub,sup",

        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left"

    });

</script>
@Html.TextAreaFor(model => model, new {@class="htmlmarker" })

now evreything works fine but on execution when i view source i get that the jquery scripts are referenced and called multiple times for every field that uses UIHint . is there any mechanism to prevent duplication of javascript code ?

Answer 1

Don't put your Javascript in the editor template, that will execute for every item that uses that template .

Instead, put it in a separate JS file, have that JS file called on your layout, then on page load, it will be executed once and include all items you have assigned the class htmlmarker in your Editor Template.