JQuery doesn't work in Django custom templatetag's template

StackOverflow https://stackoverflow.com/questions/23577080

Question

I am creating a simple custom templatetag that renders it's own template when called. The problem is that the JQuery on this templatetag's template isn't working and I don't know why.

Parent template

<head>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.js"></script>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
    {% render_style %}
</body>

render_style templatetag

@register.inclusion_tag('TEST.html')
def render_style():
    return

TEST.html

<head>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#name").css("text-decoration","underline");
        });
    </script>
</head>
<body>
    <h2 id="name">FULL NAME</h2>
</body>

The templatetag's template is indeed loading because the text FULL NAME is displaying on the screen but its not being underlined. If I put that same JQuery in the parent template, then FULL NAME would become underlined.

What's going on here? It likes the JQuery when that script is in the parent class but it doesn't like it when the script resides on the render_style's template.

Was it helpful?

Solution

I'm guessing that the template code is being executed in an event handler.

So your code adds an event listener to the ready event which has already executed once and will not be executed again.

So try moving $("#name").css("text-decoration","underline"); under the #name tag and remove the ready event and see if it works.

Example:

<h2 id="name">FULL NAME</h2>
<script type="text/javascript">
        $("#name").css("text-decoration","underline");
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top