CODEWITHSUNDEEP
jquerypythonhtmldjango
user3361761
user3361761

Reputation: 259

Error trying to include JQuery in my website

I am trying to add JQuery to my website however, I am getting errors that don't really make sense.

The base directory structure for my project looks like this:

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

On one page of my site list_edit.html, there is a text field which should present a drop-down calendar when it gains keyboard focus. I have taken the code for the calendar from another website which showcased its use so I am sure that the issue I am having is with my code. When I reach the 'list_edit' page, I get the following errors in my chrome javascript console:

'Uncaught SyntaxError: Unexpected token <' :8000/templates/jquery-1.11.0.js:1

However, when I click on the linked source file ':8000/templates/jquery-1.11.0.js:1', it shows me the source file 'list_index.html'. This is strange because I only currently have references to jquery/javascript in my list_edit.html file.

Here is 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>

Here is 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>

Upvotes: 0

Views: 77

Answers (3)

mgilson
mgilson

Reputation: 309899

It becomes pretty easy if you just let google host it for you ...

Then you just add:

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

to your html template and you're all set.

Upvotes: 0

acrawly
acrawly

Reputation: 453

This looks more like a server configuration issue. Your code looks correct considering the following assumptions:

  • Your local web server (you can't be browsing the file like file:///, must be http://) is hosting your site at the root. Ie. localhost:8000/templates/... and not localhost:8000/MySite/templates...
  • You have write access to the JQuery file
  • You haven't copied/pasted your code from else where causing their to be hidden characters.

    • I would try to browse to the JQuery file your self in the browser and see if that works. You can also use the inspector within Chrome/Safari and it works great.

    Upvotes: 1

    hanleyhansen
    hanleyhansen

    Reputation: 6452

    Take a look at the documentation regarding static files. You have to define a URL for your static files in your settings file and then you can make use of them in your templates.

    Upvotes: 2

    Related Questions