[Solved] IFrame reloads all javascript file after ajax call

[Helene Lach]

First off, let me thank you for the great job you are doing with the MVC extensions, they are wonderful. I love the improvements you added in Q3.

I noticed this weird behavior with the editor recently. I have a page with a form and multiple editors (>5). The form itself is within a partial page, and the partial page loads the several custom javascript files it requires via the telerik script registrar. Everything works good until I submit the form via Ajax and the partial page is reloaded. Then the browser starts reloading all the custom javascript files, as many times as I have editors on the page. So, if I have 6 editors on the page, and 4 javascript files, I end up with 24 calls to the server to reload all the files!

I noticed the following code in the ajax response, which seems to be the culprit:

if(!jQuery.telerik){
    jQuery.ajax({
    url:"/Scripts/2011.3.1115/telerik.common.min.js",
    dataType:"script",
    cache:false,
    success:function(){
    jQuery.telerik.load(["/Scripts/2011.3.1115/jquery-1.6.4.min.js","/Scripts/jquery.dirtyform.js","/Scripts/jquery.blockUI.js","/Scripts/Custom/jquery.waitForValidResult.js","/Scripts/Custom/Common.js","/Scripts/Custom/FormDirty.js","/Scripts/Custom/Form.js","/Scripts/Custom/HtmlEditor.js","/Scripts/2011.3.1115/telerik.common.min.js","/Scripts/2011.3.1115/telerik.list.min.js","/Scripts/2011.3.1115/telerik.combobox.min.js","/Scripts/2011.3.1115/telerik.draganddrop.min.js","/Scripts/2011.3.1115/telerik.window.min.js","/Scripts/2011.3.1115/telerik.editor.min.js"],function(){ jQuery('#GeneralDataSection_DefaultLocalizedData_ShortDescription').tEditor({style:[{"Text":"No Style","Value":""},{"Text":"Category - Disclaimer","Value":"disclaimer-category"}], fileBrowser:{}, stylesheets:["/Content/puritan.css"], localization:{"bold":"Bold","createLink":"Insert hyperlink","deleteFile":"Are you sure you want to delete \"{0}\"?","directoryNotFound":"A directory with this name was not found.","emptyFolder":"Empty Folder","fontName":"Select font family","fontNameInherit":"(inherited font)","fontSize":"Select font size","fontSizeInherit":"(inherited size)","formatBlock":"Select block type","indent":"Indent","insertHtml":"Insert HTML","insertImage":"Insert image","insertOrderedList":"Insert ordered list","insertUnorderedList":"Insert unordered list","invalidFileType":"The selected file \\\"{0}\\\" is not valid. Supported file types are {1}.","italic":"Italic","justifyCenter":"Center text","justifyFull":"Justify","justifyLeft":"Align text left","justifyRight":"Align text right","orderBy":"Arrange by:","orderByName":"Name","orderBySize":"Size","outdent":"Outdent","overwriteFile":"\u0027A file with name \"{0}\" already exists in the current directory. Do you want to overwrite it?","strikethrough":"Strikethrough","style":"Styles","underline":"Underline","unlink":"Remove hyperlink","uploadFile":"Upload"}}); });
    }});}else{
    jQuery.telerik.load(["/Scripts/2011.3.1115/jquery-1.6.4.min.js","/Scripts/jquery.dirtyform.js","/Scripts/jquery.blockUI.js","/Scripts/Custom/jquery.waitForValidResult.js","/Scripts/Custom/Common.js","/Scripts/Custom/FormDirty.js","/Scripts/Custom/Form.js","/Scripts/Custom/HtmlEditor.js","/Scripts/2011.3.1115/telerik.common.min.js","/Scripts/2011.3.1115/telerik.list.min.js","/Scripts/2011.3.1115/telerik.combobox.min.js","/Scripts/2011.3.1115/telerik.draganddrop.min.js","/Scripts/2011.3.1115/telerik.window.min.js","/Scripts/2011.3.1115/telerik.editor.min.js"],function(){ jQuery('#GeneralDataSection_DefaultLocalizedData_ShortDescription').tEditor({style:[{"Text":"No Style","Value":""},{"Text":"Category - Disclaimer","Value":"disclaimer-category"}], fileBrowser:{}, stylesheets:["/Content/puritan.css"], localization:{"bold":"Bold","createLink":"Insert hyperlink","deleteFile":"Are you sure you want to delete \"{0}\"?","directoryNotFound":"A directory with this name was not found.","emptyFolder":"Empty Folder","fontName":"Select font family","fontNameInherit":"(inherited font)","fontSize":"Select font size","fontSizeInherit":"(inherited size)","formatBlock":"Select block type","indent":"Indent","insertHtml":"Insert HTML","insertImage":"Insert image","insertOrderedList":"Insert ordered list","insertUnorderedList":"Insert unordered list","invalidFileType":"The selected file \\\"{0}\\\" is not valid. Supported file types are {1}.","italic":"Italic","justifyCenter":"Center text","justifyFull":"Justify","justifyLeft":"Align text left","justifyRight":"Align text right","orderBy":"Arrange by:","orderByName":"Name","orderBySize":"Size","outdent":"Outdent","overwriteFile":"\u0027A file with name \"{0}\" already exists in the current directory. Do you want to overwrite it?","strikethrough":"Strikethrough","style":"Styles","underline":"Underline","unlink":"Remove hyperlink","uploadFile":"Upload"}}); });
    }

Note that the only files that are loaded seem to be the non-telerik ones. I am guessing the js files might be destined to be loaded within the iframe, but I don't actually need them in there. Is there a way I can disable the loading of these files?

I tried using .ScriptFileNames("") and .ScriptFilesPath("") in the editor builder, to no avail.

Any help or hint would be appreciated.

[Petur Subev]

Hi Helene Lach,

This JavaScript is required to properly initialize the editor if it is loaded via Ajax. In order to assist you I would like to ask you for a sample project including your current logic and setup.

Thank you for the assistance and understanding.

Kind regards,
Petur Subev
the Telerik team

[Helene Lach]

Hi Petur,

Thank you for your quick answer.

I understand some javascript files, such as jquery or telerik files, might be needed by the editor. But why would it need my custom javascript?

Also, it appears the javascript files are reloaded for all editors on the page, not only the editor(s) reloaded by ajax.

I will try to get a sample project together. Thanks!

[Helene Lach]

My apologies, it does only trigger the file uploads for the editors that are loaded via ajax, not the others on the page.

 
Please find attached a sample project which uses Telerik extensions version Q3 2011 and exhibits the behavior mentioned (custom js files are reloaded for each editor after ajax call).

Note that a similar project using Q1 2011 works fine - no extra files get loaded when editors are loaded via ajax.

I took a peek at the Telerik code, and it seems to look at any files defined in the script registrar to add them to the initialization script. I guess I could avoid using the telerik script registrar for my custom files, but I have gotten used to relying on it when I have multiple partial pages to avoid multiple loads of the same file. It really works great. Would there be a way in the script registrar to mark the files as custom maybe? Would it help if I used a group other than the default group?

Thanks!

[Atanas Korchev]

Hello Helene Lach,

 Indeed the Editor will collect all files appearing in the ScriptRegistrar. If you don't need that you can move the ScriptRegistrar below the editors. Find attached the updated project.

Regards,
Atanas Korchev
the Telerik team

[Helene Lach]

Thanks Atanas. This does work. However, in my application I use the script registrar to add js scripts as needed in each partial page or template. So for example I have editor templates which require their own javascript files, and which may be displayed before the editors, in which case the js filess get included in the load.

This gave me an idea, though. I thought clearing the scripts in the script registrar right before the editor, then adding them again right after, might solve my issue. But I can't manage to make it work. Here is what I have:

Before the editor:

ScriptRegistrar scriptRegistrar = Html.Telerik().ScriptRegistrar();
var scripts = scriptRegistrar.DefaultGroup.Items.ToList();
scriptRegistrar.DefaultGroup.Items.Clear();
scriptRegistrar.Scripts.Clear();

After the editor:

foreach(var script in scripts)
{
    Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
        .Add(script.Source)
    );
}

But this last piece doesn't work. The DefaultGroup property gets properly regenerated, but the Scripts property remains empty so custom scripts don't get loaded at all. Is there a way to do what I am trying to accomplish?

Thanks!

[Atanas Korchev]

Hello Helene Lach,

 I don't understand the following "editor templates which require their own javascript files, and which may be displayed before the editors, in which case the js filess get included in the load". Could you please clarify?
You can modify the sample project to demonstrate what you need.

All the best,
Atanas Korchev
the Telerik team

[Helene Lach]

Hi Atanas,

I am talking about standard MVC editor/display templates (too many meanings of the word "editor"!). What I mean is, the form itself is being built using editor/display templates, instead of directly. So the script registrar is being added on to within each of these templates instead of in the form, and the sum total of the scripts used on the page actually depends on the data and the templates used to display it. It works great and is a great advantage of the script registrar, which prevents the javascript files from being loaded more than once, even if the templates are invoked many times. Well, until the editor comes into play.

I attached the modified project (imagine that there is model there! I didn't go that far in the sample). In the sample the first editor reloads two of the javascript files (the ones required by controls prior to it on the page), the second editor reloads all three files (the previous two plus the one required by the editor).

[Atanas Korchev]

Hello Helene Lach,

 Telerik View Components check when they are displayed with ajax and emit all required JS files. This is required to ensure the proper operation of the controls when they are loaded through ajax. In the past the user had to manually register all required files which was troublesome. The current solution maintains a list of all loaded telerik files so those are not loaded twice. However 3rd party files (as in your case) are not tracked hence they are loaded every time. 

As a workaround I can suggest to register the JS files only initially:

@(Html.Telerik().Editor().Name(ViewData.TemplateInfo.GetFullHtmlFieldName("")).HtmlAttributes(new { style = "height:100px" }))
@{
    if (!IsAjax)
    {
        Html.Telerik().ScriptRegistrar().DefaultGroup(g => g
            .Add("JScript1.js")
            );
    }
}

This way your files won't be included twice.

Regards,
Atanas Korchev
the Telerik team