Add ajax response to mdl card

375
November 22, 2016, at 11:33 AM

I want to do website with updating content from ajax request. I receive json data and i have to put this json data to MDL CARD. http://www.getmdl.io/components/index.html#cards-section

my ajax code:

$(document).ready(function(){
    displayRecords(limit, offset);
    $('#button').click(function (){
        limit = limit + 2;
        offset = offset + 2;
        displayRecords(limit, offset);
    });
});
function displayRecords(lim, off){
    $.ajax({
        type: "GET",
        url: "/main/",
        data: {'limit': lim, 'offset': off},
        dataType: 'json',
        success: function(data) {
            for (var post in data){
                $('.mdl-card__supporting-text').append(data[post].fields.title);
            }
        }
    });
}

and my django code:

def posts(request):
    if request.is_ajax():
        offset = request.GET.get('offset')
        limit = request.GET.get('limit')
        all_posts = Post.objects.all()[offset:limit]
        data = serializers.serialize('json', all_posts, ensure_ascii=False)
        print data
        return HttpResponse(data, content_type='application/json; charset=utf8')
    else:
        return render(request, 'main.html')
Answer 1

I used mustache.js. It is helped me.

READ ALSO
Add XPath to chrome extension or into javascript

Add XPath to chrome extension or into javascript

I'm making chrome extension and i need to have xpath in it, it dose not work even when i add jquery in to the manifest. .

471
How to Hide Element after number of clicks?

How to Hide Element after number of clicks?

So I need to make an input tag hidden after it has been clicked at least twice. This is the JS/JQuery I have: (note I'm very new to the language).

337
ajax throwing error with right outcome

ajax throwing error with right outcome

I have the following function:.

245
Why does setInterval not increment my clock properly in JavaScript?

Why does setInterval not increment my clock properly in JavaScript?

I want to display the actual time in New York. I have a html div:.

294