control order in which css and js is added from xslt

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib

Feb 08, 2014 @ 17:23

I have added some ekstra dashboard functionality to a document type using a macro container and the idea from Chriztian Steinmeier: http://24days.in/umbraco/2013/empty-tabs/

In addional to this I have some table data and use the footable plugin.

So from xslt I add the required css and javascript files like this:

<xsl:variable name="host" select="concat('http://',umbraco.library:RequestServerVariables('HTTP_HOST'))" /> 
        <xsl:variable name="fooJS">
            $(function(){ 
                $('#tbl-quotes').footable();

                $('#filter').keypress(function(event) {
                    if (event.keyCode == 13) {
                        event.preventDefault();
                    }
                });
            });
        </xsl:variable>

        <xsl:value-of select="umbraco.library:RegisterStyleSheetFile('footable.core', '/css/footable.core.min.css')"/>
        <xsl:value-of select="umbraco.library:RegisterStyleSheetFile('footable.standalone', '/css/footable.standalone.css')"/>

        <xsl:value-of select="umbraco.library:AddJquery()"/>
        <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('footable', concat($host, '/scripts/footable/footable.min.js?v=2-0-1'))"/>

        <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('footable.filter', concat($host, '/scripts/footable/footable.filter.min.js?v=2-0-1'))"/>
        <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('footable.sort', concat($host, '/scripts/footable/footable.sort.min.js?v=2-0-1'))"/>
        <!--<xsl:value-of select="umbraco.library:RegisterJavaScriptFile('footable.paginate', concat($host, '/scripts/footable/footable.paginate.min.js?v=2-0-1'))"/>-->
        <xsl:value-of select="umbraco.library:RegisterClientScriptBlock('footableScript', $fooJS, 'true')"/>

Which is added in this order:

However as soon as I include footable.paginate.min.js the scripts is added in a different order:

and that cause an javascript error as footable.filter.min.js needs to be the first of the javascript files to be included.. also I notice I had to use the absolute url for RegisterJavaScriptFile. If I use the relative path as for css the javascript files isn't add to the <head>.

Is there a way I can control the order in which the files is added? I find it strange that the ordering becomes different as footable.filter.min.js always is first in the xslt file.

I am using Umbraco v. 4.11.9 install..

/Bjarne

Copy Link

Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib

Feb 13, 2014 @ 20:05
0
In another Umbraco v. 4.11.10 install it doesn't seem to include the javascript with umbraco.library:RegisterJavaScriptFile .. not with relative or absolute path...

Even I tried only to include only one javascript file like:
```
<xsl:value-of select="umbraco.library:RegisterJavaScriptFile('footable', concat($host, '/scripts/footable/footable.min.js?v=2-0-1'))"/>
```
it didn't seem to include the script in the <head> ... I am not sure if it's a bug, if something has changed here from 4.11.9 to 4.11.10 .. I think it's a bit problematic if you can't control the ordering the files is added and if they not is added in the order you add them in e.g. xslt.. some scripts needs to be included before other.. here footable.min.js must be included before footable.filter.min.js, footable.sort.min.js and if your are using paging then also footable.paginate.min.js.

Because I couldn't find a solution on why they scripts not is added in the order as I add them in xslt, I added them as inline scripts in the html.. this way I at least can control the order the scripts is added and a avoid script errors..
```
<script type="text/javascript" src="/scripts/footable/footable.min.js?v=2-0-1"><xsl:text> </xsl:text></script>
<script type="text/javascript" src="/scripts/footable/footable.filter.min.js?v=2-0-1"><xsl:text> </xsl:text></script>
<script type="text/javascript" src="/scripts/footable/footable.sort.min.js?v=2-0-1"><xsl:text> </xsl:text></script>
```
Copy Link
is working on a reply...

Please Sign in or register to post replies