Google App Engine-Ajax refresh from datastore using python

Question

I have an application(developed in python) that requires a refreshed view from the datastore after every 5 seconds. I have came out with an javascript function and handle the refresh using ajax.

Ajax function

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>      <script type="text/javascript">             var refreshId = setInterval(function()          {           $('#responsecontainer').fadeOut("slow").load('/refresh').fadeIn("slow");            }, 5000);       </script>

After which, I have a set of div tags(responsecontainer) that enclosed the parameters returned from the server side for display.

<div id="responsecontainer">
    {% for greeting in greetings %}
      {% if greeting.author %}
        <b>{{ greeting.author.nickname }}</b> wrote:
        <a href="/sign?key={{ greeting.key.id }}&auth={{ greeting.author.nickname }}">Delete</a>
      {% else %}
       An anonymous person wrote:
      {% endif %}
      <blockquote>{{ greeting.content|escape }}</blockquote>

    {% endfor %}
</div>

      <form action="/sign" method="post">
      <div><textarea name="content" rows="3" cols="60"></textarea></div>
      <div><input type="submit" value="Sign Guestbook" name="submitGuestBk"></div>

    </form>

My server side code is to query the datastore and render the result back to the template file(index.html).

class RefreshPage(webapp.RequestHandler):
  def get(self):
    greetings_query = Greeting.all().order('-date')
    greetings = greetings_query.fetch(10)

    if users.get_current_user():
      url = users.create_logout_url(self.request.uri)
      url_linktext = 'Logout'
    else:
      url = users.create_login_url(self.request.uri)
      url_linktext = 'Login'

    template_values = {
      'greetings': greetings,
      'url': url,
      'url_linktext': url_linktext,
      }

    path = os.path.join(os.path.dirname(__file__), 'index.html')
    self.response.out.write(template.render(path, {}))

However, when I run the application, the results got refreshed together with the html contents such as forms and tables. Together, I am seeing 2 forms after the index.html refreshed by itself every 5 seconds.

Can anybody guide me on the possible cause and solution?

Answer 1

The call to load('/refresh') replaces the contents of the responsecontainer div with the loaded HTML.

You therefore need the RefreshPage handler to just return that HTML, and not the whole page. For example, it should use a template which just contains this:

{% for greeting in greetings %} 
  {% if greeting.author %} 
    <b>{{ greeting.author.nickname }}</b> wrote: 
    <a href="/sign?key={{ greeting.key.id }}&auth={{ greeting.author.nickname }}">Delete</a> 
  {% else %} 
   An anonymous person wrote: 
  {% endif %} 
  <blockquote>{{ greeting.content|escape }}</blockquote> 
{% endfor %} 

To avoid duplicating that content in both templates, you could potentially make your main template include this sub-template inside the div, for example:

<div id="responsecontainer"> 
    {% include "sub_template.html" %} 
</div> 

<form action="/sign" method="post"> 
<div><textarea name="content" rows="3" cols="60"></textarea></div> 
<div><input type="submit" value="Sign Guestbook" name="submitGuestBk"></div> 
</form>