Home/ Questions/Q 9121087
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T05:46:50+00:00

I’m trying to get a bit of jquery to work inside a jinja2 template.

  • 0

I’m trying to get a bit of jquery to work inside a jinja2 template. The expected behavior is that checking the SelectAll box will check the rest of the boxes. I’ve added an alert to the .change event to start debugging, and I’ve found that it’s not run. So the script is never actually called.

What am I doing wrong?

{% extends "layout.html" %}
{% block head %}<head>
{% block title %}Home{% endblock %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(':checkbox[name=selectAll]').change (function () {
    $(':checkbox[name=instances]').prop('checked', this.checked);
    alert("FOO");
});
</script>
</head>
{% endblock %}
{% block body %}

<form target="" method="GET" id="testform">
<div>
Select All: <input type="checkbox" name="selectAll" id="selectAllInstances" /> <br />
    {% for k in tests %}
    <input type="checkbox" name="instances" value="{{ k[1].mongo_id }}">{{ k[0] }} <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Description: {{ k[1].__doc__ }} <br />
    {% endfor %}
</div>
    <br />
    <br />
    <input type="submit">
</form>
{% endblock %}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    By the time this line executes:

    $(':checkbox[name=selectAll]').change(...);

    There is no checkbox named selectAll — it is defined below the script. Wrap your code inside the .ready event:

    $(document).ready(function(){
});

    The event fires when the DOM hierarchy has been fully constructed (in simple words, when the browser has seen </html>).

    • 0