Using jQuery?

Topics: Customizing Orchard, Writing themes
Feb 25, 2011 at 1:07 PM

I'm trying to modify the Orchard.Search part with the search form and button to look and behave as I want. For this I need to use some jQuery features, but how do I "enable" jQuery for my site? I'm very, very new to Orchard so I don't know my way around that much yet...

Thanks for any help!

Feb 25, 2011 at 1:14 PM

There is a feature that should already been enabled, when you installed Orchard.  I found to change the jquery version and add jquery ui.  You must change the module named "Orchard.jQuery".

Feb 25, 2011 at 1:17 PM

Thanks for trying to help! But sorry, I don't understand what you mean... There is no module called Orchard.jQuery or just jQuery the modules section of the dashboard. What do you mean with change?

Feb 25, 2011 at 1:24 PM

I can see jQuery as a module in the configuraton section, but what do I have to do to make sure it's loaded? I need on every page as I've put the search box in the header section.

Feb 25, 2011 at 2:15 PM
Edited Feb 25, 2011 at 2:18 PM

I added this to the header of the Search.SearchForm.cshtml file:


and I can see from the output of the page that jquery is added, at the bottom of the html, just before the ending </html> tag:

  <script src="/Orchard.Web/Modules/Orchard.jQuery/scripts/jquery-1.4.2.js" type="text/javascript"></script>

which looks fine. I've also added a small test-script in the page just to see if jQuery works properly:

  <script language="javascript" type ="text/javascript">

  $(document).ready(function () {
    alert('page loaded');


But it's never fired and I get this script-error: Uncaught ReferenceError: $ is not defined

I'm getting tired of this, too much hassle but I guess I'm doing it all wrong...


Feb 28, 2011 at 5:41 PM

I got a tip to use Script.Foot() which will render the javascript after the jQuery refence and it works, see

Feb 28, 2011 at 5:45 PM

Here's the sample code in question:

@using(Script.Foot()) {
    <script type ="text/javascript">
        $(document).ready(function () {
            alert('page loaded');