Question

I am making my first Django application and am running into some AJAX issues. On my website, the user can see a gallery of photos. To get to this page, they merely need to go to /photos. The photos view calculates the photos to display and passes them to the template for rendering.

They can request to see more photos by clicking a button. Clicking this button sends an AJAX request to the server. The server calculates a new set of photos to display and then once again passes the photos to the same template for display. The only issue is that the photos on screen never change.

I verified that new photos are being calculated by the server. Unfortunately, lots of things that should happen never actually happen. First and foremost, using the Chrome developer tools, I can see that the photo files are never sent to the browser from the server. Furthermore, the DOM never updates the src attributes to refer to the new photos. What do I need to be doing to make these things happen?

Thank you.

EDIT:

Some code:

#The python view summarized
def photos:
    photoList = GetListOfPhotos() #Returns photo objects.  These objects have a file field which is access from the template.
        return render(request,
              'photos.html', 
             {'photoList': photoList}, 
              context_instance=RequestContext(request)
             )

#AJAX request
$(document).ready(function(){
    $("#right-arrow").click(function(event) {
        $.post("/photos/", {"arrow" : "right"
        });
    });
});

Answer 1

The most suspicious thing to me is that you say

once again passes the photos to the same template for display.

Is this the EXACT same template your /photo url corresponds to? If it is you should probably be using a small subsection of it just to render the photos in a list or a table (or however you display them) Other than that there are a couple of things that can help resolve this.

1. In chrome developer tools make sure that your javascript is sending the correct data. This can be done by verify your params in the net tab, and by liberal use of console log;

2. Verify that your view is in fact doing what it is supposed to. I like pdb. It is perfect for this. You could write tests, or make print statments or w/e.

3. Verify that your front end is recieving data. Chrome tools can help you do this. The net tab will let you see the response.

I would like to be more specific but you haven’t provided specifics.

To help with better answers its important to post all relevant code.