Why does my jQuery work inline but not externally?

user_6905822 0
Viewed 93

I've been trying to learn how to implement AJAX and so far I've been tinkering with this jQuery example. The code is located at static/js/form.js

(function ($, window, document) {
  /* globals window, jQuery, document, console */

  // enable this return statement to disable Ajax submission
  // return;

  $(document).ready(function () {
    var myForm = $('#myForm');


    myForm.on('submit', function (e) {
      e.preventDefault();
      var data = myForm.serialize();

      $.post('/my-ajax-endpoint', data, function (result) {
        if (result.success) {
          alert(result.message);
        } else {
          alert('Error: ' + result.message);
        }
        console.log(result);
      });
    })
  });
}(jQuery, window, document))

My html works when I have the above inline like this:

<html lang="en">
  <head>
    <title>Flask-WTF + Ajax Example </title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
    {% block content %}{% endblock %}
    <script type="text/javascript">
      (function ($, window, document) {
        /* globals window, jQuery, document, console */

        // enable this return statement to disable Ajax submission
        // return;

        $(document).ready(function () {
          var myForm = $('#myForm');


          myForm.on('submit', function (e) {
            e.preventDefault();
            var data = myForm.serialize();

            $.post('/my-ajax-endpoint', data, function (result) {
              if (result.success) {
                alert(result.message);
              } else {
                alert('Error: ' + result.message);
              }
              console.log(result);
            });
          })
        });
      }(jQuery, window, document))

    </script>
  </body>
</html>

But when I try to reference it as an external file like this:

  <head>
    <title>Flask-WTF + Ajax Example </title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type=text/javascript src="{{url_for('static', filename='js/form.js') }}"></script>
  </head>

It doesn't seem to do anything. I've also tried to put it just before </body> tag and still no go.

I don't have any working knowledge of JavaScript or jQuery, so if it's something simple then I apologize in advance. I am learning Flask and I wanted to try submitting form data without refreshing and it led me to down this rabbit hole.

EDIT: form.js shows up in console under sources but it's completely blank?

flask html jquery javascript
1 Answers

I'm the author of the Flask Ajax Example project that you're working with. I've added a new branch that moves the JS into a separate file that's now inside of a static directory: https://github.com/YellowSharkMT/flask-ajax-example/tree/example-with-static-js-file

I can't say for certain what the issue may have been - the url_for function that you were using in your template above should have done the trick. In my update, I simply added this line to the home.html template:

<script src="{{ url_for('static', filename='js/form.js') }}"></script>

And that's obviously nearly the same thing that you had above. One thing I'll add about Flask is that my example did NOT have debug mode enabled, and I've now enabled that in a separate commit. It makes development a bit easier by adding features like auto-reloading (of the python server) and less-aggressive caching. Go ahead and check that branch out, and let me know if you have any issues - good luck!

user_8449760
Related