All geek questions in one place

Javascript order includes Orchard

I am trying to create a theme in Orchard and added that several script has been added to 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 download jQuery from the Google CDN, but have a local backup if the CDN version cannot be downloaded. For this, I added a script block right after the jQuery script. However, looking at the generated page source, it looks like this:

 <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 rollback is now after all the other scripts, whereas I would like it to be right after the jQuery CDN script is included.

Is there a way I can control where Orchard displays inline script blocks?

+6
source share
1 answer

It seems like there is currently no way to control the order of the scripts when you mix Script.Include() with Script.Head() or Script.Foot() .

There is, however, a way to use CDN with Orchard. But unfortunately, it does not work properly. You must specify Script.Require("jquery").AtHead().UseCdn() to handle what you are trying to do here. These methods already exist, but they do not work for two reasons:

  • JQuery module currently doesn't have CDN urls
  • Methods that rely on the UseCdn() method to generate script tags do not work as they should

An issue has already been reported for this problem in Orchard Codeplex . The Orchard team changed their status to Active , so I hope the bug is resolved soon. I voted for this problem, and you can tell the Orchard team to fix this error faster than some other errors.

At the same time, you can do the same as me - add the 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 main scripts and styles go) and finally above this 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] to the folder name of your theme.

+2
source

Source: https://habr.com/ru/post/915912/

More articles:


All Articles