Question

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.

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 tag:

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

which looks fine. That’s where the jQuery library is and I can download it from that location without probs. 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…

Edit: Added the jquery tag and tried the suggestion answer about Script.Foot() which seems to work:

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

Answer 1

Well, that script of yours needs to appear after the inclusion of jQuery, otherwise $ is meaningless. You can add your script by surrouding it with @using(Script.Foot) { …}:

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