SoundCloud-esque wesbite using AJAX to load templates

Using Django
1

Hello Django community,

I’m currently building a music streaming/licensing website (think of it like SoundCloud).

It’s going pretty well, but I’m having difficulty integrating AJAX into the Django framework.

These are the tasks I want to accomplish using AJAX/jQuery:

  • Replace the template without reloading the entire page (load)
  • Replace the URL without navigating to that URL (pushstate)
  • Replace the page title
  • Enable back/forward navigation for the history API (popstate)

I actually got this to work in an isolated example using a tutorial I found here.

If you want to see what the code looks like, check out their example.

I get the feeling I’m going to need to work with the views.py to get this to work in Django.

Right now, I’ve got the base.html set up (header, footer and music player). I just need to get what goes inside {block content} to work with AJAX. The rest will remain untouched.

I’d appreciate any information/guidance on the subject since I’m relatively new to Django and web development in general.

I appreciate your time, thanks in advance!

2

We do something like this on one of our projects - it’s really rather easy.

The template being rendered by the view doesn’t extend the base template - it’s just rendering the block content. The base template has a div with a specific id attributed. The AJAX method calls the view and gets that html fragment as a response, and adds it to the DOM within that specific div.

The specific line of code we use to call that view is the jQuery load method, and looks like this:
$("#rightContent").load(url, function(content, status, jqxhr) { ... });
“rightContent” is the id of the div, url is the reference to the view, and the function allows us to do some processing associated with that content after it has been received - specifically, we check for a certain marker in the returned content, and if the marker is not present, then the request was rejected for some reason.

3

Hello Ken,

I appreciate your response!

Just so I understand…

Are you wrapping the {block content}{endblock} tags in the div or is the div inside those tags?

Is the JavaScript code running from the base.html or the other templates/views?

Also, is the “URL” parameter in the load method automatically pulling the URL from HREFs or do I need to create a separate function/variable?

Thanks!

4

I don’t use the {% block content %} {% endblock %} tags. What we do is done instead of that since the two templates are rendered separately and at different points in time.

The base template has something like:
<div id="rightContent"></div>
It is rendered and emitted as a page.

When a certain button is pushed, the JavaScript function loads the content to that div.
Each button is registered with an event handler, that when clicked, passes their associated url as a parameter to the JavaScript function that contains that line.

The JavaScript to handle this is loaded in the base template, since it needs to be active for all the buttons on the base page.