Building Ajax Form in Google App Engine

Question

I have a form, when I click on submit button, I want to communicate with the server and get something from the server to be displayed on the same page. Everything must be done in AJAX manner. How to do it in Google App Engine? If possible, I want to do it in JQuery.

Edit: The example in code.google.com/appengine/articles/rpc.html doesn't work on form.

Answer 1

Edit: The rpc procedure doesn't work for form.

Answer 2

I'm using the RPC method, and it works well. I've made it a little more robust since I'm using it on several pages, but it's basically the same.

So, if it's not working, you're doing something wrong. If there's a particular error you get, post it and maybe I'll know what's going on.

Answer 3

I'd add that in Firebug, you should see your ajax call pop up in the console. If you're getting the exception when you open that address, there's something up with your Python code. Maybe you're not correctly mapping your urls?

Answer 4

I've done it with something like this before in jQuery (not sure if it's the "best" way, but it works):

function jsonhandler(data) {
   // do stuff with the JSON data here
}

var doajax = function () {
    arr = Object();
    $("#form_id").children("input,select").each(function() { arr[this.name] = this.value;});
    $.getJSON("<page to call with AJAX>", arr, function (data) { jsonhandler(data);});
}

$(document).ready(function () {
    $("#submit_button_id").replaceWith("<input id=\"sub\" name=\"sub\" type=\"button\" value=\"Submit\">");
    $("#sub").click(doajax);
}

You can replace the $.getJSON with whichever jQuery AJAX function does what you want. If you just want to display the output of the page you're calling, $.get is probably your best bet. If you have other input types besides input and select in your form, you'll need to add those to the children function as well.

Answer 5

You can use jquery Form plugin to submit forms using ajax. Works very well.

$('#myFormId').submit(function() {
    // submit the form
    $(this).ajaxSubmit();
    return false;
});

Answer 6

I wrote a really nice tutorial to answer this question a few days ago, so I guess I should answer it - the page is at AJAX with Google App Engine.

You can practically just copy my code there if you want - it includes all the javascript you need (both JQuery and just hand-coded javascript), and there's a working example included.