JQuery "get" failure (using Google App Engine on the back-end)

Question

What I am trying to do is pretty simple: yet something has clearly gone awry.

On the Front-End:

function eval() {
    var x = 'Unchanged X'
    $.get("/",  { entry: document.getElementById('entry').value },
       function(data){
        x = data;
       }
      );

       $("#result").html(x);
    }

On the Back-End:

class MainHandler(webapp.RequestHandler):

  def get(self):
      path = os.path.join(os.path.dirname(__file__), 'index.html')
      if self.request.get('entry') != '':
          #self.response.out.write({'evalresult': self.request.get('entry')})
          self.response.out.write(request.get('entry'))
      else:
          self.response.out.write(template.render(path, {'result': 'Welcome!!'}))



   def main():
      application = webapp.WSGIApplication([('/', MainHandler)],
                                       debug=True)
      wsgiref.handlers.CGIHandler().run(application)

Yet, apparently the function is never being called and #result gets set to 'Unchanged X'. What am I missing?

NOTE: The callback is NOT being called. I have verified this by placing an alert("Test") within the callback function. Any ideas anyone?

Answer 1

$("#result").html(x); goes in the get() callback

Answer 2

If the callback is not running you can try changing the $.get into a $.ajax() call, and adding an error callback, to see if the server is returning an error.

Or better yet, check in the "net" panel in firebug to see what the server response is, which might help you track down what the issue is on the back end.

Also once the issue is fixed, you might want to replace the $.get with a simple $().load which would take the data and place it into the div automatically:

$('#result').load('/', { entry: document.getElementById('entry').value });

EDIT: I suppose the following would be a more jQueryish way of writing it:

$('#result').load('/', { entry: $('#entry').val() });

Answer 3

First we have the silly mistake:

<font size="3" face="Trebuchet MS">Speak Your Mind:&nbsp;&nbsp;</font><input type="text"     
size="60" id="entry"/> <img valign="bottom" src='/assets/cognifyup.png' 
onMouseOver="over()" onMouseOut="out()" onMouseDown="out(); evaluate();" 
onMouseUp="over()"><br><br>

Semicolons are required after the calls to over() and out() (roger that? --- sorry couldn't resist)

Secondly (the much more subtle problem):

If we ever need intend to translate the get() into a getJSON() call, (which you might have noted was my original intent from the commented python code that returns a dict), then we need to wrap a str() call around self.request.get('entry'). Hence,

self.response.out.write({'evalresult': self.request.get('entry')})

becomes:

self.response.out.write({'evalresult': str(self.request.get('entry'))})

As strings from an HTML field translate to unicode text in Python, at the back-end, we apparently need to convert it to a Python string (as getJSON() apparently doesn't like Python's representation of a unicode string -- any ideas why this this is the case anyone?).

At any rate, the original problem has been solved. In conclusion: any JSON object with a Python unicode string will not be accepted as a valid JSON object and will fail silently -- a nasty gotcha that I can see biting anyone using JQuery with Python on the server-side.