Ajax Form submittion in Google App Engine with jQuery

Question

could not figure out why it is not working:

i need to send request to server, generate some fragment of html in python with meanCal method, and then want that fragment embedded into submitting html file using calculation method and dynamically shows in dyContent div. all the processes are done by single click on submit button in a form.

any suggestions??? thanks in advance.

the submitting html:

<div id="dyContent" style="height: 200px;">
            waiting for user...
            {{ mgs }}   
</div>


<div id="leturetext">
    <form id="mean" method="post" action="/calculation">
        <select name="meanselect">
            <option value=10>example</option>
            <option value=11>exercise</option>
        </select>
        <input type="button" name="btnMean" value="Check Results" />
    </form>
</div>

<script type="text/javascript"> 
$(document).ready(function() { 
  //$("#btnMean").live("click", function() {
  $("#mean").submit(function(){
     $.ajax({
       type: "POST",
       cache: false,
       url: "/meanCal",
       success: function(html) {
         $("#dyContent").html(html);
       }
     });
     return false;
  });
});
</script>

python:

class MainHandler(webapp.RequestHandler):
  def get(self):
    path = self.request.path
    if doRender(self, path):
        return
    doRender(self,'index.htm')

class calculationHandler(webapp.RequestHandler):
  def post(self):
    doRender(self, 'Diagnostic_stats.htm',
{'mgs' : "refreshed.", })

  def get(self):
    doRender(self, 'Diagnostic_stats.htm')



class meanHandler(webapp.RequestHandler):

  def get(self):
    global GL
    index = self.request.get('meanselect'.value)
    if (index == 10):
        allData = GL.exampleData
        dataString = ','.join(map(str, allData))
        dataMean = (str)(stats.lmean(allData))
        doRender(self, 'Result.htm',
        {
        'dataIn' : dataString,
            'MEAN' : "Example Mean is: " + dataMean,
              })
        return
    else:
        allData = GL.exerciseData
        dataString = ','.join(map(str, allData))
        dataMean = (str)(stats.lmean(allData))
            doRender(self, 'Result.htm',
        {
        'dataIn' : dataString,
            'MEAN' : "Exercise Mean is: " + dataMean,
              })



def main():
  global GL
  GL = GlobalVariables()
  application = webapp.WSGIApplication(
        [('/calculation', calculationHandler),
    ('/meanCal', meanHandler),
        ('.*', MainHandler),
        ],
      debug=True)
  wsgiref.handlers.CGIHandler().run(application)

if __name__ == '__main__':
  main()

Answer 1

To submit a form via AJAX, you'd better consider using Form Plugins. You will not need to build the parameter to be sent by yourself.

Also, it's better if you make sure that the form is working without javascript enabled. This way, your page will still be functional even js in browser is turned off. For visitor with js enabled, add the extra experience using AJAX.

To debug, use Firebug in Firefox, or WebInspector that build-in in Safari and Google Chrome. Check if the AJAX request is passing the data as you want, and check the response, is it contain the response that you want, an error message, or else.

---

Answer 2

The .submit() method actually submits the form as if you pressed the submit button. Using jQuery, you can submit the form depending on certain conditions only, or as a response to an event.

If you want to send the form data to the server and get a response back, you need to create a data sting which is then set as a parameter in the $.ajax() call.

So your Javascript would look like this:

var optionSelected = $('#mean select option:selected').val();
var dataString = 'meanselect=' + optionselected;
$.ajax({
   type: "POST",
   data: dataString,
   cache: false,
   url: "/meanCal",
   success: function(html) {
     $("#dyContent").html(html);
   }
 });