Javascript and jQuery on same HTML file

Question

I have build a web site and for one of my pages I have some jQuery elements [start button, progress bar]. I'm implementing a javascript timer into the page and when I place the javascript info into the header, the jQuery no longer works. How do I avoid this problem? Thanks

jQuery Works/Javascript Doesn't Work {% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">        </script>
<script type="text/javascript" src="{% static 'livestream/jquery-    timer/res/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
    <script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
<html>
    <head>
        <style>
            .progressInfo {
                margin-left: leftmargin;   
            }
        </style>


        <meta charset="utf-8" />
        <title>Main</title>
        <link rel="stylesheet"     href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />

jQuery Doesn't Work/Javascript Works {% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">    </script>

<html>
    <head>
        <style>
                .progressInfo {
                margin-left: leftmargin;   
            }
        </style>


        <meta charset="utf-8" />
        <title>Main</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript" src="{% static 'livestream/jquery-timer/res/jquery.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
        <script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
        <link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />

What is the output in the Chrome Web Inspector's Javascript Console? Any errors? — Aaron Cronin, Jul 30 '13 at 22:49
DOCTYPE needs to be at first line. IE will teach you that :-) — Frederik.L, Jul 30 '13 at 23:57

score 2 · Answer 1 · answered Jul 30 '13 at 23:49

First I'd get your basic <html> in order. I try to always use something like...

<!DOCTYPE html>
<html>
     <head>
        <meta>
        <title>
        <script></script>
        <link>
     </head>
     <body>
     </body>
</html>

Then, load jQuery and then any jQuery scripts (don't forget to use minifed versions). Make sure you are loading only one version of jQuery and if a script you are using does not comply with the version you are currently running then upgrade jQuery or the script (whichever is older.) As @Antti Happala mentioned, multiple instances of jQuery will surely cause issues.

The other thing I do while in development is use local versions of .js and .css files until I know everything is working properly then I transition to hosted versions, retest then go live.

So, I would try something like (from your first example)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Main</title>

        <script type="text/javascript" src="js/jquery-latest.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.js"></script>
        <script type="text/javascript" src="js/jquery.timer.js"></script>
        <script type="text/javascript" src="js/demo.js"></script>

        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="css/newCustomCSSFileForYourSpecificCSS.css" />
    </head>
    <body>
        <!-- Your good stuff here -->
    </body>
</html>

http://html5boilerplate.com/ is a good place to look for examples

All of the .js files would be downloaded into a local js folder and all of the .css files would be kept locally in a css folder (again, you can change to hosted version when going live.) Make sure you only reference any .js or .css file once and combine and minify when/where possible.

Finally, make sure your .js files all work off of the same version of jQuery. If that does not work start checking firebug/chrome dev tools, etc for errors.

score 0 · Answer 2 · answered Jul 30 '13 at 23:11

0

You are loading 2 jqueries on the same page, and possibly different versions, so surely things will go silly; also the script tags should be in head and certainly not before the <!DOCTYPE>

answered Jul 30 '13 at 23:11

Antti Haapala -- Слава Україні

129,958
22
279
321

The challenge is that the progress bar doesn't work unless both versions of jquery are called. Any idea why that would be – IdeoREX Jul 30 '13 at 23:22
no, you are loading 3 jqueries... but 1 with broken url... amazing – Antti Haapala -- Слава Україні Jul 30 '13 at 23:24
Which url is broken? It looks like I have larger problems than just the counter. I'm going to fix my code and then start from scratch on the counter. Thanks – IdeoREX Jul 30 '13 at 23:41
Just the fact of using more than 1 jQuery(s!) is a huge problem. Don't do that, you only need one: http://stackoverflow.com/questions/441412/is-there-a-link-to-the-latest-jquery-library-on-google-apis – Frederik.L Jul 31 '13 at 00:01

Javascript and jQuery on same HTML file

2 Answers2