Question

I’m trying to dynamically load the new contents when user reaches the page end. My web app uses gae-python. I use ajax & jquery to update query 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 & 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 datastore entity and pass as json. It will update the HTML with

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

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

I know it can be done alternatively by writing the whole HTML code in javascript but I want to know is there any other easy/better way to do it.

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 be rendered only once when someone requests your URI.

So the line var html= "{{ "+e[i]['imageid']+".get().render() | safe }}"; will be rendered and contain invalid rendering to your porpuse.

You need to respond from your lodapage handler with html in order to do that.
Just ‘move/adopt’ the html= "{{ "+e[i]['imageid']+".get().render() | safe }}"; to your loadpage handler , then render it with a simple template file or inline, and make it an html response. The AJAX request will be able to get the html formated data and then you can easily append it. You have to be careful with the id’s and not make them html dependent but rather model/id dependent in order not have duplicates etc.

After that you can just appand the html that you can easily get from the e argument