Rendering from method after Ajax post request in Google App Engine

Question

I'm using Ajax $.post() to post the content of a form to my controller in google app engine. The form basically is trying to find lat/lng using html5 geolocation and user input.

        <form method="post" id="simple-form" action="/search">
        <div>
            <input type="text" placeholder="Keyword" name="searchQuery"  id="searchQuery">
            <input type="button" id="simple-submit-button">
        </div> </form>

Trying to find geolocation

$('#simple-submit-button').click(function () {
     navigator.geolocation.getCurrentPosition(onSuccess, onError);
})

function onSuccess(position) {
    document.getElementById('Latitude').value = position.coords.latitude;
    document.getElementById('Longitude').value = position.coords.longitude;
    var x = document.getElementById('Latitude').value;
    if (x != undefined || x != null) {
        submitform();
    }
}

Using jquery $.post() to post the content to a method and render another page.

function submitform() {
    var where = $("#simple-firm").attr("action");
    var fi = $("#Latitude").val();
    var fj = $("#Longitude").val();
    var gk = $("#searchQuery").val();
    var what = {Latitude: fi, Longitude: fj, searchQuery: gk};
    $.post(where, what, handleResponse, "json");
}

Following is my router.py

from webapp2 import WSGIApplication
from webapp2 import Route

app = WSGIApplication([
    Route('/search', handler='app.serp.Search'),
}

and my method

class Search():
def get(self):
    self.redirect('/')

def post(self):
    query_name = self.request.get('searchQuery')
    lat = float(self.request.get('Latitude'))
    lng = float(self.request.get('Longitude'))
    print query_name,lat, lng
    #self.response.out.write('<html><body>You wrote:<pre>')
    self.render('serp/serp.html')

Although I can see in my terminal that the values of query_name, lat, lng from the are being printed, but neither the self.render nor self.response is displayed. I basically want to render another page called serp.html. What is going wrong here. How to fix it.

score 0 · Answer 1 · answered May 21 '17 at 19:53

Need to know more. But, here are some things to try:

1) Check your logs to see where the error is.

2) Is /serp/ in your sys.path for this project? Try: self.render('serp.html') self.render('/serp.html') self.render('/serp/serp.html')

3) Use jinja2, and perhaps Flask. Those make rendering templates easy.

score 0 · Answer 2 · answered Jun 06 '17 at 14:46

First, read this webapp2 documentation on rendering templates. Templates are basically just html files where you can inject your own variables in to the html before serving the page (or you can just serve the html as-is).

Judging by that documentation, you probably want to do this:

import os
import webapp2
from google.appengine.ext.webapp import template

# don't forget to extend webapp2.RequestHandler
class Search(webapp2.RequestHandler):
    def get(self):
        self.redirect('/')

    def post(self):
        query_name = self.request.get('searchQuery')
        lat = float(self.request.get('Latitude'))
        lng = float(self.request.get('Longitude'))
        print query_name,lat, lng

        template_values = {
            'query_name': query_name,
            'lat': lat,
            'lng': lng
        }
        path = os.path.join(os.path.dirname(__file__), 'serp/serp.html')
        self.response.out.write(template.render(path, template_values))

However, your question is a bit strange to me. You are returning an html page to an AJAX post request? Typically, you either do:

A normal HTTP Post (not AJAX, synchronous, basically posting a normal form) and the response will be a new webpage (your html) file
An AJAX post, where your jquery/javascript handles the response, and the response is in XML or JSON, not html.

You are doing some hybrid of the two where AJAX is receiving a new html page, which you could still make work just fine, but it's kind of weird. You might find it easier to respond with json or xml, and use jquery/AJAX to handle the json response or xml by setting the dataType of the post request. Your call.

Rendering from method after Ajax post request in Google App Engine

2 Answers2