request.args.get returns none for ajax request

Question

I'm trying to implement in place editing in html5. Trying to implement this

http://w3lessons.info/2014/04/13/html5-inline-edit-with-php-mysql-jquery-ajax/

But in flask,ajax and jquery instead. When I send ajax request to flask app, it cannot seems to access data i pass for "dd" tag. This is the route function I have

@app.route('/updateNode', methods=['POST'])
def updateNode():
 fieldToEdit = request.args.get('fieldToEdit', None)
 value = request.args.get('value', None)

 app.logger.debug(value)
 app.logger.debug(fieldToEdit)
 if value == None:
    return jsonify(success=0)
 else:
    return jsonify(success=1)

Always see None when I check using app.logger.debug(value)

DEBUG in view: None

My Ajax code is something like this

<script>
$(document).ready(function(){
  $("dd[contenteditable=true]").blur(function()
  {
    var field_user = $(this).attr("id") ;
    var value = $(this).html() ;
    console.log(field_user);
    console.log(value);
    $.ajax({
      type: "POST",
      url: "/updateNode",
      data: {
        'fieldToEdit' : field_user,
        'value': value
      },
      dataType: "text",
      success: function(rsp){
        console.log("Ajax call was successful" + rsp);
      },
      error: function(e) {
        console.log('request failed ' + e);
      }
    });
  });
});
</script>

I can see right value in developer tool console before making ajax call.

My Html code

<li>
  <dl>
   <dt>Age</dt>
   <dd id="editAge"contenteditable="true">40</dd>
  </dl>
</li>

Sample code in runnable http://code.runnable.com/me/VqbxNjRjLVNkRnxN

.html() should only return value, so I cannot understand why request.args.get cannot retrieve value from key value pair supplied in data

what does `console.log(value)` print – Busturdust Jan 27 '16 at 00:40 — Busturdust, Jan 27 '16 at 00:40

score 0 · Answer 1 · answered Jan 27 '16 at 00:47

For these purposes, I am not sure you want to send the actual HTML of the value, as it will have HTML tags.

The docs.

html (): http://api.jquery.com/html/

In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned. Consider this code:

$( "div.demo-container" ).html();

In order for the following 's content to be retrieved, it would have to be the first one with class="demo-container" in the document:

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

The result would look like this:

<div class="demo-box">Demonstration Box</div>

As you can see however, the HTML tags are still there.

You should use text()

The docs http://api.jquery.com/text/

Unlike the .html() method, .text() can be used in both XML and HTML documents. The result of the .text() method is a string containing the combined text of all matched elements. (Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.) Consider the following HTML:

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

The code $( "div.demo-container" ).text() would produce the following result:

Demonstration Box list item 1 list item 2

It doesn't make a difference. In Flask route function it is still "None". console.log(value) print the right values from
40
i.e 40. I thought it was something to do with html tags, so I tried this - http://stackoverflow.com/questions/753052/strip-html-from-strings-in-python, but then I get this error - TypeError: Can't convert 'NoneType' object to str implicitly. — jas, Jan 27 '16 at 01:12
There is no .innerHTML in jquery. According to doc link- html (): http://api.jquery.com/html/ .html() function uses the browser's innerHTML property — jas, Jan 27 '16 at 01:57

jas · Answer 2 · 2016-01-27T23:27:33.213

I'm able to solve it using this code instead

 <script type=text/javascript>
 $(function() {
  $('dd[contenteditable=true]').bind('blur', function() {
    $.getJSON('/updateNode', {
      a: $(this).attr("id"),
      b: $(this).text()
    }, function(data) {
    console.log("Ajax call was successful" + data);
   });
   return false;
  });
 });
</script>

But, I don't know why it didn't work with $.ajax method

request.args.get returns none for ajax request

2 Answers2