Question

我有一个jQuery UI DatePicker窗口小部件代码，我想与其他一些JavaScript代码一起放入同一个外部JavaScript文件 PP_forms.js。但是，当我将此DatePicker窗口小部件代码放入外部文件时，该窗口小部件不再起作用。如果DatePicker JavaScript代码位于我的HTML文件中，则只能使其工作。我在做什么错了？

不一定要查看Flask PP_process.py，但如果有人需要它来查看整个IRL，我也将包括此文件。

PP_forms.js


// $(document).ready(function() {
//     $('#inlineDate').datepicker();
// });

//______________________________________________________________________________

$(document).ready(function() {


    // $('#inlineDate').datepicker();


    $('form').on('submit', function(event) {

        $.ajax({
            data : {
                name : $('#nameInput').val(),
                email : $('#emailInput').val()
            },
            type : 'POST',
            url : '/process'
        })
        .done(function(data) {

            if (data.error) {
                $('#errorAlert').text(data.error).show();
                $('#successAlert').hide();
            }
            else {
                $('#successAlert').text(data.name).show();
                $('#errorAlert').hide();
            }

        });

        event.preventDefault();

    }); // END .on event.

//______________________________________________________________________________

// $('#inlineDate').datepicker();

//______________________________________________________________________________

}); // END .ready event.

//______________________________________________________________________________

PP_form.html

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- _______________________________________________________________________ -->

<!-- jQuery UI DatePicker widget -->

<script src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha384-TlQc6091kl7Au04dPgLW7WK3iey+qO8dAi/LdwxaGBbszLxnizZ4xjPyNrEf+aQt"
crossorigin="anonymous"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<!-- _______________________________________________________________________ -->

<!-- PrettyPrinted AJAX example -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>

<!-- _______________________________________________________________________ -->

</head>
<body>

<div class="container">
    <br><br><br><br>
    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="emailInput">Email address</label>
        <input type="email" class="form-control" id="emailInput" placeholder="Email">
      </div>
      <div class="form-group">
        <label class="sr-only" for="nameInput">Name</label>
        <input type="text" class="form-control" id="nameInput" placeholder="First Name">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <br>
    <div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
    <div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"></div>


<!-- _______________________________________________________________________ -->

<br><hr>

<div class="row">
    <h1>jQuery UI DatePicker Widget</h1>

    <!-- jQuery UI DatePicker Widget -->
    <form method="post" action="#">
        <div id="wrapper" class="ui-widget">
        <label for="demoDate">Date: </label><input id="demoDate"/><span id="inlineDate"></span>
        </div>
    </form>
</div>

<!-- _______________________________________________________________________ -->

</div><!-- END class container -->

<!-- _______________________________________________________________________ -->

<!-- script>
$(document).ready(function() {
    $('#inlineDate').datepicker();
});
</script -->

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

<!-- _______________________________________________________________________ -->

</body>
</html>

PP_process.py

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('PP_form.html')

@app.route('/process', methods=['POST'])
def process():

    email = request.form['email']
    name = request.form['name']

    if name and email:
        newName = name[::-1]

        return jsonify({'name' : newName})

    return jsonify({'error' : 'Missing data!'})

if __name__ == '__main__':
    app.run(debug=True)

控制台错误-误报错误，

我暂停Ghostery扩展程序时没有控制台错误。

Uncaught TypeError:
    c.querySelectorAll is not a function
    at MutationObserver.<anonymous> (content_script_bundle.js:16)
(anonymous)         @   content_script_bundle.js:16
childList (async)       
(anonymous)         @   jquery-2.2.4.js:5424
each                @   jquery-2.2.4.js:365
each                @   jquery-2.2.4.js:137
(anonymous)         @   jquery-2.2.4.js:5422
access              @   jquery-2.2.4.js:3614
text                @   jquery-2.2.4.js:5419
(anonymous)         @   PP_form.js:20
fire                @   jquery-2.2.4.js:3187
fireWith            @   jquery-2.2.4.js:3317
done                @   jquery-2.2.4.js:8757
(anonymous)         @   jquery-2.2.4.js:9123
load (async)        
send                @   jquery-2.2.4.js:9142
ajax                @   jquery-2.2.4.js:8656
(anonymous)         @   PP_form.js:5
dispatch            @   jquery-2.2.4.js:4737
elemData.handle     @   jquery-2.2.4.js:4549

如何将两个JavaScript小部件合并到同一个外部JavaScript文件中？

0 个答案: