No response when passing the values through AJAX and Flask

Question

I am new to AJAX and Flask. I asked here about how to pass values and show them on the same page without the need to refresh the page and I was told about Ajax. However, after modifying the example given. I am getting a weird error.

Here's my HTML side:

 <script type=text/javascript>
    $(function() {
      $('a#show').bind('click', function() {
        $.getJSON('/show', {
          a: $('input[name="node"]').val(),
          b: $('input[name="parameter"]').val()
        }, function(data) {
          $("#result").text(data.result);
        });
        return false;
      });
    });
  </script>

<form  action=""> <!-- method = 'post'-->
                <label for="node">Node</label>
                <select name="node">
                    {% for o in data_nodes %}
                    <option value="{{ o.name }}">{{ o.name }}</option>
                    {% endfor %}
                </select>
                <label for="parameter">Parameter</label>
                <select name="parameter">
                    {% for o in data_para %}
                    <option value="{{ o.name }}">{{ o.name }}</option>
                    {% endfor %}
                </select>
                <!-- Write your comments here -->
                <button type="submit" class="btn btn-default" href="javascript:void(0);" id="show" >Send</button>
</form>

My Flask side:

@app.route('/dashboard/', methods=['GET', 'POST'])
def dashboard():
    return render_template("dashboard.html", data_nodes = [{'name': 'c9 - Office'}, {'name': 'f20 - Home'}, {'name': 'f21 - School'}],
                           data_para = [{'name': 'Temperature'}, {'name': 'RSSI'}, {'name': 'LQI'}])  # data_nodes, data_para
@app.route('/show')
def show():
    a = request.form.get('node')
    b = request.form.get('parameter')
    print a
    print b
    result = a+b
    return jsonify(result) # I only intend to print the result on the page here for now.

And here's the response I get. The page refreshes too.

127.0.0.1 - - [24/Apr/2016 23:41:10] "GET /dashboard/?node=f20+-+Home&parameter=RSSI&time=t3 HTTP/1.1" 200 
127.0.0.1 - - [24/Apr/2016 23:41:05] "GET /static/js/ie10-viewport-bug-workaround.js HTTP/1.1" 404 -

I tried different variations but I am not exactly sure why the result isn't appearing.

score 2 · Answer 1 · edited May 23 '17 at 11:52

Based on your log file, you are making the following request to your webserver:

127.0.0.1 - - [24/Apr/2016 23:41:10] "GET /dashboard/?node=f20+-+Home&parameter=RSSI&time=t3 HTTP/1.1" 200

This means, the parameters you are looking for are coming in as request parameters, not as form elements. You can reference this post for a more thorough discussion, but I would just change form to args.

@app.route('/show')
def show():
    a = request.args.get('node')
    b = request.args.get('parameter')

Update:

It looks like there are also errors in your HTML file:

<script type=text/javascript>
    $(function() {
      $('#myForm').submit(function(ev) {
        $.getJSON('/show', {
          node: $('input[name="node"]').val(),
          parameter: $('input[name="parameter"]').val()
        }, function(data) {
          $("#result").text(data.result);
        });
        ev.preventDefault();
      });
    });
  </script>

<form id='myForm' action=""> <!-- method = 'post'-->
                <label for="node">Node</label>
                <select name="node">
                    {% for o in data_nodes %}
                    <option value="{{ o.name }}">{{ o.name }}</option>
                    {% endfor %}
                </select>
                <label for="parameter">Parameter</label>
                <select name="parameter">
                    {% for o in data_para %}
                    <option value="{{ o.name }}">{{ o.name }}</option>
                    {% endfor %}
                </select>
                <!-- Write your comments here -->
                <button type="submit" class="btn btn-default" href="javascript:void(0);" id="show" >Send</button>
</form>

I followed your answer but I am still getting the same thing. The page refreshes and I get the same response for the log file. — Ahmed Al-haddad, Apr 24 '16 at 16:47
Is there a line in the log file for the request for the /show endpoint? — 2ps, Apr 24 '16 at 16:53
No. I don't know why it keeps on showing me /dashboard ! Could it be because of my button parameters? — Ahmed Al-haddad, Apr 24 '16 at 18:10
Hmm, I tried to follow the update but I am still getting the same result :/. Both in terms of the page and the log — Ahmed Al-haddad, Apr 25 '16 at 10:33

No response when passing the values through AJAX and Flask

1 Answers1