CODEWITHSUNDEEP
javascriptpythonajaxgoogle-app-engine
norman
norman

Reputation: 5556

Call python function with javascript and display returned string on web page

I have a simple appengine/python application that allows the user to click a button to display a random-generated sentence. So far, I have pieced together the main python file as follows:

import jinja2
import os
import webapp2
import generator  # My random sentence generator module; its make_sentence() function returns a string

class MainPage(webapp2.RequestHandler):

      def get(self):
          template = jinja_environment.get_template('main.html')
          self.response.out.write(template.render(dict(sentence = generator.make_sentence())))

  jinja_environment = jinja2.Environment(
      loader=jinja2.FileSystemLoader(os.path.dirname(__file__))
  )

  application = webapp2.WSGIApplication([
      ('/', MainPage),
  ], debug=True)

In main.html:

   <!DOCTYPE html>
   <html>
     <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
       <link rel="stylesheet" href="css/custom.css">
       <title>Random Sentence Generator</title>
     </head>
     <body>
      <div class="jumbotron">
        <p class="lead">{{ sentence }}</p>
        <a class="btn-lg btn-info" onclick="makeSentence();return false;" href="#">Generate sentence!</a>
      </div>

      <script>    
        function makeSentence(){  
          location.reload(); 
        }
      </script>
      <script src="http://code.jquery.com/jquery.js"></script>
      <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    </body>
  <html>

In case it will be important for the question, here is app.yaml as well:

   application: sentence-generator
   version: 1
   runtime: python27
   api_version: 1
   threadsafe: true

   handlers:
   - url: /css
     static_dir: css

  - url: /.*
    script: sengen.application

  libraries:
  - name: jinja2
    version: latest

This works okay (in fact, one can try it out here :-) ), but I would like to be able to generate a new sentence without refreshing the page each time.

From this question, it looks like I can use Ajax for this. But I'm not sure how to put it all together. I'm thinking I can replace the contents of makeSentence() with something like the top answer in the previous link, but I'm not sure how to incorporate the "response" with what I display on the web page.

Upvotes: 2

Views: 2285

Answers (1)

Prahlad Yeri
Prahlad Yeri

Reputation: 3653

You are on the right track. Instead of calling location.reload(), you can use ajax to get the output and put it in the paragraph instead. To begin with, put an identifier to the paragraph where you place your sentence:

 <p id="sen1" class="lead">{{ sentence }}</p>

Now all that remains is using AJAX to get your current page output and display it in sen1. You can do something like this in makeSentence. (This will alert the response of your main page reload in ajax. You might want to extract the infomation you need from it.)

    function makeSentence() {
     $.ajax({
          url:'http://sentence-generator.appspot.com'
       }
     )
     .done(function(data) {
         alert(data);
         })
    .fail(function(){
        alert('error');
        })
    .always(function(){
        //alert('always');
        })
        ;
    }

Upvotes: 1

Related Questions