What happens in the browser stays in the browser, unless you do something
about it.
Forgive me if I'm being too basic below:
There are three approaches to click and see a filtering change, with trade
offs in performance, complexity, and the impact if the user's browser is on
a humble box.
1. When the user clicks, it's on a link, and you reload the page with
the filter applied. No JavaScript required. Pretty slow. more network
load, more browser load, and more load on the server. (I'm not going into
the old approach of having an iframe and the link reloads the iframe
because iframes are tricky, and if you're showing a big table, it's most of
the page anyway.) Do be sure that your images, CSS files, and JavaScript
files are set to encourage the browser and/or the network to cache them,
but the HTML will load every time, and the URL will likely show the filter
settings (though you can do things with cookies and/or session store, but
you will surprise your users someday.
2. Load all the data in the first place, and use JavaScript in
combination with CSS to hide the stuff that's filtered out. If you go this
way, do arrange to use CSS controlled by a class on a single containing
element to control visibility, because doing big DOM modifications in
JavaScript performs poorly. This is the snappiest approach, but you have
to have loaded everything, at cost of network and server load, even if you
expect the user to filter later, and at the cost of RAM in the browser. If
the data's not that big, this is fine. But if it's the catalog of a
hardware chain or something else huge, you probably be doing it in pages.
Sometimes it's natural. For example, I once did and event calendar for a
school system. I loaded a month at a time, and filtering within the month
was peppy, but to go to a different month required a reload, and you
couldn't show stuff from multiple months at one time.
3. Use an AJAX request to replace part of the DOM with filtered data.
(The iframe hack is very much like this.) If the data is most of your
page, this isn't much more light weight than option 1, but the user doesn't
see the page reload, which seems to count for style points.
There are JavaScript "frameworks" (e.g. VueJS) that will help you with 2
and especially 3, but you have to learn how to use the framework, and how
to connect it to Django. Those are useful things to learn, but they're not
overnight reads, and can have performance pitfalls.
Good luck, Bill
On Wed, Feb 12, 2020 at 3:17 PM Phil Kauffman <kauffman.p...@gmail.com>
wrote:
> Hello, I am struggling with trying to filter child objects based on parent
> object selection on index.html (sites.html in example). On my sites.html, I
> list the office sites and a button to click for each, upon clicking I want
> to load the profile list for users only at that site, presently it's
> loading all profiles for all sites, which I assume is because the profiles
> are loaded statically no matter which button is clicked on sites.html.
>
> I'm thinking I need a JS onclick event?
>
> models.py:
> class Site(models.Model):
>
> name = models.CharField(max_length=50)
> date = models.DateField()
> manager = models.CharField(max_length=50)
>
> def save(self, *args, **kwargs):
> super(Site, self).save(*args, **kwargs)
>
> class Profile(models.Model):
> Days = '1st'
> Mids = '2nd'
> Nights = '3rd'
> Work_Schedule_Choices = [
> (Days, 'Day Shift'),
> (Mids, 'Mid Shift'),
> (Nights, 'Night Shift'),
> ]
> sitename = models.ForeignKey(Site, on_delete=models.CASCADE)
> title = models.CharField(max_length=100)
> schedule = models.CharField(max_length=3,choices=Work_Schedule_Choices
> ,default=Days)
> totalusers = models.PositiveSmallIntegerField(default=1, validators=[
> MinValueValidator(1), MaxValueValidator(50)])
>
>
>
> views.py:
> def sites(request):
> sitelist = Site.objects.all()
> return render (request, 'App/sites.html', {'sitelist' : sitelist})
>
> def sitedetail(request):
> site = Site.objects.filter()
> if request.method == 'GET':
> return render(request, 'App/site-detail.html', {'site': site,
> 'profile_set': Profile.objects.all()})
>
>
> sites.html (index)
> {% extends 'App\base.html' %}
> {% load crispy_forms_tags %}
> {% block title %}Site Home{% endblock %}
> {% block content %}
> {% for Site in sitelist %}
> <div <div class="container">
> <div class="row justify-content-center">
> <h5>{{ Site.name }}</h5>
> <a href="{% url 'site-detail' %}" class="btn">View</a>
> </div>
> </div>
> {% empty %}
> <div class="noproject-wrapper center">
> <h3 class="grey-text">Sorry, you haven't created any sites yet.</h3>
> <a href="{% url 'site-create' %}" class="btn-large grey">
> <i class="material-icons white-text left">Add Site</i>
> <span class="bold">Add Site</span>
> </a>
> </div>
> {% endfor %}
> </div>
> {% endblock %}
>
>
> site-detail.html
> {% extends 'App\base.html' %}
> {% load crispy_forms_tags %}
> {% block title %}Site Detail{% endblock %}
> {% block content %}
> <h1>This web form sucks</h1>
> <ul>
> {% for profile in profile_set %}
> <li>{{ profile.title }}</li>
> {% endfor %}
> </ul>
> {% endblock %}
>
>
>
>
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to django-users+unsubscr...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/b4bd97c3-1a36-436d-823a-b4f7003a29d0%40googlegroups.com
> <https://groups.google.com/d/msgid/django-users/b4bd97c3-1a36-436d-823a-b4f7003a29d0%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to django-users+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/CAB%2BAj0v8VTnwmy%2BLG852RU0n78UyotfHCxvEWsVbkv%3DwZHmopA%40mail.gmail.com.
