Using jQuery and jQuery UI in Module View(s) Question

Topics: Writing modules
Mar 17, 2011 at 9:05 PM
Edited Mar 17, 2011 at 9:05 PM

When I want to use jQuery and jQuery UI in my own developed module should I add the links in the View(s) of my module or is there another way to add these libraries (since Orchard itself also depends on jQuery and jQuery UI)?

Thanks.

Coordinator
Mar 18, 2011 at 8:35 PM

@Script.Require("jQuery")

@Script.Require("jQueryUI")

should do the trick.

Mar 27, 2011 at 7:43 PM

Adding
@Script.Require("jQuery")
@Script.Require("jQueryUI")

gives error message The Name "Script" Does not exist in the current context.

Mar 27, 2011 at 8:48 PM

Is that just the error message showing in Visual Studio or when you actually run the website? VS intellisense gets confused by the default setup of Web.config files in Orchard.

Mar 27, 2011 at 9:25 PM
Edited Mar 28, 2011 at 5:19 PM

@Script.Require("jQuery") -> Is found
@Script.Require("jQueryUI") -> isn't found gives an error; should I add this libary to my modules script directory or is is somewhere already available?

Apr 7, 2011 at 11:30 PM

I think it's suppose to be

Script.Require("jQueryUI_Widget")

But there might still be some files missing because when I try to accordion:

 $("#projects").accordion({});

I get this error

$("#projects").accordion is not a function

I think I probably have to include each of jQuery effects



Coordinator
Apr 7, 2011 at 11:40 PM

All jQuery script are in the jQuery module as of Orchard 1.1. They also define the dependencies, so that you can imclude only what is needed.

Take a look at Orchard.jQuery.ResourceManifest.cs for more details.

Apr 7, 2011 at 11:45 PM

Good to hear they'll be in the 1.1 release.  For the meantime, I just add this to my layout file.

 Script.Include("http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js").AtHead();

 Script.Include("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js").AtHead();

Less than ideal, but it works.

Apr 8, 2011 at 2:28 AM

Ok, I got one better.  I add this to Orchard.jQuery\ResourceManifest.cs

manifest.DefineScript("Google_jQuery").SetUrl("//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js", "//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js").SetVersion("1.5.2");
manifest.DefineScript("Google_jQueryUI").SetUrl("//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js", "//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.js")
	.SetVersion("1.8.11").SetDependencies("Google_jQuery");
Then I recompiled Orchard.jQuery.csproj
In Themes\TheThemeMachine\Views\Layout.cshtml I added:
Script.Require("Google_jQueryUI").AtHead();
and voila...  In my page <head) I get:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script

>

<

script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script

>

and everything works.  (on my machine)
Apr 8, 2011 at 2:32 AM

Aren't you missing http: from all those urls? ;)

Coordinator
Apr 8, 2011 at 5:43 AM

Actually, it's a little known feature of HTTP that you can use a protocolless URL such as //myserver.com to instruct the browser to use http or https depending on the context. Very handy.

Apr 8, 2011 at 1:43 PM

Wow ... I didn't actually know that ... amazing when you learn something new isn't it? :)

May 24, 2011 at 11:03 PM
Edited May 24, 2011 at 11:04 PM

Ah. I see you used the name "Google_jQuery" with an underscore instead of a period. Is that because "Google.jQuery" would not work? I've been wrestling with a similar problem and I can't get dotted names to work for manifest.DefineStyle. Am I missing something?
  


May 25, 2011 at 1:29 PM

This is only a guess, but I think that a manifest name containing dots looks like a filename, so the convention has been chosen to use underscores when defining resource Ids.

Jul 14, 2011 at 7:43 PM

@danieleli, thanks buddy! Placing this in the 'Layout.cshtml' worked for me.

Script.Include("http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js").AtHead();
Script.Include("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js").AtHead();

Jul 14, 2011 at 8:26 PM

BTW, so did this in v1.2.41

Script.Require("jQuery").AtHead();
Script.Require("jQueryUI_Widget").AtHead();

Aug 18, 2011 at 9:20 AM

Do Anybody know how can I switch to use min versions of jQery scripts in a productions site? I use the core jQuery plugin with Layout.cshml Script.Require.

Aug 18, 2011 at 9:24 AM

Ok, so the switch is auto, when You disable the debug mode in Settings/General, the min versions will be used. :)

Coordinator
Aug 18, 2011 at 6:47 PM

Yes, feature. And in the Dashboard settings you can configure this behavior.

May 6, 2013 at 12:16 PM
Edited May 6, 2013 at 12:17 PM
i have serious problem and very weird i have configured custom java script under my themes/themsname/scripts folder and it is working fine when i type my html in layout.cshtml and when i copy the same html tags to page content it is not working.

can any one help me please.


@{
/* Global includes for the theme
***************************************************************/
SetMeta("X-UA-Compatible", "IE=edge,chrome=1");
Style.Include("http://fonts.googleapis.com/css?family=Lobster&subset=latin").AtHead();
Style.Include("sbgsite.css");

Style.Include("jquery-ui-1.8.14.custom.css");
Style.Include("style.css");

Script.Require("jQuery").AtHead();

//Script.Include("HHH.js");

//if (Request.Path == "/")
// {
Script.Include("Bodyslider.js").AtHead();
Script.Include("albilad.js").AtHead();
Script.Include("jquery.min(1).js").AtHead();
Script.Include("jquery.SPServices.min.js").AtHead();
Script.Include("jquery-ui-1.8.14.custom.min.js").AtHead();
Script.Include("jquery.jcarousel.min.js").AtHead();
}
May 6, 2013 at 5:19 PM
I'm not sure I understand but the only thing off the top of my head is to make sure that the scripts folder has a web.config file in it or Orchard won't serve it up using the Script.Include()