CODEWITHSUNDEEP
jqueryajaxgoogle-app-engine
Graviton
Graviton

Reputation: 83296

Building Ajax Form in Google App Engine

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.

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

Upvotes: 5

Views: 13283

Answers (3)

Rik Heywood
Rik Heywood

Reputation: 13972

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

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

Upvotes: 7

Randy
Randy

Reputation: 4023

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.

Upvotes: 1

JJ.
JJ.

Reputation: 5084

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?

Upvotes: 1

Related Questions