Django how to add html style for javascipt loadmore button ?

Using Django
1

I added load more button using JavaScript in my blog page which will dynamically load content. But I don’t know how to implement my original html style to JavaScript load more button.

This is my original html style:

 {% for filt in object_list  %}    

                        <div class="card mb-4">
                        {% if  not filt.blog_cover_image %}
                            <img class="img-fluid rounded"  style="max-height:1000px;max-width:1200px;"  src="https://via.placeholder.com/900x300" alt="..." />
                       {% else %}

                         <img class="img-fluid rounded"  style="max-height:1000px;max-width:1200px;" src="{{ filt.blog_cover_image.url }}" alt="..." />

                       {%endif%}
                            <div class="card-body">
                                <h2 class="card-title"><a href="{% url 'blog:blog-detail' filt.slug %}">{{filt.title}}</a></h2>
                                <p class="card-text">{{filt.body|striptags|safe|slice:":250" }}</p>
                                <a class="btn btn-primary" href="{% url 'blog:blog-detail' filt.slug %}">Read More →</a>
                            </div>
                            <div class="card-footer text-muted">
                                Posted on ({{filt.created_at}})
                                <div class="author">{{filt.author.first_name}}&nbsp{{filt.author.last_name}}&nbsp;{% if user.is_authenticated  %}{% if user.id == blog.author.id or user.is_superuser %}<a href="{% url 'blog:blog-update' filt.slug  %}"><b>(Edit Blog)</b></a>&nbsp;<a href="{% url 'blog:blog-delete' filt.slug %}"><b>(Delete Blog)</b></a>{% endif %}{% endif %}</div>
                            </div>
                        </div>
{% endfor %}

<----javascript load more html--->
<div id="posts-box"></div>
    <div id="spinner-box" class="not-visible">
        <div class="spinner-border text-primary" role="status"></div>
    </div>
    <div id="loading-box">
        <button class="btn btn-primary" id="load-btn">Load more</button>
    </div>

here is my javascript code:

const postsBox = document.getElementById('posts-box')
console.log(postsBox)
const spinnerBox = document.getElementById('spinner-box')
const loadBtn = document.getElementById('load-btn')
const loadBox = document.getElementById('loading-box')
let visible = 3 

const handleGetData = () => {
    $.ajax({
        type: 'GET',
        url: `/posts-json/${visible}/`,
        success: function(response){
            maxSize = response.max
            const data = response.data
            spinnerBox.classList.remove('not-visible')
            setTimeout(()=>{
                spinnerBox.classList.add('not-visible')
                data.map(post=>{
                    console.log(post.id)
                    postsBox.innerHTML += `<div class="card mb-4">

                                                ${post.title}
                                                <br>
                                                ${post.body}
                                            </div>`
                })
                if(maxSize){
                    console.log('done')
                    loadBox.innerHTML = "<h4>No more posts to load</h4>"
                }
            }, 500)
        },
        error: function(error){
            console.log(error)
        }
    })
}

handleGetData()

loadBtn.addEventListener('click', ()=>{
    visible += 3
    handleGetData()
})

how to implement my original html style to my new JavaScript code?

2

I asumen that postBox come from:

const document.getElementById("posts-box");

If that’s the case you shouldn’t create a new elemento with “innerHTML”, you should create and append new nodes to your div element.

That said, in order to implement “your style” in the new code create by DOM manipulation you have to apply the Botstrap classes that you have used in your first elements.

1 Like