加载10个项目的AJAX调用无法按预期工作

Question

I'm trying to load 10 items each time the load more button is clicked. I initially send the first 10 items and use dajaxice to load more 10 items each time the button is pressed.

Here is my view

def dj(request, slug):
    dj = DJ.objects.get(slug=slug)
    dj_song_list = Song.objects.filter(artist=dj, duplicate=False).order_by('-votes', '-release_date')[:10]
    return render(request, 'hunt/dj.html', {'dj_song_list': dj_song_list, 'slug': slug, 'dj': dj})

Here is my javascript

<script type="text/javascript">
    function load() {
        Dajaxice.hunt.load_more(Dajax.process, {'items': $("#dj_song_list").find('div').length - 1, 'dj_name': $('.dj_name').text().trim()})
    }
</script>

Here is my ajax.py

@dajaxice_register
def load_more(request, items, dj_name=None):
    if dj_name:
        dj = DJ.objects.get(name=dj_name)
        dj_song_list = Song.objects.filter(artist=dj, duplicate=False).order_by('-votes', '-release_date')[:items+10]
        render = render_to_string('hunt/dj.html', {'dj_song_list': dj_song_list, 'slug': dj.slug, 'dj': dj.name})
        dajax = Dajax()
        dajax.assign('#edmhunters_body','innerHTML',render)
        return dajax.json()

This code loads 10 more songs but the DJ objects is not passed correctly. I get the following error

DoesNotExist: DJ matching query does not exist.

On investigating I found that slug was printing fine in the ajax call but in the view it was something like hardwell/hunt/img/.jpg . It probably has something to do with how the slug is retrieved. Here is my HTML where the slug is retrieved.

<a href="{% url 'dj' slug=dj.slug %}"><img src="{{ STATIC_URL}}hunt/img/{{ dj.rank }}.jpg"/></a>

Why is the slug appending the string at the end?

I even added a code in the view to trim the extra string of the slug but it still doesn't work as expected. It doesn't throw the DoesNotExist error but the DJ object is still not passed.

if slug.endswith('/hunt/img/.jpg'):
        slug = slug[:-len('/hunt/img/.jpg')]

Here is the view initially loaded

Here is the view after the AJAX call

What am I doing wrong? Is there any easier solution to this?

Answer 1

In one method you are using the slug to find the Dj and in the load_more you are using the name. You should use dj slug in both and I would use Django pagination to get more items instead of passing the number of found divs.

You can just increment the page parameter send to the load more.

@dajaxice_register
def load_more(request, page, dj_slug=None):
    if dj_slug:
        try:
            dj = DJ.objects.get(slug=dj_slug)
        except DJ.DoesNotExist:
            return None
        queryset = Song.objects.filter(artist=dj, duplicate=False).order_by('-votes', '-release_date')
        paginator = Paginator(queryset)

        render = render_to_string('hunt/dj.html', {
            'dj_song_page': paginator.page(page), 
            'slug': dj.slug, 
            'dj': dj.name
        })
        dajax = Dajax()
        dajax.assign('#edmhunters_body','innerHTML', render)
        return dajax.json()

The dj_song_page is a page returned by the paginator. It will contain the items for that page. Read more on django docs about pagination here: https://docs.djangoproject.com/en/1.6/topics/pagination/

The main problem I think is that you have to use the slug not the name. The queryset must be the same as the one in the dj view.