从Orchard模块页面使用jQuery [英] Using jQuery from Orchard module page

问题描述

我正在尝试使用搜索表单和按钮修改 Orchard.Search 部分，以使其外观和行为符合我的要求.为此，我需要使用一些jQuery功能.

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.

我将其添加到 Search.SearchForm.cshtml 文件的标题中:

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

Script.Require("jQuery");

从页面的输出中可以看到，在html的底部，在结束标记之前，添加了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>

看起来不错.那就是jQuery库的地方，我可以从那个位置下载它而没有问题.我还在页面中添加了一个小的测试脚本，只是为了查看jQuery是否正常工作:

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>

但是它从未被触发过，并且我遇到了这个脚本错误:Uncaught ReferenceError: $未定义

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...

:添加了jquery标记并尝试了有关Script.Foot()的建议答案，该方法似乎可行:

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>
}

推荐答案

好吧，您的脚本需要在包含jQuery之后显示，否则$是没有意义的.您可以通过使用@using(Script.Foot){...}替换脚本来添加脚本:

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>
}

这篇关于从Orchard模块页面使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！