Dynamically loading strings in jinja2 Framework for Python using AJAX

Question

I am trying to dynamically load new content when the user reaches the end of the page. My web application uses gae-python. I use ajax and jquery to update the request in html.

HTML

{% block content %} <div class="hero-unit special-padding"> {% for h in hots %} {{ h.imageid.get().render() | safe }} {% endfor %} {% include 'pager.html' %} </div> {% endblock %} 

JQuery and AJAX:

  $(window).scroll(function () { if ($(window).scrollTop() + $(window).height() > $('.hero-unit').height() - 100 && !isLoading) {$('#loadpage').click(function() { var page=$('#loadpage').attr('name'); $.ajax({ type: "POST", dataType:"json", url: '/loadpage', data : {'page': page}, success: updatehtml, }); return false; }); }); function updatehtml(e){ for (var i = 0; i < e.length; i++) { var html= "{{ "+e[i]['imageid']+".get().render() | safe }}"; $('.hero-unit').append(html); } } 

I serialize the data warehouse object and pass it as json. It will update the HTML using

 {{ datastoreKey.get().render()|safe }} 

Now I want the jinja2 framework to call the python .render() function whenever ajax updates my HTML.

I know this can be done differently by writing all the HTML in javascript, but I want to know if there is another simple / better way to do this.

Answer 1

 function updatehtml(e){ for (var i = 0; i < e.length; i++) { var html= "{{ "+e[i]['imageid']+".get().render() | safe }}"; $('.hero-unit').append(html); } } 

Will only be displayed once when someone asks for your URI.

Thus, the line var html= "{{ "+e[i]['imageid']+".get().render() | safe }}"; will display and contain invalid rendering for your porpuse.

To do this, you need to respond using the lodapage handler using html. Just "move / accept" html= "{{ "+e[i]['imageid']+".get().render() | safe }}"; to your loadpage handler, then reject it with a simple template file or inline file and make it an html response. An AJAX request will be able to get html-formatted data, and then you can easily add it. You should be careful with id and not make them dependent on html, but rather dependent on model / identifier so as not to have duplicates, etc.

After that, you can simply add html, which you can easily get from the e argument