Django template block from within template tag template

Question

I have a template called base.html. This template contains a block called pagescripts at the bottom after jQuery has been loaded, like this:

<div class="container-fluid">  
{% block content %}
{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
{% block pagescripts %}
{% endblock %}

Next, I have a template tag that is an inclusion tag for displaying a fancy-looking boostrap 4 card for a particular news article, like this:

@register.inclusion_tag('long_article_card.html', takes_context=True)
def show_long_card(context, article):
try:
    contextForm = context['form']
except KeyError:
    contextForm = None

return {'article':article, 'form': contextForm}

Now, within that long_article_card.html, I want to add a script to the pagescripts block from base.html. So, in long_article_card.html, I have this:

<div class="target">TARGET HERE</div>
<a class="dropdown-item" id="lean-vote-xl" href="#">Extreme Left</a>
{% block pagescripts %}
<script>
$(document).ready(function(){
$("#lean-vote-xl").on('click', function(){
    $.ajax({
        url:'/webproxy/v/?i=a&pk={{article.id}}&t=1&v=3',
        type:'get',
        dataType:'html',
        crossDomain:true,
        success:function(data)
       {
       var outputCard = "<div class=\"target\"><br><h2>That worked</h2></div>";
        $(".target").html(outputCard);
       },
        error: function(data) {
            var outputCard = "<div class=\"target\"><br><h2>Load Error</h2></div>";
            $(".target").html(outputCard);
        }
    });
}); // end id_url_text    
});
</script>
{% endblock %}

That template tag is then called from an article detail template called article/detail.html, which extends base.html.

{% extends 'base/base.html' %}
<div class="row">
{% show_long_card article %}
</div>

But that results in the javascript in long_article_card.html being rendered at the end of long_article_card.html, which means it is rendered before jQuery is loaded at the bottom of the page, therefore the script doesn't work because $ is not defined yet. What I need to happen is for the block pagescripts from long_article_card.html to be rendered at the very bottom of the page, essentially at the bottom of base.html. I need django to take the block pagescripts from long_article_card.html, pass it up to article/detail.html, and then article/detail.html to pass it up to base.html, then base.html includes it in its pagescripts block that is at the very bottom of base.html after jQuery is loaded.

I can't have long_article_card.html extend the article/detail.html because it causes a recursion error. Is there any way for long_article_card.html to add things to base.html's pagescripts block?

Thank you.

Answer 1

django-sekizai was built for this use case. It may be of use to you