Controlling the order of insertions into <head>

Topics: Customizing Orchard, Writing modules
Jun 3, 2011 at 6:42 AM

I'm trying to create a part whose default view brings in a few JavaScript libraries and then runs some script of its own.

Right now I have something to the likes of this:

@{
Script.Require("jQuery");
Script.Include("Library1");
Script.Include("Library2");
Style.Include("Style1");
}

@using(Script.Head()) {
<script type="text/javascript">
  $(document).ready(function(){
    // Code here
  });
</script>
<style type="text/css">
    /* Styles here */
</script>
}


1.  This doesn't work, because my script tag gets inserted into the result BEFORE jQuery.  Is there a way to get my script tag to appear later?

2.  I'm putting my inline styles here with the hope to override some styles in the stylesheet that is being brought in using Style.Include(), but again my style is inserted BEFORE the stylesheet, so the stylesheet wins.

3.  Also, there is no Style.Head().  It looks strange to use Script.Head() to do this, is there another recommended way?

In short, I'd like to be able to control the order that these items get put onto the resulting page so that the prerequisites at least appear before my code in the resulting page.

Jun 3, 2011 at 9:07 AM
Edited Jun 3, 2011 at 1:16 PM

Try requiring jQuery to be at head (before yours):

@{
    Script.Require("jQuery").AtHead();
    Script.Include("Library1");
    Script.Include("Library2");
}

But since you're already waiting for document.ready, why do you put your script at head? Putting it at foot could improve the loading time of the page, since the browser can display the page before downloading and parsing your script. To put your script at the bottom of the page, use the AtFoot() method:

@using (Script.Foot()) {
    <script type="text/javascript">
        // your script
    </script>
}
Jun 3, 2011 at 11:01 AM

Thank you.  I was not aware that it was permissable to place script elements outside of <head> and I was also not aware of the .AtHead() method.

A class reference for orchard would be nice...

Jun 3, 2011 at 11:10 AM
Edited Jun 3, 2011 at 11:10 AM

You're welcome. You can find this method and other similar ones in Orchard.UI.Resources.RequireSettings.