возвращает другой набор запросов с другим переключателем в шаблоне на той же странице django

#django #ajax

#django #ajax

Вопрос:

Я хочу отображать другой набор запросов, когда пользователь нажимает переключатель, не отправляя ввод переключателя.

Мои модели таковы:

 class A(models.Model):
    name = models.CharField(max_length=10)

    def get_a_list(self):
        return self.b_set.filter(name__endswith='lorem')

    def get_b_list(self):
        return self.b_set.filter(name='blah')

class B(models.Model):
    dept = models.ForeignKey(A, on_delete=models.CASCADE)
  

В шаблоне я могу сделать что-то вроде этого:

 <ul>
{% for a in a.objects.all %}
{% for b in a.b_set.all %} <!-- instead of returning all I can do a.get_a_list or b.get_b_list -->
  <li></li>
{% endfor %}
{% endfor %}
</ul>
  

Если у меня есть группа переключателей в том же шаблоне, например:

 <div>
  <input type="radio" id="a-list" value="a-list" name="filter">
  <label for="a-list">a_list</label>
</div>
<div>
  <input type="radio" id="b-list" value="b-list" name="filter">
  <label for="b-list">b_list</label>
</div>
<div>
  <input type="radio" id="all" value="all" name="filter">
  <label for="all">all</label>
</div>
  

Когда пользователь выбирает кнопку a-list, я хочу вызвать get_a_list , а для кнопки b-list, get_b_list . Я хочу отобразить результат без изменения URL.

Мне удалось получить этот другой список, поместив пользовательский метод в класс models, но я заблудился. И я знаю, что могу потерять некоторую репутацию в этом вопросе, потому что для кого-то это может быть так просто.

Любое предложение было бы очень благодарно. Заранее благодарю вас.

Комментарии:

1. Вы на правильном пути — пусть шаблон отображает оба набора запросов и использует javascript для динамического отображения / скрытия каждого набора запросов в зависимости от того, на какую кнопку нажал пользователь.

Ответ №1:

Что-то вроде:

template.html:

 <div id='a_set'>
  {% for a in a.objects.all %} 
    ...
  {% endfor %}
</div>

<div id='b_set'>
  {% for b in a.b_set.all %}
    ...
  {% endfor %}
</div>
  

script.js:

 function change_sets() {
 if ($('#a-list').is(':checked')) {
    $('#a_set').show();
    $('#b_set').hide();
  }
  else if ($('#b-list').is(':checked')) {
    $('#a_set').hide();
    $('#b_set').show();
  } 
} 

$('#a-list').click(change_sets);
$('#b-list').click(change_sets);