Handling json Form with jQuery on Google App Engine

Question

I am having some problems with making jQuery work on GAE python 2.7 . The main problem is jQuery cant catch the json data returned by the server.

A simple comment form with nothing special:

<form action="/postcomment/" method="post" id="commentform">
  <input type="text" name="author" id="author"  onfocus="if(this.value=='Name: (required)') this.value='';" onblur="if(this.value=='') this.value='Name: (required)';" {% if name %}value="{{ name }}"{% else %}value="Name: (required)"{% endif %} size="22" tabindex="1" aria-required='true' />
  <input type="text" name="email" id="email"  onfocus="if(this.value=='E-Mail: (required)') this.value='';" onblur="if(this.value=='') this.value='E-Mail: (required)';" {% if email %}value="{{ email }}"{% else %}value="E-Mail: (required)"{% endif %} size="22" tabindex="2" aria-required='true' />
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="3"></textarea>
<input name="submit" type="submit" id="submit" tabindex="4" value="Submit" />
</form>

My jQuery code (only structure to make it simpler):

$("#submit").click(function() {
$.ajax({
 dataType: 'json',
 beforeSubmit: function() {
 },
 timeout: 60000,
 error: function(request,error) {
 },
  success: function(data) {
   var obj = jQuery.parseJSON(data);
   //blah blah...
   } // End success
}); // End ajax method
});

On the server side:

class PostComment(BaseHandler):
  def post(self):
    self.response.headers['Content-Type'] = "application/json"
    response = {'errorcode': 0}
    self.response.out.write(json.dumps(response))

The result is: After I click the "submit" button, My Firefox 3.6 browser says: There is "application/json" file, do you want to open it with which tool?

I was expecting jQuery to catch this 'json' data and process it. But it didnt happen.

I believe I am almost there but something is wrong.

Martijn Pieters · Accepted Answer · 2012-08-23 16:33:51Z

2

You need to cancel the default action of the form, which is to submit (which cancels any running JavaScript AJAX query in progress):

$("#submit").click(function() {
    $.ajax({
     dataType: 'json',
     beforeSubmit: function() {
     },
     timeout: 60000,
     error: function(request,error) {
     },
      success: function(data) {
       var obj = jQuery.parseJSON(data);
       //blah blah...
       } // End success
    }); // End ajax method
    return false; // Cancel default action.
});

By returning false from the click handler, the normal form action, which is for the browser to submit the data to the URL named in the action attribute, is not executed.

edited Aug 23, 2012 at 16:33

answered Aug 23, 2012 at 16:27

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

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

2 Comments

Gaby Solis Over a year ago

Thanks a lot! It works! However, if I add the recaptcha script in the form: <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=xxxx" > </script> The same json file problem appear again. How can I solve this problem?

Martijn Pieters Over a year ago

@GabySolis: Sorry, I don't know why that'd be, I am not familiar with the ReCaptcha JS. Perhaps you can make that a new question so someone that does know can help you?

Collectives™ on Stack Overflow

Handling json Form with jQuery on Google App Engine

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related