Question

I am building an django app with tab navigation. And when the tab is clicked only the middle portion of the page is changed and rest remains the same. I also want to put a kind of loading signal that space when someone clicks on the tab and its being loaded. Please help me if django template will work or should i use jquery.

Answer 1

Ignoring the loading signal, there are number of ways you could achieve the result you’re after.

Without using javascript/jquery

Each tab that is clicked would do a complete page load. A Django template could be used to fill in the common parts of the screen, the middle could be rendered depending on the tab clicked. You could use template inheritance to avoid duplication. Without help from javascript it may not be possible to have a signal displayed during a page reload after a new tab is clicked.

Using jquery

With jquery it’s possible to use AJAX to request page content from the server for the tab just clicked. It’s up to you to decide what data to serve as part of the AJAX request from Django.

You could choose to have Django serve out a JSON representation of your data, with the content being handled client side by javascript libraries which do the formatting. In this instance no templating would be required.

Or, you could have Django serve out data for each tab as rendered HTML which you simply insert into the DOM client side. In this instance you probably would use Django templates to format the tab HTML data.

With any of the javascript options it is possible to attach an event handler to your loading functions which display an appropriate loading signal.

Summary

In answer to your question as to whether to use jquery or templates? It depends. You may want to use both.