Order of Javascript includes in Orchard

Question

I'm trying to create a theme in Orchard and have added some script includes in my layout:

Script.Include("//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js").AtHead();
using (Script.Head()) {
    @:<script>window.jQuery || document.write('<script src="scripts/jquery-1.7.1.min.js"><\/script>')</script>
}

Script.Include("plugins.js").AtHead();
Script.Include("script.js").AtHead();

I want to load jQuery from Google CDN but have a local fallback if the CDN version can't be loaded. To achieve this I added the script block right after the jQuery script. However when looking at the generated page source, it looks like:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  
type="text/javascript"></script>
<script src="/OrchardLocal/Themes/Test/scripts/plugins.js" type="text/javascript">
</script>
<script src="/OrchardLocal/Themes/Test/scripts/script.js" type="text/javascript">  
</script>
<!--[if lt IE 9]>
<script src="/OrchardLocal/Core/Shapes/scripts/html5.js" type="text/javascript">    
</script>
<![endif]-->
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')
</script>

The problem is that my fallback is now after all other scripts, whereas I would like it to be right after the jQuery CDN script include.

Is there any way that I can control where Orchard renders inline script blocks?

Answer 1

It appears that currently there is no way to control the order of the scripts when you're mixing Script.Include() with Script.Head() or Script.Foot().

There is, however, a way you could use CDN with Orchard. But, unfortunately it doesn't work as it should. You should be able to specify Script.Require("jquery").AtHead().UseCdn() to handle what you're trying to do here. Those methods already exist, but they aren't working for 2 reasons:

1. jQuery module currently doesn't specify CDN URLs
2. The methods that rely on UseCdn() method to generate the script tags don't work as they should

There is already a reported issue on Orchard Codeplex for this problem. The Orchard team changed it's status to Active so hopefully, the bug will be resolved soon. I've voted on the issue and so can you to signal the Orchard team to resolve this bug faster than some other bugs.

In the meantime, you can do the same thing as I do - add Document.cshtml template to your theme (you can copy it from /Core/Shapes/Views/Document.cshtml), find this line: @Display(Model.Head) (this is the place where all your head scripts and styles go) and, finally, above that line you can add this code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="@Url.Content("~/Themes/[NAME-OF-YOUR-THEME]/Scripts/jquery-1.7.1.min.js")"><\/script>')</script>

And change [NAME-OF-YOUR-THEME] with the folder name of your theme.