How To Include External Javascript Frameworks and Libraries

I would like to include references to external libraries such as DataTables and XEditable so that the site, templates, pages and custom MVC widgets can use them.

I have tried to include them as references from the Dashboard/Admin/Settings/Pages/​Script Manager/Script References section, but I'm confused as what exactly the settings should be, for instance- "Assembly".  No combination I seemed to use appeared to include the libraries when I view the sources in a DevConsole  though I can intentify the other Script and Web references from the list (like jquery and so forth).

 I tried adding the file reference via script tags at the bottom of a custom MCV widget, it seemed to pick them up, but I had errors like "cannot find default of undefined"  being thrown because the object doesn't exist.  I guess I don't understand the lifecycle well enough.

I tried creating bundles like we have in our main app.  I added a global.ascx file and added the code that I found on this site to enable "bundling" and then added a ASP_Start folder and  BundleConfig.cs file.  These seem to run fine (well, no errors anyway), but when I put a @Scripts.Render("~/bundles/datatables") tag on the custom widget view,  it errors with no message (even in debug) the Razor page will not run and I get "An error occured running the controller, check error logs" (what error logs??)  in the pace of the custom MVC widget...  oddly, the controller runs fine- its the @Script.Render tag on the Razor page that blows it up.   I have the proper namespace imported for that (System.Web.Optimization) so I know that the error is not related to a missing ​reference.... again, there is no error that I can find, it just doesn't work!

 So my question is  What Is the Best/Proper way to include external libraries so the ENTIRE site, including custom MVC widgets, can use them?

 Thank you for your assistance!

Kevin Howell

I see a problem with your syntax.  The "~" symbol only works with server controls. 

Either one of the following should work.  But you need to do it for all your script and css libraries, not just the one I pointed out.

1. Remove the "~" symbol. This is probably your best bet.

2.  Use Page.ResolveUrl . This would be my second preference.

3. Add runat="server". Don't like this but it should work also.

Thank you for your reply,  but the style sheet reference (seen in custom_widget_js_include)  actually works with the tilde,  it's the script reference that's not working, and it loads the library but the library fails during the load because the object isn't instantiated.   I read that there were situations with LoadJS  (that loads from the sitefinity libraries) that can cause problems with the timing of scripts.  Any ideas about that?

Your probably gonna need Telerik to solve this one. ​You could try registering the javascript libraries in codebehind during the page_load event. All objects should be initialized during page_load so maybe that would solve the problem.

http://forums.asp.net/t/1623215.aspx?how+to+add+java+script+file+in+code+behind+ 

Another less likely solution is to register your javacript libraries usinge RadScriptManager. This could possible alter the timing of when the javascript files are loaded allowing the objects to instantiate themslves. Stranger things have been known to happen. 

Hello Kevin,

What ch has said in his first post is actually correct. Can you confirm that the stylesheet is loaded correctly with some glaring change (change background color for example) on a new stylesheet. Also you can take a look at the documentation article about adding resources to Sitefinity.

Regards,
Velizar Bishurov
Telerik

Thank you for the information both of you have provided.  

One thing that is confusing me about your replies is that it appears that you are talking about .ASPX WebForms and I'm talking about .CSHTML MVC views.   The syntax you provided to register a library is for WebForms,   what is the MVC equivalent- or is there one?

I discovered that the DataTables library and stylesheet were in fact being picked up,  but an error with the built-in RequireJS library was preventing the initialization of the added library.   I further discovered this error was present ANYTIME there was a logged in user viewing the page, regardless of if I'd included the DataTables library or not.

Going to the default template (ResourcePackages/Bootstrap/MVC/Layouts/default.cshtml) and commenting out the line:  @Html.Script(Url.EmbeddedResource("Telerik.Sitefinity.Resources.Reference", "Telerik.Sitefinity.Resources.Scripts.RequireJS.require.min.js"), "top")    clears the error and if I'd included the libraries-  allows the DataTable library to run as expected.

 I discovered that I can include and use the DataTables library by adding:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<script type="text/javascript">
    $(document).ready(function ()
        //alert($.fn.jquery);
        $("#dtTrips").DataTable();
    );
</script> 

 To the bottom of the widget's Default.Cshtml.

OR by adding :

@Html.Script("//cdn.datatables.net/1.10.7/js/jquery.dataTables.js")
@Html.StyleSheet("//cdn.datatables.net/1.10.7/css/jquery.dataTables.css")

to the template's default and get the library to "include" and be available to a $(document).ready script block on the widget's default.... but ONLY IF THE REQUIREJS line is commented out as described previously.

 I have attached the error log with the RequireJS error,  there is a link to the RequireJS help pages at the bottom, but I'm afraid it made little sense not knowing the context.  What is RequireJS used for?  Why does it only error if there is a logged in user? What does the error mean?  What is the impact of removing it?

 Thank you again!

Kevin Howell

Hello Kevin,

I am glad that you managed to resolve your issues.

On your question RequireJS is loaded whenever you have inline-editing for pages enabled. If you don't plan on using that you can disable it by going to Administration--> Settings --> Advanced --> Pages and than scrolling down and setting the Enable in-line editing option to False.

Further information can be found in our Sitefinity documentation: http://docs.sitefinity.com/inline-editing

Another option is to look for a variation of your library that is compatible with RequireJS.

Regards,
Velizar Bishurov
Telerik

Thank you, turning off the Inline Editing did the trick.  The DataTables libraries load and function on the custom widgets. 

Kevin Howell

Did anyone ever find a solution without turning inline editing off? Such as, loading RequireJS at the end of the body tag?