Using jQuery?

Topics: Customizing Orchard, Writing themes
Feb 25, 2011 at 2: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 2: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 2: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 2: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 3:15 PM
Edited Feb 25, 2011 at 3:18 PM

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

  Script.Require("jQuery");

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');
  });

  </script>

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 6:41 PM

I got a tip to use Script.Foot() which will render the javascript after the jQuery refence and it works, see http://stackoverflow.com/questions/5119044/using-jquery-from-orchard-module-page

Coordinator
Feb 28, 2011 at 6:45 PM

Here's the sample code in question:

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