-4

I response posts in partials html with fetch, but each time get posts from server also return current page header. i just want to get header first.

partial html(server responses it when requested with fetch)

{% for post in posts %}
    <div class="posts-item">
        {{post.description|linebreaks|truncatewords:20}}
        Published at {{post.created}} by {{post.author}}
        <br>
        {% for tag in post.tag.all %}
            <a href="{% url 'social:post_list_by_tag' tag.slug %}">{{tag.name}}</a>
            {% if forloop.last %}, {% endif %}
        {% endfor %}
        <a href="{% url 'social:post_detail' post.pk %}">post details</a>
        <hr><br>
    </div>
{% endfor %}

current page(posts-list.html)

{% extends 'parent/base.html' %}
{% block title%} posts list {% endblock %}
{% block content %}

<div class="posts">
    {% for post in posts %}
        {{post.description|linebreaks|truncatewords:20}}
        Published at {{post.created}} by {{post.author}}
        <br>
        {% for tag in post.tag.all %}
            <a href="{% url 'social:post_list_by_tag' tag.slug %}">{{tag.name}}</a>
            {% if forloop.last %}, {% endif %}
        {% endfor %}
        <a href="{% url 'social:post_detail' post.pk %}">post details</a>
        <hr><br>
    {% endfor %}
</div>

<button class="load-more">load more</button>
<script>
    var page = 2;
    function loadMore(){
        var url = '{% if tag_slug %}{% url "post_list_by_tag" tag.slug %}{% else %}{% url "social:post_list" %}{% endif %}'+'?page='+page;
        fetch(url, {
            method: 'GET',
            headers: {
                'content-type': 'text/html', 'x-requested-with': 'XMLHttpRequest'
            },
        }).then(function(response){
            return response.text();
        }).then(function(html){
            document.querySelector(".post").insertAdjacentHTML("beforeend",html);
            page++;
        })
    }
    var btnLoadMore = document.querySelector(".load-more");
    btnLoadMore.addEventListener("click", loadMore);
</script>
{% endblock %}
5
  • 1
    It's probably better to use a translator for now. That way you can better explain the problem and it will be easier for us to understand. Commented 14 hours ago
  • 1
    You explained your goal, but how is your current code not meeting your expectations? Commented 13 hours ago
  • @KIKOSoftware the SO guidance is almost opposite - stackoverflow.com/help/non-english-questions: "...then we do not recommend that you translate your question to English...", especially if using AI (LLM) translation - meta.stackoverflow.com/questions/424036/… Commented 11 hours ago
  • Samyar - please re-read the minimal reproducible example guidance on posting code - make sure all code shown is needed to reproduce the problem (i.e. try to remove all conditional statements by showing branch that demonstrate the problem). Also make sure to clarify what you see/expect inline in the question. When you edit the question with these details make sure to check "edit resolves issues with post" so it goes to re-open queue. Commented 11 hours ago
  • @AlexeiLevenkov I agree that people shouldn't use a translator when they don't understand the result, but it can be a useful tool to get a more readable question. Or, to quote from the same web page as you quoted: "It can be a great way to get started or to double-check things when you are uncertain.". If you ever had to communicate in another language you'd know. Commented 4 hours ago

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.