External JS/jQuery files are loading but not executing

Question

I am loading all of the below libraries and files, but for some reasons only the CSS is executing and none of the external js files. The scripts.js file holds all of my jQuery and it seems to be formatted properly. I'm not sure why the CSS would execute, but not the jQuery.

In chrome dev tools, everything below is loaded.

<head>
    <!DOCTYPE html>
    <meta charset=utf-8 />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/spectrum.css') }}">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='scripts/spectrum.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='scripts/scripts.js') }}"></script>
</head>

This is a portion of the scripts.js file:

$("span.output").draggable({
    stop: function(event, ui) {}
});

$('input[type=file]').change(
    function() {
        $('#submitbutton').click();
    });

$("#text_submit").submit(
    function(event) {
        $("#text1").html($("#1").val());
        $("#text2").html($("#2").val());
        $("#text3").html($("#3").val());
        $("#text4").html($("#4").val());
        $("#text5").html($("#5").val());
        $("#text6").html($("#6").val());
        $("#text7").html($("#7").val());
        $("#text8").html($("#8").val());
        $("#text9").html($("#9").val());
        $("#text10").html($("#10").val());
        $("#slider1").show();
        $("#slider2").show();
        $("#slider3").show();
        $("#slider4").show();
        $("#slider6").show();
        $("#slider7").show();
        $("#slider8").show();
        $("#slider9").show();

        event.preventDefault();
    });

Is the content of "{{" ... "}}" being evaluated? Is it possible your server / templating engine hasn't replaced the content there? — Michael Aaron Safyan
– Michael Aaron Safyan, Commented Feb 16, 2014 at 18:29
your doctype declaration is in the wrong place, should be before everything else, can you show the actual rendered output, if that is the rendered output, then as Michael says your templates are not being rendered correctly. — Patrick Evans
– Patrick Evans, Commented Feb 16, 2014 at 18:29
@MichaelAaronSafyan yes that is flask templating, it is working properly because everything loads in dev tools. — metersk
– metersk, Commented Feb 16, 2014 at 18:31
is your js code being run in a domready function? like jQuery(document).ready(Function(){}); — Patrick Evans
– Patrick Evans, Commented Feb 16, 2014 at 18:31
@PatrickEvans no it isn't. should i wrap all of my jquery in what you posted? — metersk
– metersk, Commented Feb 16, 2014 at 18:33

Pratheep · Accepted Answer · 2014-02-16 18:45:55Z

1

You need to put your code inside script.js in JQuery's Dom Ready function, like this;

$(document).ready(function(){
    // Your code here
});

For more info, http://api.jquery.com/ready/

answered Feb 16, 2014 at 18:45

Pratheep

1,0861 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MixCoded · Accepted Answer · 2014-02-16 18:33:10Z

Try the below, not declaring type="text/javascript" in your jquery loading way might also be an issue.

<head>
    <!DOCTYPE html>
    <meta charset=utf-8 />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/spectrum.css') }}">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript" src="scripts/spectrum.js"></script>
    <script type="text/javascript" src="scripts/scripts.js"></script>
</head>

Collectives™ on Stack Overflow

External JS/jQuery files are loading but not executing

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related