Как отображать содержимое в зависимости от их категории по нажатию кнопки на той же странице в Django?

Question

Я работаю над портфельным проектом. где я должен классифицировать проекты на основе их категорий. Я дал кнопки для каждой категории, и я должен отображать каждое содержимое отдельных категорий на кнопках кликов под ними. Например. У меня есть 2 проекта в категории Дизайн. Когда я нажимаю «Дизайн», я должен получить эти два проекта под кнопкой.

Я попытался отфильтровать содержимое и успешно отобразил их на другой странице, но не смог отобразить их на той же странице.

Вотмой код: Models.py

class PortfolioCategory(models.Model):
    projectCategory = models.CharField(max_length=200)
    projectSummary = models.CharField(max_length=300)
    projectLink = models.CharField(max_length=200)

    class Meta:
        verbose_name_plural = "categories"

    def __str__(self):
        return self.projectCategory


class Portfolio(models.Model):
    projectName = models.CharField(max_length=250)
    projectLink = models.CharField(max_length=50, default="")
    projectImage = models.ImageField(upload_to="img/Portfolio/")
    projectContent = models.TextField(default="")
    projectCategory = models.ForeignKey(
        PortfolioCategory, verbose_name="Category", on_delete=models.CASCADE)

    def __str__(self):
        return self.projectName

Views.Py

def projectLink(request, projectLink):
    category = [c.projectLink for c in PortfolioCategory.objects.all()]
    if projectLink in category:
        categoryItems = Portfolio.objects.filter(
            projectCategory__projectLink=projectLink)
        myProjects = categoryItems.all()
        return render(
            request,
            "main/home.html#projectLink",
            {
                "projects": myProjects,
                "navbar": navbar,
            }
        )
    projectContent = Portfolio.objects.get(projectLink=projectLink)
    return render(
        request,
        "main/projectItem.html",
        {
            "project": projectContent,
            "navbar": navbar,
        }
    )


def homepage(request):
    return render(
        request=request,
        template_name="main/home.html",
        context={
            "portfolios": Portfolio.objects.all,
            "categories": PortfolioCategory.objects.all,
            "navbar": navbar,
            "socialLinks": socialIcons,
            "skillset": skills,
        })

home.html

<ul class="nav nav-tabs justify-content-center">
            {% for cat in categories  %}

            <li><a data-toggle="tab" href="#{{cat.projectLink}}">{{cat.projectCategory}}</a></li>

            {% endfor %}
        </ul>
        <div class="tab-content">
            {% for cat in categories %}
            <div id="{{cat.projectLink}}" class="tab-pane fadeIn">
                {{cat.projectCategory}}
                 //Projects Detail Here

            </div>
            {% endfor %}
        </div>

Я должен показывать карточки каждого проекта по нажатию кнопки.

Answer 1

Если вы хотите получить данные без обновления страницы, вы должны использовать AJAX для асинхронного вызова вашего представления.

Вы можете использовать XMLHttpRequest или, что предпочтительнее, довольно новый fetch(), основанный на обещаниях.

Вы можете разбить процесс на следующие шаги:

1) Создайте пункт назначения в urls.py, который будет вызывать представление, отвечающее за извлечение категорий из вашей базы данных.

path('some-destination/', views.get_category, name="get_category")

2) Сделайте асинхронный вызов, используя javascript к вашему новому URL-адресу

 function callFunc() {
    fetch('some-destination/').then(
        function(response) {
            if (response.status == 200) {
                //manipulate and format your data here
                //you may need to use `then()` again
            }
        }).catch(function(err) {
        console.log('Fetch Error', err);
    });
}

3) создайте функцию в views.py, которая извлекает ваш объект или данные, которые вам нужны. При необходимости сериализовать его как JSON и вернуть ответ на ваш вызов AJAX

Теперь вашей кнопке просто нужно инициировать вызов AJAX

<input type="button" onclick="callFunc()" value="get categories">

Если вы не знакомы с Promises, просто используйте XMLHttpRequest илиJQuery's AJAX