CODEWITHSUNDEEP
django
Faziki
Faziki

Reputation: 821

Render a template on nav item click in block content without loading the whole page (Django)

Hell guys,

I'm still trying to learn so please dont be harsh :)

I'm trying to find a way to render templates in block content. Example

Nav items

If the user clicks on About page (About.html)

It renders it in the {block content}without reloading or refreshing the page. If the user then clicks on Contact us the {block content} gets updated with the Contact us page (Contact.html)

Is there any way you can do this in Django without using Ajax or Jquery. if not is there somewhere good documentation I can follow to do this?

I've been searching the internet for any answers but I can't find anything on this exact matter only found Pjax https://github.com/defunkt/jquery-pjax but I'm a bit afraid of using Ajax and my knowledge regarding Ajax is not really great.

Thank you for reading this and for your time.

Kind Regards,

Upvotes: 0

Views: 169

Answers (1)

Samer
Samer

Reputation: 156

AFAIK there's no way to dynamically swap content on a page without using some sort of javascript. So I think you're gonna have to make a decision one way or the other:

  • Is there a strong reason you want to avoid javascript/jquery, or do you just feel uncomfortable using it? If it's the latter I'd strongly recommend giving it a try, something like this would be really simple and easy to implement; you'd just load all the content from all of those pages within your content block, then use jquery toggle() to swap between them. Happy to walk you through this if it would be helpful.
  • If there's a different, inescapable reason you can't use jquery, then I'd recommend just doing it the old-fashioned, static way, putting each of those pages in separate views and having the hyperlinks redirect the user to the appropriate page.

Either way, welcome to django and best of luck figuring this out! Please don't hesitate to reach out if I can be of more help.

EDIT:

Here's a quick and easy example of what you could do. There are better ways but this is probably the simplest. Start by importing the jquery library by including this in your base template:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Then put all your content inside for all four pages inside that block, each within its own div, with a class name that's related to your nav buttons. Hide the content by default, so you don't have all four pages showing at once. So, something like:

<style>
  .Page {
    display: none;
  }
</style>
<nav>
  <span class="NavItem" id="About">About</span>
  <span class="NavItem" id="Contact">Contact</span>
</nav>
<div class="PageContent">
  <div class="Page About">Content Here</div>
  <div class="Page Contact">More Content Here</div>
</div>

Then all that's left is the jquery script to show whichever content matches the nav item you click on:

<script type="text/javascript">
  $( '.NavItem' ).click(function() {
    // Hide whatever content is currently being displayed
    $('.Page').hide();
    // Show the content that matches the id of the nav item you clicked
    var content = $( this ).attr('id');
    $( '.' + content ).show();
  });
</script>

And that's it! Here's a jsfiddle link so you can see it in action.

Upvotes: 2

Related Questions