1

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.

Community
  • 1
  • 1
norman
  • 5,128
  • 13
  • 44
  • 75

1 Answers1

1

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');
        })
        ;
    }
Prahlad Yeri
  • 3,567
  • 4
  • 25
  • 55
  • Hmm...I tried this but got no response upon clicking the button. Might I need to change something in make_sentence (not shown in question)? Though I am new to JS, my understanding of your code is that the ajax call just fetches whatever would be returned when the URL is visited (i.e., the output of make_sentence since that is what gets called automatically). But perhaps make_sentence is not the problem, since it seems that the js call itself (makeSentence()) doesn't happen at all (I checked with an 'alert').. – norman Dec 16 '13 at 16:47
  • 1
    @nicole - Getting rid of the additional ajax parameters and using the done() function instead of "success:" parameter is the way to go. See my updated answer. – Prahlad Yeri Dec 16 '13 at 18:03
  • 1
    Also visit http://api.jquery.com/jQuery.ajax/ for a proper understanding of ajax syntax. – Prahlad Yeri Dec 16 '13 at 18:04