CODEWITHSUNDEEP
jqueryajaxdjango
ysokolovsky
ysokolovsky

Reputation: 435

django: ajax render to template

My template:

{% block content %}
    {% if next_url %}
        <ul class="pager">
            <li><a href="{{ next_url}}">Next</a></li>
        </ul>
    {% endif %}
    {% if photos %}
        {% for photo in photos %}
            <div class="span3" >
                <p>
                    <a href="http://instagram.com/{{ photo.user.username }}"><img src="{{ photo.user.profile_picture }}" width="35" height="35"></a> <a href="http://instagram.com/{{ photo.user.username }}">{{ photo.user.username }}</a>
                    <span class="info_down">[ <a href="{{ photo.images.thumbnail.url }}">T</a> | <a href="{{ photo.images.standard_resolution.url }}">M</a> | <a href="{{ photo.images.low_resolution.url }}">L</a> | <a href="{{ photo.link }}">O</a> ]</span>
                </p>
                <p>
                    <img src="{{ photo.images.low_resolution.url }}">
                </p>
                <p>
                    <i class="icon-heart"></i> {{ photo.l }}
                </p>
                <p>
                    <i class="icon-time"></i> {{ photo.created_time }} <a style="float:right;" href="http://maps.google.com.ua/maps?q={{ photo.location.point.latitude }}+{{ photo.location.point.longitude }}"><i class="icon-map-marker"></i>  Map</a>
                </p>
            </div>

        {% endfor %}
    {% else%}
        <p>empty ;(</p>
    {% endif %}
{% endblock %}

{% block pagination %}
    {% if next_url %}
        <div class="span12" >
            <ul class="pager">
                <li>
                    <a href="{{ next_url}}">Next</a>
                </li>
            </ul> 
        </div>
    {% endif %}
{% endblock %}

And a have a view, that gets 'photos' and 'next_url' via external api and makes some changes:

def tag(request, tag):
    api = InstagramAPI(client_id='', client_secret='')
    tag_m, next = api.tag_recent_media(tag_name=tag.encode('utf-8'), count=16)
    photos = photos + tag_m

    if next != None:
        ....
        next_url = ....

    ....
    for photo in photos:
    ....

    return render_to_response(
        'tag.html',
        {'photos': photos, 'next_url': next_url},
        context_instance=RequestContext(request))

How can i display this data dynamically via ajax? I want to append results from next_url to current page (load more function).

Upvotes: 3

Views: 1203

Answers (1)

karthikr
karthikr

Reputation: 99620

This is what you would do: On click, you can trigger an [ajax][1] submit. On success, you get the HTML, which you append to the div. 

$('.span12 .pager li a').click(function(){
    var href = $(this).attr('href');
    $.ajax({
        url: href,
        success: function(data, status, xhr){
           // append the response data in the HTML
        }
    });
});

Upvotes: 2

Related Questions