尝试在我的网站中包含JQuery时出错

时间:2014-04-03 19:57:44

标签: jquery python html django

我正在尝试将JQuery添加到我的网站中,但是我收到的错误并不是真的有意义。

我的项目的基本目录结构如下所示:

list_app- Directory
list_site- Directory
templates- Directory:
     jquery-1.11.0.js
     list_edit.html
     list_index.html

     calendar- Directory:
          calendar_control.css
          calendar_control.js
     admin- Directory 

在我的网站list_edit.html的一个页面上,有一个文本字段,当它获得键盘焦点时应显示一个下拉日历。我从另一个展示其使用的网站上获取了日历的代码,所以我确信我遇到的问题是我的代码。当我到达'list_edit'页面,我在chrome javascript控制台中收到以下错误:

'未捕获的SyntaxError:意外的令牌<' :8000 /模板/ jquery的-1.11.0.js:1

但是,当我点击链接的源文件':8000 / templates / jquery-1.11.0.js:1'时,它会显示源文件' list_index.html&#39 ;。这很奇怪,因为我目前只在list_edit.html文件中引用了jquery / javascript。

这是list_edit.html:

<!DOCTYPE html>
<html>
<head>
    <script src="/templates/jquery-1.11.0.js"></script>
    <link href="/templates/calendar/calendar_control.css"
        rel="stylesheet" type="text/css"/>
    <script src="/templates/calendar/calendar_control.js"
        language="javascript"></script>

    <title> List Management </title>
</head>
<body>
    <!--Calendar Stuff-->
    <table style="width:300px">
        <tr>
            <td> list name </td>
            <td> expiration date </td>
        </tr>
        <tr>
            <form action="" method="post"> {% csrf_token %}
                <td> <input id="name" type="text" /> </td>
                <td> <input id="expire_date" onfocus="showCalendarControl(this);" type="text" /> </td>

                <input id="submit" type="submit" value="Save Changes" />
            </form>

            <!--TODO: Turn the below code into a javascript button-->
            <form action="/lists/list_index" method="get">
                <input id="cancel" type="submit" value="Cancel" />
            </form>
        </tr>
    </table>
    {% if invalid_edit %}
        <p><b>Invalid changes:<br> {{error_msg}} </b></p>
    {% endif %}
</body>
</html>

这是list_index.html:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

    <table style="width:300px">
        <tr>
            <td> Mailing List Name</td>
            <td> Mailing List Creation Date</td>
        </tr>


            <tr>
                <td>physics 212 mailing list</td>
                <td>April 1, 2014, 9:08 p.m.</td>
                <td>
                    <form action="/lists/list_edit" method="get">
                        <input name="submit" type="submit" value="Edit" />

                        <input name="list_id" type="hidden" value="1" />
                        <input name="admin_name" type="hidden" value="wasingej" />
                    </form>
                </td>
            </tr>

            <tr>
                <td>physics 314 mailing list</td>
                <td>April 1, 2014, 9:09 p.m.</td>
                <td>
                    <form action="/lists/list_edit" method="get">
                        <input name="submit" type="submit" value="Edit" />
                        <!--<input name="list_name" type="hidden" value="physics 314 mailing list" />-->
                        <input name="list_id" type="hidden" value="2" />
                        <input name="admin_name" type="hidden" value="wasingej" />
                    </form>
                </td>
            </tr>


    </table>


<form action="/logout/" method="post"> <input type='hidden' name='csrfmiddlewaretoken' value='sJEKhPgAidml50xzYgzEHvUe1iQufPlt' />
    <input name="logout" type="submit" value="logout" />
</form>

3 个答案:

答案 0 :(得分:2)

查看有关static files的文档。您必须在设置文件中为静态文件定义URL,然后才能在模板中使用它们。

答案 1 :(得分:1)

这看起来更像是服务器配置问题。考虑到以下假设,您的代码看起来是正确的:

  • 您的本地网络服务器(您无法浏览文件,例如file:///,必须是http://)正在您的网站托管您的网站。 IE浏览器。 localhost:8000 / templates / ...而不是localhost:8000 / MySite / templates ...
  • 您具有对JQuery文件的写入权限
  • 您还没有从其他地方复制/粘贴代码,导致其成为隐藏字符。
  • 我会尝试在浏览器中浏览您自己的JQuery文件,看看是否有效。您还可以在Chrome / Safari中使用检查器,效果很好。

    答案 2 :(得分:0)

    如果你只是让google host it for you ......

    ,那就变得非常简单了

    然后你只需添加:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    

    到你的html模板,你就可以了。