Javascript from external file not loading

I have a problem with Javascript that keeps bugging me for quite a while now. I have an external file called search.js which is in the same folder as the .html file it's loaded into.

The piece of code I use in th HTML to load the javascript file is:

<script type="text/javascript" src="search.js"></script>

From all the websites I've read I can't find an issue here with the code.

Also, I know that the syntax in the javascript file has to be correct in order for it to work, so here is my Javascript code from search.js:

$(document).ready(function(){
    $('#searchForm').submit(function(){
        var lookfor = $("#billSearched").val();
        alert(lookfor);
        var a = $(this).attr('action');
        alert(a);
        a = a.replace("__search_term__",lookfor);
        alert(a);
        window.location.href = a;
        return false;
    });
});

I've runned this code in another project and it has worked just fine, all that I've changed was the names of the fields, i.e. billSearched.

If there are any other reasons for why Javascript doesn't load in my page please leave a message or a comment.

Thanks in advance!

EDIT

Full html code:

<html>
<head>
    <title>Bills</title>
    <script type="text/javascript" src="/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/search.js"></script>
    <link rel="stylesheet" href="style.css"> 
</head>
<body bgcolor="#0066CC" color="FFFFFF">
    <table>
        <tr>
            <td style="color:white"><b>Products</b></td>
            <td style="color:white">Price</td>
            <form method="POST" id="searchForm"  action="{% url ps.views.search searchTerm='__search_term__' %}">
                {% csrf_token %}
                <td><input type="text" id="billSearched"></td>
                <td><input type="submit" value="Search"></td>
            </form>
        </tr>
        {% for x in products %}
        <tr>
        <td style="color:white">{{ x.name }}</td>
        <td style="color:white">{{ x.price }}</td>
        </tr>
        {% endfor %}
    </tr>
</table>
</body>

From the tags and your template code, I gather that you are using Django. To understand your issue, you'll have to understand how Django views work relative to your browser, and what happens when your browser issues a request for a given url.

What happens on the `Django` side:

What happens when you request an url is that your base urls.py file will be searched for pattern matching your url. If a pattern is encountered, then the corresponding view will be called.
The viewwill carry out its logic, and will use a template to render its response into html.

What happens from your browser's point of view

The browser requested an url, and received a response, it is not aware of the fact that a view was called, and that it fetched a template somewhere.

What this means to you

The fact that your search.js file is located next to your template is totally irrelevant, as your browser never requested any file from this directory, it's the view that did, when it fetched its template.

Actually, your browser's request for search.js will be forwarded to Django by your webserver and will (most likely) result in a 404 error, unless search.js resolves to a view in your urls.py.

How you can use this to solve your issue

You'll need to serve your search.js file from a directory that can be accessed by the browser. Usually, this is done in three steps:

Configure your webserver so that it serves any path starting with /static/ on its own (somehow, this means not forwarding the request to Django).
In Apache, you'd use the following rule: Alias /static/ /YOUR/STATIC/DIRECTORY/
Configure Django's settings.py to use /YOUR/STATIC/DIR as STATIC_ROOT, and /static/ as STATIC_URL.
Put your search.js file in your /YOUR/STATIC/DIR/
Use src="/static/search.js to reference your file in your html template.

One last thing: if you're using the development server, you might need to ensure your STATIC_URL starts with the full path to your server, including the port. (Or you might have issues with browser security policies).

A few additions:

Your should be using template tags so that you don't have to write /static/ in your template.
You should be using manage.py collectstatic to autimatically put static files in your static directory.

Most importantly, you should investigate what Django's MVC (or MTV) model is about.

Paths prefixed with / points to the root - not the current folder. In this case you want to drop the / prefix.

Your HTML files at project/ps/templates/bill.html which links a JS script /search.js means it's looking for the files in the completely wrong location.

For instance, you can see how it resolves the path if you add a link to /search.js in your HTML.

For illustrative purposes, create an HTML file on your desktop:

<html>
<body>

<a href="/foobar.txt">Hello</a>
<a href="foobar.txt">World</a>

</body>
</html>

When you hover over the link you will see that Hello it resolves to file:///foobar.txt and World resolves to the path to your desktop - in my case file:///C:/Users/thm.ARC/Desktop/foobar.txt.

I had to make a mix of your answers in order to fix the problem but eventually it was fixed. I had to make the following modifications:

Add the '/static/' folder to STATIC_URL and STATICFILES_DIRS in the settings.py file

Import the .js files (search.js and the jQuery source) with the following commands, in this order:

<script type="text/javascript" src="/static/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/static/search.js"></script>

And make the according file structure, placing the "static" file in the project's root directory.

i.e. Psroot:
psApp
static
templates
and the rest of the files (settings.py, urls.py, manage.py, etc.)

来源：https://stackoverflow.com/questions/9736607/javascript-from-external-file-not-loading

标签

javascript